/* Jornada do céu ao subsolo: tokens, camadas e peças comuns às cenas (ROTEIRO.md §5).
   Cada cena tem o próprio CSS; aqui só o que é compartilhado. */

:root{
  /* Céu (tarde é o padrão; manhã e noite redefinem abaixo) */
  --ceu-topo:#353fc1;--ceu-base:#7d87ea;--nuvem:#f1f3fa;--nuvem-sombra:#c9cfea;--sol:#ffe065;
  /* Superfície: céu baixo atrás do hero, logo abaixo das nuvens */
  --superficie-topo:#5f6ad9;--superficie-base:#353fc1;
  /* Subsolo: da camada mais rasa à rocha-mãe, todas misturas de azul presença e azul tinta */
  --solo-1:#2b38a6;--solo-2:#222d8a;--solo-3:#1b2470;--solo-4:#151c55;--solo-5:#10162f;--solo-6:#0a0e21;
  --nucleo:#ffe065;--nucleo-quente:#fff4c2;--raiz:#ffe065;--neon-azul:#7c86ff;
  /* Escala de camadas */
  --z-cena:1;--z-conteudo:2;--z-frente:3;--z-altimetro:15;--z-cabecalho:20;--z-menu:30;--z-pular:40;--z-abertura:50;
  --ease-expo:cubic-bezier(.16,1,.3,1);--ease-quint:cubic-bezier(.22,1,.36,1);
}
html[data-periodo="manha"]{--ceu-topo:#3d49cf;--ceu-base:#8f98f0;--nuvem:#ffffff;--nuvem-sombra:#cdd2f4;--superficie-topo:#6d78e0}
html[data-periodo="noite"]{--ceu-topo:#10162f;--ceu-base:#263692;--nuvem:#c9cfea;--nuvem-sombra:#5d66b8;--sol:#fff0a8;--superficie-topo:#27318f;--superficie-base:#1f2a80}

/* Sem salto de largura quando a abertura trava e destrava a rolagem */
html{scrollbar-gutter:stable}
html.travado,html.travado body{overflow:hidden}
html.com-abertura{background:var(--ink)}

/* A abertura só existe quando o script do <head> decidiu rodá-la */
.abertura{display:none}
html.com-abertura .abertura{display:block}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cena{position:relative;isolation:isolate}
main{overflow-x:clip}

/* Cabeçalho por zona: transparente no céu e na superfície, vidro escuro no subsolo */
.header[data-tema]{z-index:var(--z-cabecalho);transition:background .35s var(--ease-quint),box-shadow .35s var(--ease-quint),color .35s}
.header[data-tema="ceu"],.header[data-tema="superficie"]{color:var(--white);background:transparent;box-shadow:none}
/* No céu as nuvens do parallax passam atrás do cabeçalho: vidro tinta garante 4,5:1 nos links sobre nuvem branca */
.header[data-tema="ceu"]{background:color-mix(in srgb,var(--ink) 60%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
@media(prefers-reduced-transparency:reduce){.header[data-tema="ceu"]{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}}
.header[data-tema="nuvem"]{color:var(--ink);background:transparent;box-shadow:none}
.header[data-tema="nuvem"] .logo-on-blue{display:none}
.header[data-tema="nuvem"] .logo-on-light{display:block}
.header[data-tema="nuvem"] :focus-visible{outline-color:var(--blue)}
.header[data-tema="subsolo"]{color:var(--mist);background:#10162fa8;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 #f1f3fa14}
/* Núcleo: o cartão de contato e a boia sobem por baixo do cabeçalho; vidro amarelo e botão tinta (amarelo sobre amarelo sumia) */
.header[data-tema="nucleo"]{color:var(--ink);background:color-mix(in srgb,var(--nucleo) 80%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 #10162f1f}
.header[data-tema="nucleo"] .nav-cta{background:var(--ink);color:var(--yellow)}
.header[data-tema="nucleo"] .nav-cta:hover{background:var(--ink-850)}
.header[data-tema]:is([data-tema="nuvem"],[data-tema="nucleo"]) .logo-on-blue{display:none}
.header[data-tema]:is([data-tema="nuvem"],[data-tema="nucleo"]) .logo-on-light{display:block}
.header[data-tema="nucleo"] :focus-visible{outline-color:var(--ink)}
.header[data-tema]:not([data-tema="nuvem"],[data-tema="nucleo"]) .logo-on-light{display:none}
.header[data-tema]:not([data-tema="nuvem"],[data-tema="nucleo"]) .logo-on-blue{display:block}
.header[data-tema]:not([data-tema="nuvem"],[data-tema="nucleo"]) :focus-visible{outline-color:var(--yellow)}
@media(prefers-reduced-transparency:reduce){.header[data-tema="subsolo"]{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}.header[data-tema="nucleo"]{background:var(--nucleo);-webkit-backdrop-filter:none;backdrop-filter:none}}
html.com-abertura .header{visibility:hidden}

/* HUD no canto: pausa global e altímetro em split-flap (o painel da proposta da Maria Eduarda) */
.hud{position:fixed;z-index:var(--z-altimetro);right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,24px);display:flex;align-items:flex-end;gap:10px;flex-direction:row-reverse;pointer-events:none;transition:opacity .4s var(--ease-quint)}
html.com-abertura .hud{opacity:0}
.altimetro{display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:var(--white)}
.altimetro-painel{--flap-size:15px;display:flex;align-items:center;gap:6px;padding:7px 7px;border-radius:12px;background:linear-gradient(180deg,var(--ink-850),var(--ink-950));box-shadow:0 0 0 1px #ffffff17 inset,0 1px 0 #ffffff1f inset,0 14px 34px #090e20a6,0 0 40px #353fc133}
.altimetro .flap-screws{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;padding-block:2px}
.altimetro .flap-screws i{width:4px;height:4px;border-radius:50%;background:#ffffff26;box-shadow:0 1px 0 #090e20 inset}
.altimetro .split-flap-text__tile.is-vazio{opacity:.28}
.altimetro-flap{font-size:var(--flap-size);font-weight:700;color:var(--yellow);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.altimetro-rotulo{padding:3px 9px;border-radius:999px;background:#10162fb8;font-size:12px;line-height:1.3;font-weight:600;color:var(--mist);white-space:nowrap}
.hud-pausa{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid #ffffff2e;border-radius:12px;background:#10162fb8;color:var(--mist);font-size:12px;font-weight:600;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hud-pausa .icon{width:16px;height:16px}
.hud-pausa:hover{border-color:var(--yellow);color:var(--yellow)}
@media(max-width:767px){
  .hud{right:auto;left:10px;bottom:10px;flex-direction:row;align-items:center}
  .altimetro{flex-direction:row;align-items:center}
  .altimetro-painel{--flap-size:12px;padding:5px}
  .altimetro-rotulo,.altimetro .flap-screws{display:none}
  .hud-pausa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hud-pausa{min-width:44px;justify-content:center;padding:0}
}
@media(prefers-reduced-motion:reduce){.hud-pausa{display:none}}
@media print{.hud{display:none}}

/* Pausa global: CSS parado no quadro final, scripts param via Forma.aoPausar */
html.pausado *,html.pausado *::before,html.pausado *::after{animation-play-state:paused!important}

/* Peças da proposta da Maria Eduarda reaproveitadas no site */
:root{
  --blue-400:#8995f0;--blue-700:#2932a1;--blue-800:#20277a;
  --yellow-100:#fff5c4;--ink-950:#090e20;--ink-850:#1c2445;--ink-700:#384461;--ink-300:#b6bed8;
  --radius-control:12px;--radius-overlay:24px;
}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.little-star{color:var(--yellow);line-height:1}
.button-ink{background:var(--ink);color:var(--white);box-shadow:0 12px 28px -16px #10162fcc}
.button-ink:hover{background:var(--ink-850);transform:translateY(-1px)}
.button svg:not(.icon){width:20px;height:20px}

/* Split-flap (React Bits, via proposta da Maria Eduarda): peças do painel */
.split-flap-text { --split-flap-tile-color: var(--blue); --split-flap-text-color: var(--yellow); --split-flap-radius: 8px; --split-flap-gap: clamp(3px, .45vw, 6px); display: inline-flex; align-items: center; gap: var(--split-flap-gap); color: var(--split-flap-text-color); font-family: Bricolage, Arial, sans-serif; font-size: var(--flap-size); font-weight: 720; line-height: 1; letter-spacing: 0; white-space: pre; user-select: none; font-variant-numeric: tabular-nums; perspective: 700px; }
.split-flap-text__tile { position: relative; width: .8em; height: 1.1em; overflow: hidden; border-radius: var(--split-flap-radius); background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .16), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--split-flap-tile-color) 82%, white), var(--split-flap-tile-color)); box-shadow: 0 .035em .08em rgba(255, 255, 255, .08) inset, 0 -.05em .1em rgba(0, 0, 0, .38) inset, 0 .16em .38em rgba(0, 0, 0, .28); perspective: 520px; transform-style: preserve-3d; isolation: isolate; }
.split-flap-text__tile::before { content: ''; position: absolute; z-index: 8; top: calc(50% - .5px); left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18) 18%, rgba(0, 0, 0, .64) 50%, rgba(255, 255, 255, .14) 82%, transparent); box-shadow: 0 -1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(0, 0, 0, .5); pointer-events: none; }
.split-flap-text__tile::after { content: ''; position: absolute; inset: 0; z-index: 9; border: 1px solid rgba(255, 255, 255, .08); border-radius: inherit; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2) inset; pointer-events: none; }
.split-flap-text__half, .split-flap-text__flap { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 34%), var(--split-flap-tile-color); backface-visibility: hidden; }
.split-flap-text__half--top, .split-flap-text__flap--front { top: 0; }
.split-flap-text__half--bottom, .split-flap-text__flap--back { bottom: 0; background: linear-gradient(0deg, rgba(255, 255, 255, .06), transparent 38%), color-mix(in srgb, var(--split-flap-tile-color) 88%, black); }
.split-flap-text__char { position: absolute; left: 0; width: 100%; height: 200%; display: flex; align-items: center; justify-content: center; color: var(--split-flap-text-color); text-shadow: 0 .025em 0 rgba(255, 255, 255, .16), 0 .09em .16em rgba(0, 0, 0, .42); }
.split-flap-text__half--top .split-flap-text__char, .split-flap-text__flap--front .split-flap-text__char { top: 0; }
.split-flap-text__half--bottom .split-flap-text__char, .split-flap-text__flap--back .split-flap-text__char { bottom: 0; }
.split-flap-text__flap { z-index: 6; will-change: transform, filter; transform-style: preserve-3d; }
.split-flap-text__flap--front { transform-origin: center bottom; animation: split-flap-front var(--split-flap-flip-duration, .12s) cubic-bezier(.23, 1, .32, 1) both; }
.split-flap-text__flap--back { transform-origin: center top; transform: rotateX(90deg); animation: split-flap-back var(--split-flap-flip-duration, .12s) cubic-bezier(.23, 1, .32, 1) both; }
@keyframes split-flap-front { 0% { transform: rotateX(0deg); filter: brightness(1.08); } 100% { transform: rotateX(-90deg); filter: brightness(.52); } }
@keyframes split-flap-back { 0%, 45% { transform: rotateX(90deg); filter: brightness(.58); } 100% { transform: rotateX(0deg); filter: brightness(1); } }