/* ===== Cena de abertura: o scroll conduz a animação =====
   "O Brasil complica" (S solto, girado, campo de S desalinhado)
   -> "O SAN resolve" (S montado, campo alinhado, fundo azul)
   As variáveis são atualizadas por app.js. Valores padrão = estado final. */

.stage {
  --asm: 1;    /* S montado (0 solto, 1 montado) */
  --field: 1;  /* campo de S alinhado */
  --bg: 1;     /* fundo azul (0 gelo, 1 azul) */
  --b: 1;      /* "O SAN RESOLVE." visível */
  --cta: 1;
  --hint: 0;
  --zoom: 1;
  position: relative;
  background: var(--ice);
}
.stage__sticky {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ice-3);
  padding: 150px 0 150px;
}
.js-stage .stage { height: 300vh; }
.js-stage .stage__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; min-height: 640px;
  padding: 76px 0 0;
  display: flex; align-items: center;
}

.stage__bg { position: absolute; inset: 0; z-index: -4; background: var(--blue); opacity: var(--bg); }

/* Campo de S (padronagem do manual): cada S gira até se alinhar, em onda */
.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none;
  color: color-mix(in srgb, var(--ice) calc(var(--bg) * 100%), var(--blue));
  opacity: calc(.11 + var(--bg) * .05); }
.fs { fill: currentColor; transform-box: fill-box; transform-origin: center;
  --t: clamp(0, calc(var(--field) * 1.7 - var(--k)), 1);
  transform: rotate(calc((1 - var(--t)) * var(--r))); }

/* Formas em quadrante (motivo do manual) */
.stage__shape { position: absolute; z-index: -2; opacity: var(--bg); }

.stage__grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; }

/* Texto: segue o manual ("O Brasil complica." normal / "O SAN RESOLVE." negrito caixa alta) */
.tagline { font-weight: 300; font-size: 19px; margin-bottom: 22px; color: color-mix(in srgb, #fff calc(var(--bg) * 100%), var(--navy)); }
.headline { font-size: clamp(30px, 4vw, 58px); line-height: 1.08; letter-spacing: -.025em; }
.headline .top { display: block; white-space: nowrap; font-weight: 400; color: color-mix(in srgb, #fff calc(var(--bg) * 100%), var(--navy)); }
.headline .bottom { display: block; white-space: nowrap; font-weight: 700; text-transform: uppercase; color: #fff; opacity: var(--b); transform: translateY(calc((1 - var(--b)) * 36px)); }
.sub { margin-top: 26px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 300; max-width: 30ch; color: #fff; min-height: 3.2em; opacity: var(--b); transform: translateY(calc((1 - var(--b)) * 20px)); }
.stage__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; opacity: var(--cta); transform: translateY(calc((1 - var(--cta)) * 18px)); pointer-events: none; }
.cta-on .stage__cta { pointer-events: auto; }
.stage__foot { margin-top: 34px; font-family: var(--mono); font-size: 16px; color: rgb(255 255 255 / .9); opacity: var(--cta); }
.stage__foot b { font-weight: 700; color: #fff; }
.stage__foot .u { color: rgb(255 255 255 / .75); }
.stage__foot .u b { font-weight: 700; }

/* S que se monta dentro do ícone navy (como o ícone de app do manual).
   Medidas conferidas contra o ícone do designer: quadrado perfeito, S centralizado (o centro do S está em 500,500 do desenho e a caixa
   do desenho é centrada ali) e ocupando cerca de 64% do quadrado. Antes a caixa era mais curta que o S e a ponta de baixo ficava rente à borda. */
.stage__art { position: relative; justify-self: center; width: min(100%, 300px, 36vh); aspect-ratio: 1; transform: scale(calc(.94 + var(--zoom) * .08)); }
.plate { position: absolute; inset: -36%; border-radius: 22.5%; background: var(--navy); opacity: var(--bg); transform: scale(calc(.82 + var(--bg) * .18)); box-shadow: 0 36px 70px rgb(1 19 54 / .32); }
.s-mark { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 22px 34px rgb(1 19 54 / calc(.12 + var(--bg) * .25))); }
.piece { transform-box: fill-box; transform-origin: center; opacity: calc(.5 + var(--asm) * .5); }
.piece--top { transform: translate(calc((1 - var(--asm)) * -150px), calc((1 - var(--asm)) * -150px)) rotate(calc((1 - var(--asm)) * -42deg)); }
.piece--mid { transform: translate(calc((1 - var(--asm)) * 170px), calc((1 - var(--asm)) * -30px)) rotate(calc((1 - var(--asm)) * 34deg)); }
.piece--bot { transform: translate(calc((1 - var(--asm)) * -140px), calc((1 - var(--asm)) * 170px)) rotate(calc((1 - var(--asm)) * 46deg)); }
.bob { animation: bob 5.5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.bob:nth-child(2) { animation-duration: 6.4s; animation-delay: -1.6s; }
.bob:nth-child(3) { animation-duration: 7.2s; animation-delay: -3.1s; }
@keyframes bob { from { transform: translateY(-7px) rotate(-1.2deg); } to { transform: translateY(7px) rotate(1.2deg); } }

/* Dica de rolagem */
.scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 500; font-size: 13px; color: var(--navy); opacity: var(--hint); pointer-events: none; }
.scroll-hint i { width: 22px; height: 36px; border: 2px solid var(--navy); border-radius: 12px; position: relative; display: block; }
.scroll-hint i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--blue); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70%, 100% { transform: translateY(12px); opacity: 0; } }
.stage:not(.is-live) .scroll-hint { display: none; }

/* Cabeçalho muda para navy quando a cena fica azul */
.header { transition: background .35s ease, border-color .35s ease; }
.header__logo img { transition: opacity .35s ease; }
.header__logo .l-dark { position: absolute; left: 0; top: 0; opacity: 0; }
.nav__btn, .header__login, .header .btn--primary, .menu-toggle, .menu-toggle span { transition: color .35s ease, background .35s ease, border-color .35s ease; }
.header--dark { background: rgb(1 19 54 / .92); border-color: rgb(255 255 255 / .12); }
.header--dark .l-light { opacity: 0; }
.header--dark .l-dark { opacity: 1; }
.header--dark .nav__btn, .header--dark .header__login { color: #fff; }
.header--dark .nav__btn:hover, .header--dark .nav__item.open > .nav__btn, .header--dark .header__login:hover { background: rgb(255 255 255 / .12); }
.header--dark .btn--primary { background: #fff; color: var(--blue); }
.header--dark .menu-toggle { background: transparent; border-color: rgb(255 255 255 / .3); }
.header--dark .menu-toggle span { background: #fff; }

/* Faixa em movimento */
.ticker { background: var(--ice); color: var(--navy); overflow: hidden; }
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker__track span { font-family: var(--font-text); font-weight: 700; font-size: 16px; padding: 20px 30px; white-space: nowrap; color: var(--navy); display: inline-flex; align-items: center; gap: 28px; }
.ticker__track span::after { content: ""; width: 10px; height: 6px; border-radius: 2px; background: var(--blue); transform: skewX(-20deg); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Modo de pré-visualização (?menu=): sem transições, só para tirar prints */
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }

/* Entrada suave dos elementos ao rolar */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 1020px) {
  .stage__grid { grid-template-columns: 1fr; gap: 8px; }
  .js-stage .stage { height: 280vh; }
  .js-stage .stage__sticky { align-items: flex-start; padding-top: 92px; }
  .headline { font-size: clamp(34px, 10vw, 56px); }
  .tagline { margin-bottom: 12px; font-size: 16px; }
  .sub { margin-top: 12px; font-size: 17px; min-height: 2.8em; }
  .stage__cta { margin-top: 16px; }
  .stage__foot { display: none; }
  /* O quadrado navy sai 30% para fora da caixa do S (inset -30%): a margem de cima e de baixo tem que cobrir isso, senão ele passa por cima dos botões */
  .stage__art { width: min(34vw, 19vh); margin: calc(min(34vw, 19vh) * .30 + 30px) auto calc(min(34vw, 19vh) * .30 + 24px); }
  .plate { inset: -30%; }
  .stage__cta .btn { flex: 1 1 auto; }
  .cards { margin-top: -60px; padding-bottom: 70px; background: linear-gradient(180deg, transparent 0, transparent 60px, var(--blue) 60px, var(--navy) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .bob, .ticker__track, .scroll-hint i::after { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}