/* ============ IA — ABERTURA EM PARTÍCULAS (scroll story) ============
   Sem JS / sem WebGL / reduced-motion: layout estático (foto + título).
   Com efeitos (.is-fx): seção alta com palco "sticky"; ia-fx.js monta o rack
   em partículas a partir da foto e conduz 3 cenas pela rolagem. */

.ai-story{
  /* palco sempre escuro, em qualquer tema */
  --fg:#f3f1ea;--fg-dim:#a8a6a0;--line:rgba(243,241,234,0.12);
  --gold:#e8a23a;--teal:#1fb6a5;
  position:relative;background:#04050a;color:var(--fg);
  border-bottom:1px solid var(--line);
}
.ai-stage{position:relative;isolation:isolate;overflow:hidden;padding:clamp(4rem,10vw,7rem) 5vw;}
.ai-stage .scene-meta{position:relative;z-index:4;}

.ai-stage-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:4rem;align-items:center;}
.ai-beats{position:relative;z-index:4;}
.ai-beat .hero-title{font-size:clamp(2.6rem,6vw,5.2rem);}
.ai-beat .hero-sub{max-width:620px;}
.ai-beat .hero-sub strong{color:var(--fg);font-weight:600;}
.ai-beat-title{font-size:clamp(2.4rem,5.4vw,4.8rem);margin-bottom:1.2rem;}
.ai-beat p{max-width:520px;font-size:1.08rem;}
.ai-beat .ai-metric{position:relative;right:auto;bottom:auto;display:inline-block;margin-top:1.6rem;}
.ai-beat[data-beat="1"],.ai-beat[data-beat="2"]{display:none;}

.ai-photo{position:relative;z-index:2;margin:0;aspect-ratio:4/5;width:100%;justify-self:center;}
.ai-photo img{width:100%;height:100%;object-fit:contain;display:block;}
.ai-photo figcaption{position:absolute;left:0;bottom:-2rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:#8d8b85;}

.ai-particles,.ai-streaks{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none;}
.ai-streaks{z-index:0;}
.ai-particles{z-index:3;}

.ai-orbs{position:absolute;inset:0;z-index:0;pointer-events:none;}
.ai-orbs span{position:absolute;border-radius:50%;filter:blur(28px);opacity:.55;animation:ai-orb 18s ease-in-out infinite alternate;}
.ai-orbs span:nth-child(1){width:26vw;height:26vw;max-width:380px;max-height:380px;right:4%;top:6%;background:radial-gradient(circle,rgba(31,182,165,.45),transparent 70%);}
.ai-orbs span:nth-child(2){width:18vw;height:18vw;max-width:260px;max-height:260px;left:38%;bottom:4%;background:radial-gradient(circle,rgba(232,162,58,.32),transparent 70%);animation-duration:22s;}
.ai-orbs span:nth-child(3){width:9vw;height:9vw;max-width:120px;max-height:120px;right:30%;top:58%;background:radial-gradient(circle,rgba(150,120,255,.5),transparent 70%);filter:blur(10px);animation-duration:14s;}
.ai-orbs span:nth-child(4){width:6vw;height:6vw;max-width:80px;max-height:80px;left:6%;top:18%;background:radial-gradient(circle,rgba(31,182,165,.6),transparent 70%);filter:blur(8px);animation-duration:16s;}
@keyframes ai-orb{to{transform:translate3d(-4vw,3vh,0) scale(1.15);}}

.ai-bigword{
  position:absolute;z-index:1;left:0;top:50%;transform:translate3d(0,-50%,0);
  font-family:var(--display);font-size:clamp(9rem,24vw,26rem);line-height:.8;white-space:nowrap;
  color:rgba(243,241,234,.05);filter:blur(5px);pointer-events:none;user-select:none;
}

.ai-ticks,.ai-story .scroll-cue{display:none;}

/* ---------- modo com efeitos ---------- */
.ai-story.is-fx{height:340vh;}
.ai-story.is-fx .ai-stage{
  position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h) - var(--bar-b));height:calc(100svh - var(--bar-h) - var(--bar-b));
  padding:0;display:flex;flex-direction:column;
}
.ai-story.is-fx .ai-stage .scene-meta{padding:clamp(1.6rem,4vh,3rem) 5vw 0;margin-bottom:0;}
.ai-story.is-fx .ai-stage-grid{flex:1;min-height:0;padding:0 5vw;}
.ai-story.is-fx .ai-particles,.ai-story.is-fx .ai-streaks{display:block;}
.ai-story.is-fx .ai-photo{max-height:78%;width:auto;height:78%;opacity:0;transition:none;}
.ai-story.is-fx .ai-beats{height:min(600px,86%);}
.ai-story.is-fx .ai-beat{
  display:flex;flex-direction:column;justify-content:center;
  position:absolute;inset:0;opacity:0;visibility:hidden;transform:translate3d(0,28px,0);
  transition:opacity .3s ease,transform .4s ease,visibility 0s linear .4s;
}
.ai-story.is-fx .ai-beat.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .32s,transform .9s cubic-bezier(.16,1,.3,1) .32s,visibility 0s;}
.ai-story.is-fx .ai-beat::before{
  /* leve escurecimento atrás do texto para manter a leitura sobre as partículas */
  content:'';position:absolute;inset:-10% -20% -10% -40%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 35% 50%,rgba(4,5,10,.72),transparent 70%);
}

.ai-story.is-fx .ai-ticks{
  display:flex;flex-direction:column;gap:.9rem;position:absolute;z-index:4;right:2.2vw;top:50%;transform:translateY(-50%);
  list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);
}
.ai-ticks li{display:flex;align-items:center;gap:.6rem;justify-content:flex-end;opacity:.45;transition:opacity .4s ease,color .4s ease;}
.ai-ticks li::after{content:'';width:18px;height:1px;background:currentColor;transition:width .4s ease;}
.ai-ticks li.is-active{opacity:1;color:var(--gold);}
.ai-ticks li.is-active::after{width:34px;}

.ai-story.is-fx .scroll-cue{display:flex;z-index:4;transition:opacity .4s ease;}
.ai-story.is-fx .scroll-cue.is-hidden{opacity:0;}

@media (max-width:1150px){
  .ai-story.is-fx .ai-ticks{display:none;}
}
@media (max-width:900px){
  .ai-stage-grid{grid-template-columns:1fr;gap:2.5rem;}
  .ai-photo{max-width:420px;}
  .ai-story.is-fx{height:300vh;}
  .ai-story.is-fx .ai-stage-grid{grid-template-rows:42% 1fr;gap:1rem;align-items:stretch;}
  .ai-story.is-fx .ai-photo{order:-1;height:100%;max-height:none;align-self:center;}
  .ai-story.is-fx .ai-photo figcaption{display:none;}
  .ai-story.is-fx .ai-beats{height:auto;}
  .ai-story.is-fx .ai-beat{justify-content:flex-start;}
  .ai-story.is-fx .ai-beat .hero-title{font-size:clamp(2rem,8.4vw,3.2rem);}
  .ai-story.is-fx .ai-beat .hero-sub{font-size:.95rem;margin:1rem 0 1.4rem;}
  .ai-story.is-fx .ai-beat .ai-chips,.ai-story.is-fx .ai-beat .ai-eyebrow{display:none;}
  .ai-story.is-fx .ai-beat-title{font-size:clamp(2rem,9vw,3.2rem);}
  .ai-story.is-fx .ai-beat p{font-size:.95rem;}
  .ai-story.is-fx .scroll-cue{display:none;}
}
@media (max-width:640px){
  .ai-story.is-fx .ai-beat .hero-actions .btn-ghost{display:none;}
}

/* ============ IA — REDE (trecho do vídeo Spectrum-X em loop) ============ */
.ai-net-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:4rem;align-items:center;}
.ai-net-text{min-width:0;}
.ai-net-text .scene-title{margin-bottom:1.2rem;}
.ai-net-text .ai-specs{margin-top:2rem;}
.ai-clip{margin:0;min-width:0;}
.ai-clip-frame{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.ai-clip-frame iframe,.ai-clip-player{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ai-clip-frame.is-looping iframe{pointer-events:none;}
.ai-clip-tag{
  position:absolute;z-index:2;left:1rem;top:1rem;pointer-events:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:#c8c6c0;background:rgba(0,0,0,.62);padding:.35rem .55rem;border-radius:2px;
}
.ai-clip-sound{
  position:absolute;z-index:2;right:1rem;bottom:1rem;cursor:pointer;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:#f3f1ea;background:rgba(7,8,11,.85);border:1px solid rgba(232,162,58,.55);border-radius:2px;padding:.55rem .8rem;
  transition:background .2s ease,color .2s ease;
}
.ai-clip-sound:hover{background:rgba(232,162,58,.18);}
.ai-clip-sound[aria-pressed="true"]{background:#e8a23a;color:#0a0a0a;}
.ai-clip-sound:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.ai-clip figcaption{margin-top:.8rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--fg-dim);line-height:1.6;}
.ai-clip figcaption a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}
@media (max-width:900px){
  .ai-net-grid{grid-template-columns:1fr;gap:2.5rem;}
}
@media (max-width:640px){
  .ai-clip-tag{font-size:.7rem;}
  .ai-clip-sound{font-size:.75rem;padding:.75rem 1rem;right:.6rem;bottom:.6rem;}
  .ai-clip figcaption{font-size:.78rem;}
  .ai-clip figcaption a{display:inline-block;padding:.4rem 0;}
}
