/*
 * Alicerce360 — destaque com a identidade da empresa e efeitos interativos (§9.3 do planejamento),
 * usados no Início da intranet e na página pública: E0 3D, E1 camadas, E2 identidade revelada,
 * E3 mascote, E4a papel amassado com a mão e E4b papel com profundidade.
 * Cores sempre pelos tokens --a360-* (marca e template).
 */

/* ---------- Destaque ---------- */
.a360i-hero {
	position: relative;
	overflow: hidden;
	min-height: 220px;
	padding: 32px;
	border-radius: calc(var(--a360-radius) * 1.5);
	background: linear-gradient(135deg, var(--a360-primary), color-mix(in srgb, var(--a360-primary) 55%, var(--a360-accent)));
	color: var(--a360-primary-text);
	isolation: isolate;
}

.a360i-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 156px;
}

.a360i-hero__logo {
	max-height: 96px;
	padding: 10px;
	border-radius: var(--a360-radius);
	background: rgba(255, 255, 255, 0.92);
}

.a360i-hero__hello {
	margin: 0;
	opacity: 0.9;
	font-size: 16px;
}

.a360i-hero .a360i-hero__title {
	margin: 2px 0 6px;
	color: inherit;
	font-size: clamp(26px, 4vw, 40px);
}

.a360i-hero__slogan {
	margin: 0;
	max-width: 60ch;
	opacity: 0.92;
	font-size: 17px;
}

.a360i-pause {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.28);
	color: #fff;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

/* E1 — camadas animadas */
.a360i-layers {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.a360i-layer {
	position: absolute;
	display: block;
	transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
	transition: transform 0.08s linear;
	will-change: transform;
}

.a360i-layer--1 {
	right: -80px;
	top: -120px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--a360-accent) 70%, #fff), transparent 70%);
	opacity: 0.55;
}

.a360i-layer--2 {
	right: 12%;
	bottom: -70px;
	width: 260px;
	height: 160px;
	border-radius: 40px;
	background: color-mix(in srgb, var(--a360-primary-text) 14%, transparent);
	transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotate(-12deg);
}

.a360i-layer--3 {
	right: 30%;
	top: 18%;
	width: 120px;
	height: 120px;
	border: 14px solid color-mix(in srgb, var(--a360-accent) 55%, transparent);
	border-radius: 50%;
}

.a360i-layer--4 {
	right: 6%;
	top: 22%;
	width: 140px;
	height: 140px;
	background-image: radial-gradient(color-mix(in srgb, var(--a360-primary-text) 55%, transparent) 2px, transparent 2.5px);
	background-size: 18px 18px;
}

/* E2 — identidade escondida até passar o mouse */
.a360i-reveal {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--a360-primary) 82%, #000);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	-webkit-mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent 0, transparent var(--r, 0px), #000 calc(var(--r, 0px) + 70px));
	mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent 0, transparent var(--r, 0px), #000 calc(var(--r, 0px) + 70px));
	transition: opacity 0.6s;
}

.a360i-reveal__hint {
	padding: 6px 14px;
	border: 1px solid color-mix(in srgb, var(--a360-primary-text) 40%, transparent);
	border-radius: 999px;
	color: var(--a360-primary-text);
	font-size: 14px;
	letter-spacing: 0.04em;
}

.a360i-reveal.is-revealed {
	opacity: 0;
	pointer-events: none;
}

.a360i-hero--reveal .a360i-pause {
	z-index: 4;
}

/* E4b — papel amassado com parallax de verdade */
.a360i-paper {
	flex: none;
	width: 260px;
	height: 170px;
	perspective: 900px;
}

.a360i-paper__stage {
	position: relative;
	width: 100%;
	height: 100%;
	transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -12deg));
	transform-style: preserve-3d;
	transition: transform 0.12s ease-out;
}

.a360i-paper__shadow,
.a360i-paper__sheet,
.a360i-paper__mark {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: 6px;
}

.a360i-paper__shadow {
	background: rgba(0, 0, 0, 0.45);
	filter: blur(14px);
	transform: translateZ(-40px) translateY(14px);
}

.a360i-paper__sheet {
	overflow: hidden;
	background: #f4f1ea;
	transform: translateZ(0);
	clip-path: polygon(2% 4%, 30% 0, 62% 3%, 98% 1%, 100% 38%, 97% 70%, 99% 97%, 64% 100%, 31% 96%, 1% 99%, 3% 62%, 0 30%);
}

.a360i-paper__relief {
	width: 100%;
	height: 100%;
}

.a360i-paper__mark {
	padding: 22px;
	color: var(--a360-primary);
	font-family: var(--a360-heading-font);
	font-size: 26px;
	font-weight: 800;
	text-align: center;
	mix-blend-mode: multiply;
	transform: translateZ(36px);
}

.a360i-paper__mark img {
	max-height: 110px;
	mix-blend-mode: multiply;
}

.a360i-hero.is-paused *,
.a360i-hero.is-paused .a360i-layer,
.a360i-hero.is-paused .a360i-paper__stage {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.a360i-layer,
	.a360i-paper__stage {
		transform: none !important;
		transition: none !important;
	}

	.a360i-reveal {
		display: none;
	}
}

.a360i-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.a360i-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid var(--a360-accent);
	border-radius: var(--a360-radius);
	background: var(--a360-accent);
	color: var(--a360-accent-text) !important;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.a360i-btn:hover {
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
	transform: translateY(-1px);
}

.a360i-btn--ghost {
	border-color: currentColor;
	background: transparent;
	color: inherit !important;
}

.a360i-btn:focus-visible,
.a360i-pause:focus-visible,
.a360i-hand__start:focus-visible {
	outline: 3px solid var(--a360-accent);
	outline-offset: 2px;
}

/* E0 — a marca em 3D (placa extrudada) e formas ao redor */
.a360i-3d {
	flex: none;
	width: 250px;
	height: 190px;
	perspective: 800px;
}

.a360i-3d__rig {
	position: relative;
	width: 100%;
	height: 100%;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transform-style: preserve-3d;
	transition: transform 0.18s ease-out;
}

.a360i-3d__float {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 128px;
	height: 128px;
	margin: -64px 0 0 -64px;
	transform-style: preserve-3d;
	animation: a360i-float 5s ease-in-out infinite;
}

.a360i-3d__mark {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	animation: a360i-sway calc(10s / var(--a360-fx, 1)) ease-in-out infinite alternate;
}

.a360i-3d__slice {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: 30px;
	background: color-mix(in srgb, var(--a360-accent) calc(100% - var(--i) * 4%), #000);
	transform: translateZ(calc(var(--i) * -2.2px));
}

.a360i-3d__face {
	overflow: hidden;
	background: linear-gradient(145deg, color-mix(in srgb, var(--a360-accent) 82%, #fff), var(--a360-accent));
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35), inset 0 -10px 24px rgba(0, 0, 0, 0.12);
	color: var(--a360-accent-text);
	font-family: var(--a360-heading-font);
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.a360i-3d__face img {
	max-width: 76%;
	max-height: 76%;
	padding: 8px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.94);
}

.a360i-3d__cube {
	position: absolute;
	top: 6px;
	right: 2px;
	width: 44px;
	height: 44px;
	transform-style: preserve-3d;
	animation: a360i-cube calc(14s / var(--a360-fx, 1)) linear infinite;
}

.a360i-3d__cube i {
	position: absolute;
	inset: 0;
	border: 1px solid color-mix(in srgb, var(--a360-primary-text) 60%, transparent);
	background: color-mix(in srgb, var(--a360-primary-text) 18%, transparent);
}

.a360i-3d__cube i:nth-child(1) { transform: translateZ(22px); }
.a360i-3d__cube i:nth-child(2) { transform: rotateY(180deg) translateZ(22px); }
.a360i-3d__cube i:nth-child(3) { transform: rotateY(90deg) translateZ(22px); }
.a360i-3d__cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(22px); }
.a360i-3d__cube i:nth-child(5) { transform: rotateX(90deg) translateZ(22px); }
.a360i-3d__cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(22px); }

.a360i-3d__ring {
	position: absolute;
	bottom: 4px;
	left: 0;
	width: 74px;
	height: 74px;
	border: 9px solid color-mix(in srgb, var(--a360-accent) 85%, #fff);
	border-radius: 50%;
	transform: translateZ(30px) rotateX(70deg);
	animation: a360i-ring calc(8s / var(--a360-fx, 1)) linear infinite;
}

.a360i-3d__orb {
	position: absolute;
	right: 22px;
	bottom: 18px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, #fff, color-mix(in srgb, var(--a360-primary-text) 70%, var(--a360-accent)) 45%, color-mix(in srgb, var(--a360-accent) 60%, #000));
	transform: translateZ(60px);
	animation: a360i-float 4s ease-in-out infinite reverse;
}

@keyframes a360i-float {
	0%, 100% { translate: 0 -6px; }
	50% { translate: 0 6px; }
}

@keyframes a360i-sway {
	from { transform: rotateY(-32deg) rotateX(10deg); }
	to { transform: rotateY(32deg) rotateX(-8deg); }
}

@keyframes a360i-cube {
	to { transform: rotateX(360deg) rotateY(720deg); }
}

@keyframes a360i-ring {
	to { transform: translateZ(30px) rotateX(70deg) rotateZ(360deg); }
}

.a360i-hero.is-paused .a360i-3d__float,
.a360i-hero.is-paused .a360i-3d__mark,
.a360i-hero.is-paused .a360i-3d__cube,
.a360i-hero.is-paused .a360i-3d__ring,
.a360i-hero.is-paused .a360i-3d__orb {
	animation-play-state: paused;
}

/* E4a — papel amassado com a mão (segurando ou diante da câmera) */
.a360i-paper--hand {
	cursor: grab;
	touch-action: none;
}

.a360i-paper--hand:active {
	cursor: grabbing;
}

.a360i-paper--hand .a360i-paper__stage {
	transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -12deg)) rotateZ(calc(var(--c, 0) * 10deg)) scale(calc(1 - var(--c, 0) * 0.34));
}

.a360i-paper__folds {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(33deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 23px),
		repeating-linear-gradient(-52deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 27px),
		radial-gradient(circle at 40% 45%, transparent 30%, rgba(0, 0, 0, 0.25));
	opacity: var(--c, 0);
	mix-blend-mode: multiply;
}

.a360i-hero.is-crumpling .a360i-paper__sheet,
.a360i-hero.is-crumpling .a360i-paper__mark {
	filter: url(#a360i-crumple-move);
}

.a360i-svg-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.a360i-hand {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 14px;
}

.a360i-hand__start {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid color-mix(in srgb, var(--a360-primary-text) 55%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--a360-primary-text) 14%, transparent);
	color: var(--a360-primary-text);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.a360i-hand__hint {
	opacity: 0.85;
	font-size: 13px;
}

.a360i-hand__video {
	width: 96px;
	height: 72px;
	border: 2px solid color-mix(in srgb, var(--a360-primary-text) 60%, transparent);
	border-radius: 10px;
	object-fit: cover;
	transform: scaleX(-1);
}

.a360i-hand__status {
	flex-basis: 100%;
	min-height: 1.2em;
	margin: 0;
	font-size: 13px;
}

.a360i-hand__consent {
	max-width: 520px;
	padding: 22px 24px;
	border: 0;
	border-radius: calc(var(--a360-radius) * 1.5);
	background: var(--a360-surface);
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
	color: var(--a360-text);
}

.a360i-hand__consent::backdrop {
	background: rgba(15, 23, 42, 0.55);
}

.a360i-hand__consent h2 {
	margin: 0 0 10px;
	font-size: 20px;
}

.a360i-hand__consent li {
	margin: 6px 0;
}

.a360i-hand__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

.a360i-hand__consent .a360i-btn--ghost {
	color: var(--a360-text) !important;
}

/* E3 — mascote que acompanha a rolagem */
.a360x-mascot {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	pointer-events: none;
}

.a360x-mascot[hidden] {
	display: none;
}

.a360x-mascot__figure {
	position: relative;
	width: 104px;
	height: 128px;
	pointer-events: auto;
	cursor: pointer;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.a360x-mascot__figure img,
.a360x-mascot__figure svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.a360x-mascot__bubble {
	position: relative;
	max-width: 230px;
	margin-bottom: 70px;
	padding: 12px 14px;
	border: 1px solid var(--a360-border);
	border-radius: 16px 16px 4px 16px;
	background: var(--a360-surface);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
	color: var(--a360-text);
	font-size: 14px;
	line-height: 1.4;
	pointer-events: auto;
	transition: opacity 0.25s, transform 0.25s;
}

.a360x-mascot__bubble.is-changing {
	opacity: 0;
	transform: translateY(6px);
}

.a360x-mascot__bubble strong {
	display: block;
	margin-bottom: 2px;
	color: var(--a360-link);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.a360x-mascot__bubble a {
	display: inline-block;
	margin-top: 6px;
	color: var(--a360-link);
	font-weight: 700;
}

.a360x-mascot__bubble .a360x-mascot__off {
	display: block;
	margin-top: 8px;
	color: var(--a360-muted);
	font-size: 12px;
	font-weight: 400;
}

.a360x-mascot__close {
	position: absolute;
	top: -10px;
	right: -10px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--a360-border);
	border-radius: 50%;
	background: var(--a360-surface);
	color: var(--a360-muted);
	cursor: pointer;
}

.a360x-mascot.is-minimized .a360x-mascot__bubble {
	display: none;
}

.a360x-mascot.is-quiet .a360x-mascot__bubble {
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	visibility: hidden;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}

.a360x-mascot.is-minimized .a360x-mascot__figure {
	transform: scale(0.7) translate(18px, 26px);
}

/* Cores do mascote: as da marca ou as próprias (variáveis --m-* no contêiner). */
.a360x-mascot .m-body { fill: var(--m-body, var(--a360-primary)); }
.a360x-mascot .m-shine { fill: color-mix(in srgb, #fff 12%, transparent); clip-path: inset(0 58% 0 0 round 24px); }
.a360x-mascot .m-dark { fill: color-mix(in srgb, var(--m-body, var(--a360-primary)) 70%, #000); }
.a360x-mascot .m-dark-stroke { stroke: color-mix(in srgb, var(--m-body, var(--a360-primary)) 70%, #000); }
.a360x-mascot .m-accent { fill: var(--m-accent, var(--a360-accent)); }
.a360x-mascot .m-accent-dark { fill: color-mix(in srgb, var(--m-accent, var(--a360-accent)) 75%, #000); }
.a360x-mascot .m-plate { fill: var(--m-plate, #fff); }
.a360x-mascot .m-plate-stroke { stroke: var(--m-plate, #fff); }
.a360x-mascot .m-cheek { fill: var(--m-accent, var(--a360-accent)); opacity: 0.45; }
.a360x-mascot .m-ink { fill: var(--m-ink, #1f2937); }
.a360x-mascot .m-ink-stroke { stroke: var(--m-ink, #1f2937); }
.a360x-mascot .m-shadow { fill: rgba(15, 23, 42, 0.18); }
.a360x-mascot .m-lens { fill: color-mix(in srgb, #fff 55%, transparent); stroke: color-mix(in srgb, var(--m-body, var(--a360-primary)) 70%, #000); stroke-width: 4; }
.a360x-mascot .m-glass { fill: color-mix(in srgb, #fff 25%, transparent); stroke: var(--m-ink, #1f2937); stroke-width: 2.5; }

/* Acessórios: todos vêm no desenho; aparece o da classe do contêiner. */
.a360x-mascot svg .m-acc { display: none; }
.a360x-acc--capacete svg .m-acc--capacete,
.a360x-acc--oculos svg .m-acc--oculos,
.a360x-acc--gravata svg .m-acc--gravata,
.a360x-acc--headset svg .m-acc--headset { display: inline; }
.a360x-acc--capacete svg .m-antenna { display: none; }

/* Mascote parado (prévias da configuração). */
.a360x-mascot.a360x-mascot--static {
	position: relative;
	right: auto;
	bottom: auto;
	z-index: auto;
	display: inline-block;
	width: 84px;
	height: 104px;
	pointer-events: none;
}

.a360x-mascot--static svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Poses do mascote (SVG embutido): braços, boca, olhos e acessórios. */
.a360x-mascot svg .m-arm {
	transform-box: fill-box;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.a360x-mascot svg .m-arm--left {
	transform-origin: 100% 0;
}

.a360x-mascot svg .m-arm--right {
	transform-origin: 0 0;
}

.a360x-mascot svg .m-mouth,
.a360x-mascot svg .m-prop {
	opacity: 0;
	transition: opacity 0.25s;
}

.a360x-mascot svg .m-pupils {
	transition: transform 0.3s;
}

.a360x-mascot svg .m-lids {
	transform-box: fill-box;
	transform-origin: 50% 0;
	transform: scaleY(0);
	animation: a360x-blink 5s infinite;
}

/* O seletor leva "svg" para ganhar de ".a360x-mascot svg .m-mouth" (antes, a boca e a lupa nunca apareciam). */
.a360x-mascot--idle svg .m-mouth--smile,
.a360x-mascot--wave svg .m-mouth--open,
.a360x-mascot--point svg .m-mouth--smile,
.a360x-mascot--read svg .m-mouth--o,
.a360x-mascot--think svg .m-mouth--flat,
.a360x-mascot--happy svg .m-mouth--open,
.a360x-mascot--read svg .m-prop--lens,
.a360x-mascot--happy svg .m-prop--spark {
	opacity: 1;
}

.a360x-mascot--wave .m-arm--right {
	transform: rotate(-150deg);
	animation: a360x-wave 0.9s ease-in-out 3;
}

.a360x-mascot--point .m-arm--right {
	transform: rotate(-100deg);
}

.a360x-mascot--point .m-pupils {
	transform: translate(3px, -2px);
}

.a360x-mascot--read .m-arm--right {
	transform: rotate(-60deg);
}

.a360x-mascot--read .m-pupils {
	transform: translate(2px, 1px);
}

.a360x-mascot--think .m-arm--right {
	transform: rotate(-125deg) translateX(-6px);
}

.a360x-mascot--think .m-pupils {
	transform: translate(-2px, -3px);
}

.a360x-mascot--happy .m-arm--right {
	transform: rotate(-160deg);
}

.a360x-mascot--happy .m-arm--left {
	transform: rotate(160deg);
}

.a360x-mascot--happy .a360x-mascot__figure {
	animation: a360x-hop 0.6s ease-in-out 2;
}

@keyframes a360x-wave {
	0%, 100% { transform: rotate(-150deg); }
	50% { transform: rotate(-115deg); }
}

@keyframes a360x-hop {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@keyframes a360x-blink {
	0%, 94%, 100% { transform: scaleY(0); }
	96% { transform: scaleY(1); }
}

@media (max-width: 960px) {
	.a360i-hero {
		padding: 22px 22px 58px;
	}

	.a360i-hero__content {
		flex-direction: column;
		align-items: flex-start;
	}

	.a360x-mascot {
		right: 8px;
		bottom: 76px;
	}

	.a360x-mascot__figure {
		width: 72px;
		height: 90px;
	}

	.a360x-mascot__bubble {
		max-width: 180px;
		margin-bottom: 44px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.a360i-3d__rig,
	.a360i-3d__float,
	.a360i-3d__mark,
	.a360i-3d__cube,
	.a360i-3d__ring,
	.a360i-3d__orb,
	.a360x-mascot *,
	.a360x-mascot__figure {
		animation: none !important;
		transition: none !important;
	}
}