/* Abertura "túnel em perspectiva" (porta em CSS/JS puro do componente Perspective Tunnel Hero).
   Só vale sob html.has-intro (posta por intro-boot.js). Sem JS, ou se o JS falhar, o atributo
   hidden mantém a abertura fora da tela e a página fica livre. Animamos só transform e opacity. */

html.has-intro,html.has-intro body,html.intro-settle,html.intro-settle body{overflow:hidden}
html.has-intro .intro,html.has-intro .intro[hidden],html.intro-leaving .intro{display:block!important}
html:not(.has-intro):not(.intro-leaving) .intro{display:none!important}
body[tabindex="-1"]:focus{outline:none}

.intro{--intro-night:#100a21;position:fixed;inset:0;z-index:2147483000;overflow:hidden;isolation:isolate;background:var(--intro-night);color:#fff;font-family:Manrope,Arial,Helvetica,sans-serif;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}
.intro.is-leaving{opacity:0;pointer-events:none;transition:opacity .6s cubic-bezier(.4,0,.2,1)}
.intro .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Fundo: brilho roxo, grade de pontos com máscara radial e dois anéis de profundidade. */
.intro-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 55% 45% at 50% 50%,#6d28d94d,transparent 72%),radial-gradient(ellipse 80% 40% at 50% 115%,#67e8f914,transparent 70%)}
.intro-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#ffffff30 1px,transparent 1.6px);background-size:28px 28px;background-position:center;-webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 50%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 62% at 50% 50%,#000 15%,transparent 72%)}
.intro-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.intro-ring-a{width:48vmin;height:48vmin;border:1px solid #ffffff14}
.intro-ring-b{width:76vmin;height:76vmin;border:1px dashed #ffffff12}

/* Título central: fica atrás dos cartões. */
.intro-copy{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;padding:0 20px;text-align:center;pointer-events:none;will-change:transform,opacity}
.intro-eyebrow{margin:0 0 18px;font-size:11px;font-weight:700;line-height:1.6;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan,#67e8f9)}
.intro-title{margin:0;max-width:min(94vw,17em);font-family:InterHero,Manrope,Arial,sans-serif;font-size:clamp(32px,5.1vw,84px);font-weight:800;line-height:.98;letter-spacing:-.05em;color:#fff;text-wrap:balance;text-shadow:0 2px 22px #100a21d9,0 0 2px #100a2199}
.intro-title span{color:var(--lime,#d4f542)}

/* Palco 3D: perspectiva no palco, preserve-3d no plano; o JS move cada cartão em Z. */
.intro-stage{position:absolute;inset:0;z-index:2;perspective:1200px;perspective-origin:50% 50%;pointer-events:none}
.intro-plane{position:absolute;inset:0;transform-style:preserve-3d;--card-w:240px}
.intro-card{position:absolute;left:50%;top:50%;width:var(--card-w);aspect-ratio:4/5;margin-left:calc(var(--card-w)/-2);margin-top:calc(var(--card-w)*-.625);opacity:0;visibility:hidden;will-change:transform,opacity;backface-visibility:hidden}
.intro-card-inner{position:relative;width:100%;height:100%;overflow:hidden;border-radius:16px;background:#241839;box-shadow:0 0 0 1px #ffffff21,0 24px 60px -14px #000000c0}
.intro-card img{width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .5s ease}
.intro-card img.is-loaded{opacity:1}
.intro-card-inner::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(to top,#0b0718eb,#0b071800);pointer-events:none}
.intro-card-inner>span{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font-size:10px;font-weight:700;line-height:1.3;letter-spacing:.22em;text-transform:uppercase;color:#f4efff}

/* Clímax: a logo oficial (versão branca, igual ao cabeçalho) entra no fim do túnel. */
.intro-brand{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:clamp(18px,2.4vw,28px);padding:0 24px;text-align:center;opacity:0;pointer-events:none;will-change:transform,opacity}
.intro-brand::before{content:"";position:absolute;left:50%;top:50%;width:min(90vw,820px);height:min(60vw,420px);transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,#6d28d966,transparent 68%);z-index:-1}
.intro-brand img{width:min(70vw,520px);height:auto;filter:brightness(0) invert(1)}
.intro-brand p{margin:0;max-width:44ch;text-wrap:balance;font-size:clamp(15px,1.5vw,20px);font-weight:600;line-height:1.45;color:#e2d8f2}

/* Dica de rolagem e barra de progresso. */
.intro-hint{position:absolute;left:50%;bottom:max(34px,calc(env(safe-area-inset-bottom) + 22px));z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;margin:0;transform:translateX(-50%);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:#d6cbe9;pointer-events:none}
.intro-hint i{display:block;width:1px;height:28px;background:linear-gradient(#d6cbe9,transparent);animation:intro-nudge 1.6s ease-in-out infinite}
.intro-hint-touch{display:none}
@media(hover:none) and (pointer:coarse){.intro-hint-wheel{display:none}.intro-hint-touch{display:inline}}
@keyframes intro-nudge{0%,100%{transform:translateY(-4px);opacity:.45}50%{transform:translateY(5px);opacity:1}}
.intro-progress{position:absolute;left:0;right:0;bottom:0;z-index:4;height:3px;background:#ffffff12;pointer-events:none}
.intro-progress i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#6d28d9,#67e8f9 60%,#d4f542)}

/* Botão Pular: sempre visível, alvo de 44 px, foco evidente. */
.intro-skip{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:5;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:10px 18px;border:1px solid #ffffff4d;border-radius:999px;background:#100a21b8;color:#fff;font:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:background .2s,border-color .2s}
.intro-skip:hover{background:#ffffff17;border-color:#ffffff8c}
.intro-skip:focus-visible{outline:3px solid var(--cyan,#67e8f9);outline-offset:3px}
.intro-skip svg{width:16px;height:16px}

/* Saída: a logo cresce um pouco enquanto a camada some. */
.intro.is-leaving .intro-brand{transform:scale(1.08)!important;transition:transform .6s cubic-bezier(.4,0,.2,1)}

/* Versão estática (prefers-reduced-motion): logo, frase e botão Entrar, sem movimento. */
.intro.is-static .intro-stage,.intro.is-static .intro-copy,.intro.is-static .intro-hint,.intro.is-static .intro-progress,.intro.is-static .intro-ring{display:none}
html.has-intro .intro.is-static,html.intro-leaving .intro.is-static{display:grid!important;place-content:center;justify-items:center;gap:34px;padding:24px}
.intro.is-static .intro-brand{position:relative;inset:auto;opacity:1!important;transform:none!important}
.intro.is-static .intro-skip{position:relative;top:auto;right:auto;min-height:48px;padding:12px 26px;border-color:transparent;background:var(--lime,#d4f542);color:#100a21;font-size:15px}
.intro.is-static .intro-skip:hover{background:#e2fb72}

@media(max-width:767px){
  .intro-stage{perspective:900px}
  .intro-eyebrow{font-size:10px;letter-spacing:.2em}
  .intro-skip{padding:10px 16px;font-size:12px}
  .intro-card-inner{border-radius:12px}
  .intro-card-inner>span{left:10px;bottom:9px;font-size:9px;letter-spacing:.18em}
}
@media(prefers-reduced-motion:reduce){.intro *,.intro{animation:none!important;transition:none!important}}

@media(max-width:700px){.intro-br{display:none}.intro-title{font-size:clamp(26px,7.6vw,40px);max-width:90vw}}