/* Tempo scroll: estilos do componente. Cole junto com tempo.js.
   Cores vêm das variáveis --tempo-* que o tempo.js atualiza a cada quadro. */

.tempo-camada{position:fixed;inset:0;z-index:0;background:var(--tempo-fundo,#eef4f1);pointer-events:none}

/* cena: traços finos e uma figura sólida, sem contorno de desenho animado */
.tempo-cena-caixa{position:fixed;top:0;left:0;right:0;height:46svh;z-index:1;pointer-events:none}
.tempo-cena{width:100%;height:100%;display:block;overflow:hidden}
.tempo-cena .t{fill:none;stroke:var(--tempo-tinta,#16302b);stroke-width:1.2;vector-effect:non-scaling-stroke}
.tempo-cena .t-grosso{stroke-width:2.2}
.tempo-cena .t-vidro{fill:var(--tempo-superficie,#e0ebe6);stroke:none}
.tempo-cena .t-luz{fill:var(--tempo-destaque,#2f9a80);opacity:0}
.tempo-cena .t-painel{fill:var(--tempo-superficie,#e0ebe6)}
.tempo-cena .t-cheia{fill:var(--tempo-tinta,#16302b);stroke:none;opacity:.85}
.tempo-cena .t-sol .t-cheia{fill:var(--tempo-destaque,#2f9a80);opacity:1}
.tempo-cena .t-lua .t-cheia{fill:var(--tempo-numero,#f0f3f7);opacity:1}
.tempo-cena .t-linha{fill:var(--tempo-destaque,#2f9a80);opacity:.7;stroke:none;transform-box:fill-box;transform-origin:0 50%;animation:tempo-digita 3.2s steps(8,end) infinite}
@keyframes tempo-digita{0%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
.tempo-cena .t-fig{stroke:var(--tempo-tinta,#16302b);fill:none;stroke-linecap:round;stroke-linejoin:round}
.tempo-cena .t-fig-cheia{fill:var(--tempo-tinta,#16302b)}

.tempo-dia{position:relative;z-index:2;min-height:200svh;display:flex;align-items:center;padding:96px 84px 64px clamp(18px,6vw,96px);color:var(--tempo-tinta,#16302b)}
.tempo-dia.tempo-ultimo{min-height:200svh}
.tempo-texto{width:min(560px,100%)}
.tempo-eyebrow{font:400 12px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--tempo-destaque,#2f9a80)}
.tempo-texto h1,.tempo-texto h2{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:clamp(2.2rem,1.3rem + 3.2vw,4.4rem);line-height:1.04;letter-spacing:-.01em;margin-top:18px}
.tempo-texto p{margin-top:18px;font-family:"Newsreader",Georgia,serif;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.6;max-width:50ch}
.tempo-linhas{list-style:none;padding:0;margin-top:32px;border-top:1px solid var(--tempo-borda,#a6c2b8)}
.tempo-linhas li{display:grid;grid-template-columns:76px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--tempo-borda,#a6c2b8);font-size:.95rem}
.tempo-linhas time{font:400 13px/1.7 "IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--tempo-numero,#1d4a40)}
.tempo-medidas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0 0}
.tempo-medidas div{padding:16px 16px 14px;border-radius:12px;background:var(--tempo-superficie,#e0ebe6);border:1px solid var(--tempo-borda,#a6c2b8)}
.tempo-medidas dd{margin:0;font:300 clamp(2rem,1.6rem + 1.4vw,3rem)/1 "Newsreader",Georgia,serif;font-variant-numeric:tabular-nums;color:var(--tempo-numero,#1d4a40)}
.tempo-medidas dt{margin-top:8px;font:400 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;opacity:.8}

/* telas largas: texto à esquerda, cena à direita */
@media (min-width:900px){
  .tempo-cena-caixa{left:42vw;right:64px;height:100svh}
  .tempo-texto{width:min(480px,36vw)}
}

@media (max-width:640px){
  .tempo-dia{padding:50svh 18px 48px 18px;align-items:flex-end}
  .tempo-linhas li{grid-template-columns:60px 1fr;gap:12px}
  .tempo-medidas{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .tempo-medidas div{padding:12px 10px 10px}
}

.tempo-motion .tempo-revelar{opacity:0}
@media (prefers-reduced-motion:reduce){
  .tempo-motion .tempo-revelar{opacity:1}
  .tempo-cena .t-linha{animation:none}
}