/* ==========================================================
   Gueda Visuals — Spatial Media Studio · v3
   Cada seção é uma prancha do Illustrator (1080×1920 retrato / 1920×1080 paisagem)
   escalada para cobrir a viewport. Coordenadas em px da prancha.
   ========================================================== */

:root{
  --crimson:#4E091D; --bg:#3E0006; --red:#FE3531; --cream:#F7EACD; --cream2:#F1EFEA; --white:#EAFFFF; --brown:#332017; --gold:#CF9561;
  --AW:1080; --AH:1920; --vh:100svh;
  /* --k/--ox/--oy: escala e deslocamento de COBERTURA — acompanham o recorte da mídia de fundo.
     --ka/--ax/--ay: escala e deslocamento da INTERFACE (arte, logo, menu, textos, botões).
     São iguais sempre que a prancha inteira couber; em telas mais quadradas (tablet, celular
     deitado) a interface encolhe o necessário para nada sair da área visível/segura,
     enquanto o fundo continua preenchendo a tela. Ver fit() em js/site.js. */
  --k:1; --ox:0px; --oy:0px; --ka:1; --ax:0px; --ay:0px;
  --tap:calc(48px / var(--ka));   /* 48 px reais convertidos para px da prancha (dentro de .art) */
  --fade:.45s;
}
@media (orientation: landscape){ :root{ --AW:1920; --AH:1080 } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--cream)}
body{font-family:"Integral CF",system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.oh{display:none!important}
@media (orientation: landscape){ .oh{display:block!important} .ov{display:none!important} }

/* ---------- prancha ---------- */
.stage{position:relative;height:100vh;height:var(--vh);overflow:hidden;background:var(--bg);isolation:isolate}
.bg,.stage>video.scrub,.stage>picture.rest{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
picture.bg img,picture.rest img{width:100%;height:100%;object-fit:cover}
.art{position:absolute;left:50%;top:50%;z-index:2;width:calc(var(--AW) * 1px);height:calc(var(--AH) * 1px);
  transform:translate(-50%,-50%) scale(var(--ka));transform-origin:50% 50%;pointer-events:none}
.art > *{pointer-events:auto}
/* Subcamada travada na mídia: o que precisa casar com um vídeo de fundo (a área clicável do
   archviz). Como .art já está em scale(--ka), escalar por --k/--ka em torno do centro da prancha
   devolve exatamente a posição do recorte "cover", sem sair da ordem de pintura do layout. */
.art .mlock{position:absolute;inset:0;pointer-events:none;transform:scale(calc(var(--k) / var(--ka)));transform-origin:50% 50%}
.art .mlock > *{pointer-events:auto}
/* Seções com foto (pranchas 10 e 11): a foto é desenhada na escala da ARTE, para o cartão e a
   arte de tela casarem com ela em qualquer tela. O que sobra nas beiradas recebe --edge, um
   gradiente amostrado na moldura da própria foto pelo gen.py — a parede continua sem emenda. */
.stage.fitbg{background-image:var(--edge)}
.stage > picture.bg.fit{position:absolute;inset:auto;left:50%;top:50%;z-index:1;
  width:calc(var(--AW) * 1px);height:calc(var(--AH) * 1px);
  transform:translate(-50%,-50%) scale(var(--ka));transform-origin:50% 50%}
.stage > picture.bg.fit img{width:100%;height:100%;object-fit:fill}
.txt{position:absolute;inset:0;pointer-events:none}
.txt h2,.txt p{margin:0;font-weight:inherit}
.txt .tlink{text-decoration:none;color:inherit} .txt .tlink .t{pointer-events:auto;cursor:pointer}
.vec{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* prancha 11: cartão cream + sombra projetada do "VAMOS" (a sombra fica sob o cartão, como no .ai) */
.card{position:absolute;background:var(--cream);pointer-events:none}
.vamos-shadow .t{color:transparent;text-shadow:3px 111px 34px rgba(0,0,0,.48)}
.t{position:absolute;white-space:pre;line-height:1;font-weight:400;font-kerning:normal}
.t.seg>span{position:absolute;top:0;white-space:pre}
.f-ib{font-family:"Integral CF";font-weight:700} .f-ir{font-family:"Integral CF";font-weight:400} .f-ix{font-family:"Integral CF";font-weight:800}
.f-ab{font-family:"Aeonik";font-weight:700} .f-ar{font-family:"Aeonik";font-weight:400} .f-ak{font-family:"Aeonik";font-weight:900}
.c-crimson{color:var(--crimson)} .c-red{color:var(--red)} .c-cream{color:var(--cream)} .c-cream2{color:var(--cream2)} .c-white{color:var(--white)} .c-brown{color:var(--brown)} .c-gold{color:var(--gold)}

/* ---------- topo: logo + menu ---------- */
.topbar{position:fixed;inset:0;z-index:50;pointer-events:none}
.topbar .logo{position:fixed;left:0;top:0;pointer-events:none;display:block;color:var(--ink,var(--crimson));transition:color var(--fade) ease}
.topbar .lg{position:fixed;pointer-events:auto;left:calc(var(--ax) + var(--lx) * var(--ka));top:calc(var(--ay) + var(--ly) * var(--ka));
  width:calc(var(--lw) * var(--ka));height:calc(var(--lh) * var(--ka));opacity:0;transition:opacity var(--fade) ease}
.topbar .lg svg{width:100%;height:100%}
body[data-logo="hero"] .lg.hero{opacity:1} body[data-logo="inner"] .lg.inner{opacity:1}
body[data-logo="contact"] .lg.contact{opacity:1}   /* prancha 11: lockup completo */
.menu-btn{position:fixed;pointer-events:auto;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink,var(--crimson));transition:color var(--fade) ease}
/* posição e medidas vêm do .ai, no <style> gerado por gen.py (--mbx/--mby/--mbw/--mbh/--mbs/--mbt) */
.menu-btn{left:calc(var(--ax) + var(--mbx) * var(--ka));top:calc(var(--ay) + var(--mby) * var(--ka));
  width:calc(var(--mbw) * var(--ka));height:calc(var(--mbh) * var(--ka))}
.menu-btn span{display:block;height:calc(var(--mbs) * var(--ka));min-height:2px;background:currentColor;transition:transform .3s ease,opacity .3s ease}
/* alvo de toque de no mínimo 48×48 sem mexer no tamanho do ícone desenhado */
.menu-btn::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(48px,calc(100% + 24px));height:max(48px,calc(100% + 24px))}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(calc(var(--mbt) * var(--ka))) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(calc(var(--mbt) * var(--ka) * -1)) rotate(-45deg)}
/* tinta por seção (conforme .ai) */
body[data-ink="hero"]{--ink:var(--red);--hint:var(--red)}
body[data-ink="crimson"]{--ink:var(--crimson);--hint:var(--crimson)}
body[data-ink="cream"]{--ink:var(--cream);--hint:var(--cream)}
body[data-ink="red"]{--ink:var(--red);--hint:var(--red)}
@media (orientation: landscape){ body[data-ink="red"]{--hint:#EDE6D6} }
body[data-ink="contact"]{--ink:var(--cream)}
body.menu-open .topbar .logo,body.menu-open .menu-btn{color:var(--red)}

/* ---------- menu (discreto: começa abaixo do logo, alinhado a ele) ---------- */
.menu{position:fixed;inset:0;z-index:40;background:var(--bg);color:var(--red);display:flex;flex-direction:column;justify-content:flex-start;
  padding:max(env(safe-area-inset-top),calc(var(--ay) + 250px * var(--ka))) 6vw max(4vh,env(safe-area-inset-bottom)) max(16px,calc(var(--ax) + 139px * var(--ka)));
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
@media (orientation: landscape){ .menu{padding-top:max(env(safe-area-inset-top),calc(var(--ay) + 240px * var(--ka)));padding-left:max(16px,calc(var(--ax) + 237px * var(--ka)))} }
.menu:not([hidden]){opacity:1;visibility:visible;transition:opacity .35s ease}
.menu[hidden]{display:flex}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(.35rem,1.4vh,.8rem)}
.menu ul a{font-family:"Integral CF";font-weight:400;text-decoration:none;font-size:clamp(.95rem,2.6vh,1.35rem);letter-spacing:.02em;line-height:1.1;display:inline-block;
  transform:translateX(-10px);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s ease,color .2s}
@media (orientation: landscape){ .menu ul a{font-size:clamp(1rem,3.4vh,1.6rem)} }
.menu:not([hidden]) ul a{transform:none;opacity:1}
.menu li a{transition-delay:calc(.035s * var(--i,0))}
.menu ul a:hover,.menu ul a:focus-visible{color:var(--cream);outline:none}
.menu-foot{font-family:"Integral CF";font-weight:700;font-size:clamp(.65rem,1.5vh,.85rem);letter-spacing:.02em;line-height:1.7;color:var(--cream);margin:auto 0 0;opacity:.8}
.menu-foot a{text-decoration:none} .menu-foot a:hover{opacity:1}

/* ---------- cenas de scroll ---------- */
.scene{position:relative;height:calc(var(--vh) * var(--runway,2.5))}
.scene .stage.sticky{position:sticky;top:0}
.scene .stage>video.scrub{z-index:1;opacity:0;transition:opacity .3s}
.scene .stage>video.scrub.ready{opacity:1}
.scene .stage>picture.rest{z-index:0;opacity:0}
.scene.static .stage>picture.rest{opacity:1}          /* sem scrub: mostra o estado final */
.scene.static .stage>video.scrub{display:none}
.scene.static .fade-in,.scene.static .hero-ui{opacity:1!important}
.scene.hero.static .stage.a>picture.rest{opacity:0}
.scene.hero.static .stage.a>video.scrub{display:block;opacity:1}
.scene.static{height:auto} .scene.static .stage.sticky{position:relative}
.scene.one .art .fade-in{opacity:var(--pt,1)}
.scene.one .art .play.fade-in{pointer-events:auto}
/* hero e cenas "two" (duas pranchas fixas na mesma cena, crossfade por --p2): mesmo mecanismo */
.scene.hero .stage.b,.scene.two .stage.b{margin-top:calc(var(--vh) * -1);background:transparent;pointer-events:none}
.scene.hero .stage.b .art,.scene.two .stage.b .art{opacity:var(--p2,0)}
.scene.hero .stage.b .art>*,.scene.two .stage.b .art>*{pointer-events:auto}
.scene.hero.static .stage.b,.scene.two.static .stage.b{margin-top:0;background:var(--bg);pointer-events:auto}
.scene.hero.static .stage.b .art,.scene.two.static .stage.b .art{opacity:1}
/* o content:"" das duas camadas de fallback estático fica aqui; a imagem vem do <style> gerado
   pelo gen.py (precisa do selo de versão da mídia) */
.scene.hero.static .stage.b::before,.scene.two.static .stage.b::before{content:"";position:absolute;inset:0}
.hero-ui{opacity:var(--ph,1)}

/* ---------- vídeos em dispositivo, imagens de tela ---------- */
.screenart{position:absolute;object-fit:cover}
.hit{position:absolute;display:block;background:transparent;border:0;cursor:pointer}
.hit:focus-visible{outline:3px solid var(--red);outline-offset:-3px}

/* ---------- play (SVG com os paths do layout) ---------- */
.play{position:absolute;display:block}
.play svg{width:100%;height:100%;overflow:visible}
.play::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(var(--tap),calc(100% + 36px));height:max(var(--tap),calc(100% + 36px))}
@media (hover:hover){ .play{transition:transform .25s ease} .play:hover{transform:scale(1.06)} }
.play:focus-visible{outline:3px solid var(--red);outline-offset:6px;border-radius:50%}

/* ---------- indicador de scroll ---------- */
.scroll-hint{position:fixed;inset:0;z-index:30;pointer-events:none;color:var(--hint,var(--crimson));transition:opacity .35s,color var(--fade)}
.scroll-hint>span{position:fixed;left:calc(var(--ax) + var(--hx) * var(--ka));top:calc(var(--ay) + var(--hy) * var(--ka));line-height:1;white-space:pre;transform-origin:0 0;transform:scale(var(--ka))}
.scroll-hint>.arrow{width:var(--hw);transform:scale(var(--ka));animation:hint 1.8s ease-in-out infinite}
.scroll-hint>.arrow svg{width:100%;height:auto}
@keyframes hint{0%,100%{transform:scale(var(--ka)) translateY(0)}50%{transform:scale(var(--ka)) translateY(24%)}}
@media (prefers-reduced-motion: reduce){ .scroll-hint>.arrow{animation:none} }
/* retrato: hero com SCROLL grande (prancha 1), internas com o pequeno (pranchas 2+) */
.scroll-hint>.hh,.scroll-hint>.hi{opacity:0;transition:opacity var(--fade)}
body[data-logo="hero"] .scroll-hint>.hh{opacity:1} body[data-logo="inner"] .scroll-hint>.hi{opacity:1}
body[data-ink="contact"] .scroll-hint,body.menu-open .scroll-hint,body.modal-open .scroll-hint{opacity:0}

/* ---------- parceiros (prancha 10) ---------- */
.partners,.marquee{position:absolute}
.partners img,.partners span,.marquee img,.marquee span{position:absolute;display:block}
.partners span svg,.marquee span svg{width:100%;height:100%}
/* letreiro (paisagem): fita duplicada rolando para a esquerda, mascarada nas bordas do box */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
.marquee .strip{position:absolute;inset:0;width:calc(var(--period) * 2);animation:marquee 52s linear infinite;will-change:transform}
.marquee .set{position:absolute;top:0;left:0;width:var(--period);height:100%}
@keyframes marquee{to{transform:translate3d(calc(var(--period) * -1),0,0)}}
@media (hover:hover){ .marquee:hover .strip{animation-play-state:paused} }
@media (prefers-reduced-motion: reduce){ .marquee .strip{animation:none} }

/* ---------- contato ---------- */
.social{position:absolute;width:210px;height:40px}
.social a{position:absolute;display:block}
.social a svg{width:100%;height:100%}
.social a:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.totop{position:absolute;inset:0;pointer-events:none;text-decoration:none}
.totop>*{pointer-events:auto}
.totop .arrow{position:absolute;width:31.6px;height:36.1px;color:inherit}
/* alvos de toque de 48px nos ícones pequenos (o desenho continua do tamanho do .ai) */
.social a::before,.totop .arrow::before,.txt .tlink .t::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:max(var(--tap),100%);height:max(var(--tap),100%)}
.txt .tlink .t{position:absolute}
.totop .arrow svg{width:100%;height:100%}
.totop .t{cursor:pointer}
.totop:hover .arrow{transform:translateY(-4px)} .totop .arrow{transition:transform .25s}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(24,3,8,.94);display:grid;place-items:center;padding:4vw;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.modal:not([hidden]){opacity:1;visibility:visible;transition:opacity .3s}
.modal[hidden]{display:grid}
.modal-frame{width:min(100%,calc((var(--vh) - 8vw) * 16 / 9));aspect-ratio:16/9;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.modal-frame.vert{width:min(100%,calc((var(--vh) - 8vw) * 9 / 16));aspect-ratio:9/16}   /* Shorts */
.modal-frame iframe,.modal-frame video{width:100%;height:100%;border:0;display:block;background:#000}
.modal-frame .placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;text-align:center;color:var(--cream);font-family:system-ui,sans-serif;font-size:clamp(.85rem,2.4vw,1.05rem);padding:2rem;line-height:1.5}
.modal-frame .placeholder b{font-weight:600}
.modal-frame .placeholder code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:rgba(247,234,205,.12);padding:.1em .4em;border-radius:4px}
.modal-frame .placeholder .hint{font-size:.85em;opacity:.7;max-width:36em}
.modal-frame .placeholder .yt-out{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:600;
  padding:.7em 1.4em;border-radius:999px;transition:transform .2s}
.modal-frame .placeholder .yt-out:hover{transform:scale(1.04)}
.modal-close{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:48px;height:48px;font-size:34px;line-height:1;color:var(--cream);font-family:system-ui,sans-serif}
.modal-close:focus-visible{outline:2px solid var(--red);border-radius:50%}
body.modal-open,body.menu-open{overflow:hidden}

:focus-visible{outline:3px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important} }