/* ELLEVA Sistema · camada de movimento (07/10/2026)
   Só vale com html.motion-boot ou html.motion-gsap, que o motion.js liga quando o GSAP carregou e a pessoa
   não pediu movimento reduzido. Sem isso, nada daqui se aplica e a página fica como era. */

/* Fundo escuro atrás das seções: é o que aparece quando uma seção recua, encolhe ou abre por máscara. */
.motion-boot body,.motion-gsap body{background:#0b0b0a}
.motion-gsap,.motion-gsap body{overflow-x:clip}
.motion-gsap{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Antes do motor assumir, nada do hero pisca. Se o motor não chegar em 4 s, o script do head desliga isto. */
.motion-boot .hero-copy>*,.motion-boot .hero-showcase,.motion-boot .hero-bottom,.motion-boot .topbar-inner>*{visibility:hidden}
.motion-boot[data-abertura=completa] main>section:not(.hero),.motion-boot[data-abertura=completa] footer,
.abertura-ativa main>section:not(.hero),.abertura-ativa footer{visibility:hidden}

/* ---------------------------------------------------------------- abertura */
.abertura{position:fixed;inset:0;z-index:80;pointer-events:none}
.abertura__veu{position:absolute;left:0;right:0;bottom:0;top:var(--fim-hero,100%);background:linear-gradient(180deg,#101010,#0b0b0a 40%)}
.abertura__marca{position:fixed;left:0;top:0;width:var(--marca-w,640px);aspect-ratio:1800/720;transform-origin:0 0;will-change:transform,filter}
.abertura__marca svg{display:block;width:100%;height:100%;overflow:visible}
.abertura__pular{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,28px);pointer-events:auto;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:rgba(245,242,236,.08);color:rgba(245,242,236,.72);font:500 11px/1 var(--body);letter-spacing:.14em;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.abertura__pular:hover,.abertura__pular:focus-visible{background:rgba(245,242,236,.16);color:#f5f2ec}

/* ---------------------------------------------------------------- atmosfera do hero */
.motion-gsap .hero-grid,.motion-gsap .hero-bottom{position:relative;z-index:2}
.hero-atmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-atmos canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-luz{position:absolute;left:66%;top:-18%;width:min(78vw,1100px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(212,175,55,.17),rgba(212,175,55,.06) 52%,transparent 100%);will-change:transform,opacity}
.hero-grao{position:absolute;inset:-60px;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");animation:grao 1s steps(6) infinite}
@keyframes grao{0%{transform:translate(0,0)}17%{transform:translate(-22px,14px)}33%{transform:translate(18px,-26px)}50%{transform:translate(-12px,-8px)}67%{transform:translate(26px,20px)}83%{transform:translate(-30px,6px)}100%{transform:translate(0,0)}}

/* ---------------------------------------------------------------- tela do hero em camadas reais */
.motion-gsap .hero-showcase{perspective:1600px;perspective-origin:50% 40%}
.motion-gsap .hero-screen{transform:none!important;transition:none!important;transform-style:flat}
.hero-giro,.hero-palco{position:relative;transform-style:preserve-3d}
.hero-palco{will-change:transform}
.hero-camada{position:absolute;margin:0;background-repeat:no-repeat;background-size:100% 100%;border-radius:calc(var(--k,.45) * var(--r,10) * 1px);box-shadow:0 calc(var(--k,.45) * 26px) calc(var(--k,.45) * 54px) rgba(0,0,0,.5),0 calc(var(--k,.45) * 6px) calc(var(--k,.45) * 14px) rgba(0,0,0,.35);pointer-events:none;backface-visibility:hidden;will-change:transform}
.hero-reflexo{position:absolute;inset:0;border-radius:18px;overflow:hidden;pointer-events:none}
.hero-reflexo i{position:absolute;top:-30%;bottom:-30%;left:0;width:28%;background:linear-gradient(90deg,transparent,rgba(245,242,236,.16) 45%,rgba(245,242,236,.22) 50%,rgba(245,242,236,.16) 55%,transparent);transform:translateX(-160%) skewX(-17.1deg)}

/* brilho único do botão dourado, no ângulo da ponta do E */
.motion-gsap .button-gold{position:relative;isolation:isolate}
.brilho{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1}
.brilho i{position:absolute;top:-40%;bottom:-40%;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);transform:translateX(-140%) skewX(-17.1deg)}

/* ---------------------------------------------------------------- passagens entre seções */
.veu-passagem{position:absolute;inset:0;z-index:30;background:#050505;opacity:0;pointer-events:none}
/* sem will-change fixo nas telas: o GSAP promove a camada só durante o movimento (menos memória de GPU) */
/* a máscara de linha corta a perna do g e do ç: folga embaixo, devolvida na margem */
.motion-gsap .linha-mascara-mask{padding-bottom:.14em;margin-bottom:-.14em}
/* rótulo em flex espalharia as letras separadas pelo gap */
.motion-gsap .eyebrow{display:block}

@media(prefers-reduced-motion:reduce){.abertura,.hero-atmos,.brilho,.hero-reflexo,.hero-camada,.veu-passagem{display:none!important}}
.hero-encaixe{position:absolute;border-radius:calc(var(--k,.45) * var(--r,10) * 1px);background:rgba(6,6,5,.9);box-shadow:inset 0 0 calc(var(--k,.45) * 18px) rgba(0,0,0,.6);pointer-events:none}

/* ---------------------------------------------------------------- empilhamento por sticky (07/10/2026)
   A seção que sai gruda e a próxima passa por cima. Mais baixa que a tela: gruda no topo, sob a barra.
   Mais alta: gruda pelo pé, quando o fim dela encosta no fim da tela. O ScrollTrigger mede com a pilha solta. */
.motion-gsap .pilha{position:sticky;top:min(var(--tb,92px),calc(100vh - var(--h,100vh)))}
@supports (height:100svh){.motion-gsap .pilha{top:min(var(--tb,92px),calc(100svh - var(--h,100svh)))}}
.motion-gsap.pilha-solta .pilha{position:relative;top:auto}
/* sticky não funciona sob overflow:hidden; clip recorta igual sem virar área de rolagem */
.motion-gsap .device-showcase--mobile{overflow:clip}

/* ---------------------------------------------------------------- carrosséis 3D do celular */
.galeria{position:relative}
.galeria-janela{position:sticky;top:var(--tb,76px);width:100vw;margin-left:calc(50% - 50vw);height:calc(100vh - var(--tb,76px));display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3.4vh,30px);overflow:clip}
@supports (height:100svh){.galeria-janela{height:calc(100svh - var(--tb,76px))}}
.galeria-janela .device-showcase__heading{margin:0!important;padding:0 18px}
.motion-gsap .galeria-trilho{display:flex!important;flex-wrap:nowrap;align-items:flex-start;gap:0!important;width:max-content!important;max-width:none!important;margin:0!important;grid-template-columns:none!important}
.galeria--fones{--fw:min(56vw,calc((100svh - var(--tb,76px) - 230px) * .46))}
.galeria--fones .galeria-trilho{padding:0 calc(50vw - 3vw - var(--fw) / 2)}
.galeria--fones .galeria-trilho>*{flex:0 0 var(--fw);width:var(--fw);margin:0 3vw!important}
.galeria--telas{--tw:84vw}
.galeria--telas .galeria-trilho{padding:0 calc(50vw - 3vw - var(--tw) / 2)}
.galeria--telas .galeria-trilho>*{flex:0 0 var(--tw);width:var(--tw);margin:0 3vw!important}
.galeria-trilho figcaption{text-align:center}

/* ---------------------------------------------------------------- economia no celular */
@media(max-width:760px){
  .hero-grao{display:none}
  .motion-gsap .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(17,17,17,.97)}
  .hero-camada{box-shadow:0 calc(var(--k,.3) * 22px) calc(var(--k,.3) * 34px) rgba(0,0,0,.5)}
  .hero-luz{width:150vw;left:70%;top:-10%}
}