/* ============================================================================
   O RAIO-X — abertura. A rolagem vira --p (0 a 1) no raiox.js; aqui e so CSS.
   Regra das referencias: midia sangra ate a borda, tipografia display gigante
   POR CIMA dela, tres a cinco palavras por tela, fundo escuro onde o texto passa.
   ========================================================================== */
/* v9: 240vh -> 420vh e transicoes mais curtas: cada frase fica ~3,5x mais tempo parada para ler (pedido do Heitor, 02/10/2026) */
.raiox{--p:0;position:relative;height:420vh;background:#030303;isolation:isolate}
.raiox-fixo{position:sticky;top:0;height:100dvh;overflow:hidden}

.campo{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}

/* o campo respira: a luz de fundo acende junto com a curva */
.raiox-fixo::before{content:"";position:absolute;left:50%;top:52%;width:150vmax;height:150vmax;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(199,154,90,.13) 0%,rgba(199,154,90,.04) 34%,rgba(199,154,90,0) 62%);
  opacity:calc(.25 + var(--p)*1.3)}
/* vinheta: segura o olho no centro e da contraste para o texto */
.raiox-fixo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(115% 88% at 50% 50%,rgba(3,3,3,0) 32%,rgba(3,3,3,.82) 100%)}

/* ---------- os tempos: quatro frases que se revezam no mesmo lugar ---------- */
.tempos{position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  padding:0 clamp(1.25rem,5vw,4rem);pointer-events:none}
.tempo{grid-area:1/1;text-align:center;font-family:var(--serif);font-weight:500;
  font-size:clamp(40px,8.2vw,124px);line-height:.92;letter-spacing:-.025em;color:var(--creme);
  text-shadow:0 14px 60px rgba(0,0,0,.95),0 2px 22px rgba(0,0,0,.9);
  will-change:opacity,transform,filter}
.tempo i{display:block;font-style:normal}
.tempo em{font-style:italic;color:var(--ouro-claro)}

.t1{opacity:calc((.26 - var(--p)) * 15);
    transform:translate3d(0,calc(var(--p) * -150px),0) scale(calc(1 + var(--p)*.07));
    filter:blur(calc(max(0px,(var(--p) - .18)) * 26px))}
.t2{opacity:calc(min((var(--p) - .25) * 15, (.52 - var(--p)) * 15));
    transform:translate3d(0,calc((.38 - var(--p)) * 150px),0);
    filter:blur(calc(max(0px,(var(--p) - .45)) * 22px))}
.t3{opacity:calc(min((var(--p) - .53) * 16, (.80 - var(--p)) * 16));
    transform:translate3d(0,calc((.66 - var(--p)) * 150px),0);
    filter:blur(calc(max(0px,(var(--p) - .74)) * 22px))}

/* ---------- o fecho: entra por ultimo, ja com a curva formada ---------- */
.fecho{position:absolute;left:0;right:0;bottom:clamp(2.5rem,7vh,5rem);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:clamp(1.1rem,3vh,2rem);
  padding:0 clamp(1.25rem,5vw,4rem);text-align:center;
  opacity:calc((var(--p) - .82) * 7);
  transform:translate3d(0,calc(max(0px,(.98 - var(--p))) * 90px),0)}
.fecho h1{font-family:var(--serif);font-weight:500;color:var(--creme);letter-spacing:-.02em;
  font-size:clamp(30px,5.4vw,74px);line-height:.98}
.fecho h1 em{font-style:italic;color:var(--ouro-claro)}
.fecho-onde{display:flex;align-items:center;gap:clamp(.7rem,2.4vw,1.6rem);
  font-size:clamp(9.5px,1.05vw,11.5px);letter-spacing:.3em;text-transform:uppercase;color:var(--creme-2)}
.fecho-onde span{white-space:nowrap}
.fecho-onde b{width:3px;height:3px;border-radius:50%;background:var(--ouro);display:block}
.fecho-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;pointer-events:auto}
/* invisivel = sem clique (o raiox.js tambem tira o foco com inert) */
.raiox:not(.fim) .fecho-acoes{pointer-events:none}

/* ---------- dica de rolar ---------- */
.raiox-dica{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--creme-2);opacity:calc(1 - var(--p)*9);pointer-events:none}
.raiox-dica span{width:19px;height:30px;border:1px solid var(--fio);border-radius:999px;position:relative}
.raiox-dica span::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;
  background:var(--ouro);transform:translateX(-50%);animation:rolinha 1.9s ease-in-out infinite}

/* grao: tira o aspecto de renderizado */
.raiox .grao{position:absolute;inset:-50%;z-index:3;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:tremor 1.1s steps(3) infinite}

@media(max-width:860px){
  .raiox{height:380vh}
  .tempo{font-size:clamp(34px,10.5vw,58px)}
  .fecho{bottom:clamp(2rem,6vh,3.5rem);gap:1rem}
  .fecho h1{font-size:clamp(26px,7.6vw,40px)}
  .fecho-onde{font-size:9px;letter-spacing:.2em;gap:.6rem}
  .fecho-acoes{width:100%;flex-direction:column;align-items:stretch}
  .raiox-dica{bottom:12px}
}

@media (prefers-reduced-motion:reduce){
  .raiox{height:auto}
  .raiox-fixo{position:relative;height:88vh}
  .raiox .grao{display:none}
  .t1,.t2{display:none}
  .t3{opacity:1!important;transform:none!important;filter:none!important}
  .fecho{opacity:1!important;transform:none!important}
  .raiox-dica{display:none}
}