/* =========================================================================
   GSITE — camada "uau": abertura, páginas que abrem e fecham, faixa em
   movimento, projeto em tela cheia, cursor e botões magnéticos.
   Tudo some com prefers-reduced-motion.
   ========================================================================= */
:root{--curva:cubic-bezier(.76,0,.24,1)}

/* ---------- abertura ---------- */
#intro{display:none}
.intro-on #intro{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;pointer-events:auto}
.intro-on body{overflow:hidden}
.in-a,.in-b{position:absolute;left:0;right:0;height:50.5%;background:#020812}
.in-a{top:0;animation:inA .8s var(--curva) 1s forwards}
.in-b{bottom:0;animation:inB .8s var(--curva) 1s forwards}
.in-c{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;animation:some .3s ease .85s forwards}
.in-c svg{width:clamp(64px,9vw,96px);height:auto;fill:none;filter:drop-shadow(0 0 14px rgba(49,212,255,.55))}
.in-g{stroke:#fff;stroke-width:11;stroke-dasharray:160;stroke-dashoffset:160;animation:traca .7s var(--curva) .05s forwards}
.in-v{stroke:#31d4ff;stroke-width:5;stroke-linecap:round;stroke-dasharray:12;stroke-dashoffset:12;animation:traca .35s var(--curva) .5s forwards}
.in-nome{display:flex;justify-content:center;gap:.06em;margin-top:18px;font-weight:800;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:.14em;color:#f1f6ff;overflow:hidden;line-height:1.15}
.in-nome span{display:inline-block;transform:translateY(110%);animation:sobe .55s var(--ease) forwards}
.in-nome span:nth-child(1){animation-delay:.25s}.in-nome span:nth-child(2){animation-delay:.3s}.in-nome span:nth-child(3){animation-delay:.35s}.in-nome span:nth-child(4){animation-delay:.4s}.in-nome span:nth-child(5){animation-delay:.45s}
.in-sub{margin-top:6px;font-size:.78rem;letter-spacing:.42em;text-transform:uppercase;color:#7fdcff;opacity:0;animation:aparece .45s ease .5s forwards}
.in-linha{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,#31d4ff 20%,#bff3ff 50%,#31d4ff 80%,transparent);box-shadow:0 0 24px 4px rgba(49,212,255,.55);transform:scaleX(0);animation:linha .45s var(--curva) .6s forwards,some .4s ease 1.15s forwards}
#in-pular{position:absolute;right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));min-height:44px;padding:8px 16px;border:1px solid rgba(120,170,235,.4);border-radius:8px;color:#b2c5de;font-size:.85rem;animation:some .3s ease .95s forwards}
@keyframes traca{to{stroke-dashoffset:0}}
@keyframes sobe{to{transform:none}}
@keyframes aparece{to{opacity:1}}
@keyframes some{to{opacity:0;visibility:hidden}}
@keyframes linha{to{transform:scaleX(1)}}
@keyframes inA{to{transform:translateY(-101%)}}
@keyframes inB{to{transform:translateY(101%)}}

/* ---------- entrada do topo (só com JS) ---------- */
.js .hero h1 .ln{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.js .hero h1 .ln>span{display:inline-block;transform:translateY(108%);transition:transform 1.1s var(--ease)}
.entrou .hero h1 .ln>span{transform:none}
.js .hero [data-e]{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform 1s var(--ease)}
.entrou .hero [data-e]{opacity:1;transform:none}
.js .hero .vitrine{opacity:0;transform:perspective(1400px) rotateX(22deg) translateY(70px) scale(.9);transition:opacity 1.2s ease .35s,transform 1.5s var(--ease) .35s}
.entrou .hero .vitrine{opacity:1;transform:none}
.pronto .hero .vitrine{transition:none}
.hero h1 .hl{text-shadow:0 0 42px rgba(49,212,255,.35)}

/* ---------- seções como páginas que abrem e fecham ---------- */
.pagina{position:relative;margin:clamp(10px,1.4vw,18px) clamp(6px,1.4vw,18px) 0;border:1px solid var(--bd);border-radius:clamp(18px,2.4vw,32px);transform-origin:50% 0;overflow:hidden}
#servicos.pagina,#processo.pagina{background:#041021}
.c3d-on #servicos.pagina,.c3d-on #processo.pagina{background:rgba(4,16,33,.8)}
.pagina:before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(49,212,255,.7),transparent);opacity:.8}

/* ---------- faixa em movimento ---------- */
.faixa{overflow:hidden;padding:clamp(40px,6vw,80px) 0;display:grid;gap:4px;-webkit-user-select:none;user-select:none}
.faixa p{display:flex;align-items:center;gap:.5em;width:max-content;white-space:nowrap;font-weight:800;font-size:clamp(2.6rem,7.5vw,7rem);line-height:1.08;letter-spacing:-.03em;color:var(--tx);will-change:transform}
.faixa span{color:transparent;-webkit-text-stroke:1.5px rgba(49,212,255,.65)}
.faixa i{font-style:normal;font-size:.4em;color:var(--ciano)}
.faixa .fx-b{font-size:clamp(1.6rem,4vw,3.4rem);color:var(--mu)}
.faixa .fx-b span{-webkit-text-stroke:1px rgba(178,197,222,.5)}

/* ---------- etapas do processo abrem como páginas de um livro ---------- */
.st.rv{transform:perspective(1100px) rotateY(-62deg);transform-origin:0 50%;transition:opacity .7s ease,transform 1.1s var(--ease)}
.st.rv.in{transform:none}
.steps .st:nth-child(2){transition-delay:.12s}.steps .st:nth-child(3){transition-delay:.24s}.steps .st:nth-child(4){transition-delay:.36s}
.cta-box.rv{transform:perspective(1200px) rotateX(-24deg) scale(.92);transform-origin:50% 0}
.cta-box.rv.in{transform:none}

/* ---------- projeto em tela cheia ---------- */
dialog.caso{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:radial-gradient(ellipse 80% 50% at 50% 0,rgba(10,111,224,.22),transparent 70%),#030b19;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
dialog.caso::backdrop{background:transparent}
.caso-in{max-width:1180px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) var(--lado) calc(40px + env(safe-area-inset-bottom));transition:opacity .35s ease,transform .45s var(--ease)}
.caso-in.sai{opacity:0;transform:translateX(-40px)}
.caso-top{display:flex;align-items:center;min-height:48px;padding:12px 120px 12px 0;margin-bottom:clamp(16px,4vh,48px)}
#dx{position:fixed;z-index:3;top:calc(16px + env(safe-area-inset-top));right:calc(var(--lado) + env(safe-area-inset-right));background:rgba(3,11,25,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#dk{color:var(--ciano);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin:0}
#dt{font-size:clamp(2.6rem,8vw,6.2rem);line-height:.98;letter-spacing:-.04em;margin:0 0 18px}
#dtx{font-size:clamp(1.02rem,1.5vw,1.3rem);max-width:720px}
.caso-pc{margin:clamp(28px,5vh,56px) 0 clamp(20px,3vw,32px);border:1px solid var(--bd2);border-radius:14px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 60px rgba(49,212,255,.12)}
.caso-pc #dimg{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border:0;border-radius:0;margin:0}
.caso-grid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
.caso-cel{max-width:300px;justify-self:center;border:6px solid #12264a;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.caso-cel img{width:100%;aspect-ratio:9/18.5;object-fit:cover;object-position:top}
.caso-tx h3{font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:6px}
.caso #dli{margin:14px 0 28px;font-size:1rem}
.caso-prox{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 18px;width:100%;margin-top:clamp(40px,8vh,90px);padding:clamp(24px,4vw,40px) 0 0;border-top:1px solid var(--bd);text-align:left}
.caso-prox small{grid-column:1;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}
.caso-prox b{grid-column:1;font-size:clamp(2rem,6vw,4.4rem);line-height:1;letter-spacing:-.04em;transition:color .3s}
.caso-prox>span{grid-column:2;grid-row:1/3;font-size:clamp(2rem,5vw,3.6rem);color:var(--ciano);transition:transform .4s var(--ease)}
.caso-prox:hover b{color:var(--ciano)}
.caso-prox:hover>span{transform:translateX(10px)}
/* título e tela já aparecem enquanto a página abre; o resto sobe depois */
#dtx,.caso-grid,.caso-prox{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .8s var(--ease)}
.caso.vivo #dtx,.caso.vivo .caso-grid,.caso.vivo .caso-prox{opacity:1;transform:none}
.caso.vivo .caso-grid{transition-delay:.1s}.caso.vivo .caso-prox{transition-delay:.2s}
.caso-pc img{transform:scale(1.08);transition:transform 1.4s var(--ease)}
.caso.vivo .caso-pc img{transform:none}

/* ---------- cursor e botões magnéticos (mouse) ---------- */
#cursor{position:fixed;top:0;left:0;z-index:250;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(49,212,255,.75);border-radius:50%;pointer-events:none;display:grid;place-items:center;font-size:.72rem;font-weight:800;letter-spacing:.06em;color:#03142b;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s,opacity .3s;opacity:0}
#cursor.on{opacity:1}
#cursor.link{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(49,212,255,.12)}
#cursor.ver{width:86px;height:86px;margin:-43px 0 0 -43px;background:#31d4ff;border-color:#31d4ff}
#cursor b{opacity:0;transition:opacity .2s}
#cursor.ver b{opacity:1}

/* ---------- menu do celular em tela cheia, abrindo de cima ---------- */
@media(max-width:960px){
  #menu{top:0;height:100vh;height:100dvh;max-height:none;padding-top:calc(96px + env(safe-area-inset-top));opacity:1;visibility:hidden;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--curva),visibility 0s .6s}
  #menu.aberto{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .6s var(--curva)}
  #menu li a{font-size:clamp(1.6rem,7vw,2.3rem);font-weight:800;letter-spacing:-.02em;min-height:64px}
  #menu li,#menu .btn{opacity:0;transform:translateY(28px);transition:opacity .4s ease,transform .6s var(--ease)}
  #menu.aberto li,#menu.aberto .btn{opacity:1;transform:none}
  #menu.aberto li:nth-child(1){transition-delay:.18s}#menu.aberto li:nth-child(2){transition-delay:.23s}#menu.aberto li:nth-child(3){transition-delay:.28s}#menu.aberto li:nth-child(4){transition-delay:.33s}#menu.aberto li:nth-child(5){transition-delay:.38s}#menu.aberto .btn{transition-delay:.45s}
}
@media(max-height:500px) and (orientation:landscape) and (max-width:960px){
  #menu{padding-top:64px}
  #menu li a{font-size:1.3rem;min-height:48px}
}

@media(max-width:860px){
  .caso-grid{grid-template-columns:minmax(0,1fr)}
  .caso-cel{max-width:220px}
}
@media(max-width:600px){
  .caso .d-ac .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  #intro{display:none!important}
  .js .hero h1 .ln>span,.js .hero [data-e],.js .hero .vitrine{opacity:1;transform:none}
  .st.rv,.cta-box.rv{transform:none}
  #dtx,.caso-grid,.caso-prox,.caso-pc img{opacity:1;transform:none}
  #cursor{display:none}
  #menu li,#menu .btn{opacity:1;transform:none}
}