/* AI Evolution — homepage intro film (markup: section#ix in ai_evolution_landing.html,
   motion: intro.js). The stage is always dark: it is a film, not a themed panel. */
.ix{--ix-ink:#F4F7FF;--ix-dim:rgba(226,234,255,.66);--ix-blue:#60A5FA;--ix-cyan:#38BDF8;--ix-mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;--ix-logo-bottom:48%;
  position:relative;isolation:isolate;overflow:hidden;color:var(--ix-ink);background:#03050C;
  height:clamp(560px,calc(100svh - 56px),940px);font-family:'Inter',system-ui,sans-serif}
.ix *{box-sizing:border-box}

/* ── atmosphere ─────────────────────────────────────────────────── */
.ix-sky{position:absolute;inset:0;z-index:-3;background:
  radial-gradient(120% 80% at 50% 38%,#0B1530 0%,#060A18 45%,#03050C 75%)}
.ix-aurora{position:absolute;z-index:-2;border-radius:50%;opacity:.5;will-change:transform}
.ix-aurora.a1{width:56vw;height:42vw;left:-12vw;top:-14vw;background:radial-gradient(closest-side,rgba(29,78,216,.9),rgba(29,78,216,.35) 45%,transparent);animation:ix-drift1 22s ease-in-out infinite alternate}
.ix-aurora.a2{width:48vw;height:40vw;right:-14vw;top:8vw;background:radial-gradient(closest-side,rgba(14,116,144,.85),rgba(14,116,144,.3) 45%,transparent);opacity:.38;animation:ix-drift2 26s ease-in-out infinite alternate}
.ix-aurora.a3{width:40vw;height:30vw;left:30vw;bottom:-18vw;background:radial-gradient(closest-side,rgba(67,56,202,.85),rgba(67,56,202,.3) 45%,transparent);opacity:.32;animation:ix-drift1 30s ease-in-out infinite alternate-reverse}
@keyframes ix-drift1{to{transform:translate3d(8vw,4vw,0) scale(1.12)}}
@keyframes ix-drift2{to{transform:translate3d(-10vw,-3vw,0) scale(.92)}}
.ix-floor{position:absolute;left:-50%;right:-50%;bottom:-6%;height:46%;z-index:-2;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(96,165,250,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.16) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 85%);mask-image:linear-gradient(to top,#000 0%,transparent 85%);animation:ix-floor 6s linear infinite;opacity:.55}
@keyframes ix-floor{to{background-position:0 64px,0 0}}
.ix-canvas{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%}
.ix-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
.ix-grain{position:absolute;inset:-50%;z-index:0;pointer-events:none;opacity:.07;animation:ix-grain 1.2s steps(6) infinite;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes ix-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.ix::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(3,5,12,.9))}

/* ── captions ───────────────────────────────────────────────────── */
.ix-caps{position:absolute;inset:0;z-index:2;pointer-events:none}
.ix-cap{position:absolute;left:0;right:0;text-align:center;padding:0 20px}
.ix-cap .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.ix-cap .w>span{display:inline-block}
.ix-kicker{font-family:var(--ix-mono);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ix-cyan);margin-bottom:14px}
.ix-line{font-family:'Space Grotesk',var(--font-display,system-ui),sans-serif;font-weight:600;letter-spacing:-.025em;line-height:1.12;font-size:clamp(1.5rem,3.4vw,2.9rem);max-width:22ch;margin:0 auto;text-wrap:balance}
.ix-line em{font-style:normal;background:linear-gradient(90deg,#93C5FD,#38BDF8 50%,#A5B4FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.ix-sub{font-size:clamp(.98rem,1.5vw,1.2rem);color:var(--ix-dim);max-width:38ch;margin:0 auto;line-height:1.5}

[data-ix="cap-intro"]{bottom:8%}
.ix-lane{top:calc(40% + min(18vh,130px) + 10px)}
.ix-lane .ix-kicker{color:var(--lane-c)}
.ix-brand{top:calc(var(--ix-logo-bottom) + 18px)}
.ix-word{font-family:'Space Grotesk',var(--font-display,system-ui),sans-serif;font-weight:700;font-size:clamp(2.3rem,7.2vw,5.6rem);letter-spacing:.08em;line-height:1;margin:0;
  background:linear-gradient(180deg,#FFFFFF 30%,#B9D2FF);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(96,165,250,.25)}
.ix-tag{margin-top:16px}
.ix-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px;pointer-events:auto}
.ix-btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font:600 .95rem/1 'Inter',system-ui,sans-serif;text-decoration:none!important;cursor:pointer;transition:transform .2s,box-shadow .25s,background .2s,border-color .2s}
.ix-btn.pri{color:#fff;background:linear-gradient(135deg,#3B82F6,#2563EB 60%,#1D4ED8);box-shadow:0 10px 40px -10px rgba(59,130,246,.85),inset 0 1px 0 rgba(255,255,255,.25)}
.ix-btn.pri:hover{transform:translateY(-2px);box-shadow:0 16px 50px -10px rgba(59,130,246,1),inset 0 1px 0 rgba(255,255,255,.3)}
.ix-btn.sec{color:var(--ix-ink);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ix-btn.sec:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32)}
.ix-btn svg{width:18px;height:18px}
.ix-btn:focus-visible,.ix-ctl:focus-visible{outline:2px solid #93C5FD;outline-offset:3px}

/* Motion states: only once intro.js has taken over (.is-live); without JS the
   brand block simply shows. */
.ix.is-live [data-ix]{visibility:hidden}
.ix.is-live [data-ix].on,.ix.is-live [data-ix].off{visibility:visible}
.ix.is-live .ix-split .w>span{transform:translateY(105%);transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*55ms)}
.ix.is-live .on .ix-split .w>span,.ix.is-live .ix-split.on .w>span{transform:none}
.ix.is-live .off .ix-split .w>span{transform:translateY(-105%);transition:transform .55s cubic-bezier(.7,0,.84,0);transition-delay:calc(var(--i,0)*25ms)}
.ix.is-live .ix-fade{opacity:0;transform:translateY(14px);filter:blur(6px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .8s ease}
.ix.is-live .on .ix-fade,.ix.is-live .ix-fade.on{opacity:1;transform:none;filter:none}
.ix.is-live .off .ix-fade{opacity:0;transform:translateY(-10px);filter:blur(4px);transition-duration:.4s}
.ix.is-live .ix-word{opacity:0;letter-spacing:.7em;filter:blur(14px);transition:opacity 1.2s ease,letter-spacing 1.6s cubic-bezier(.16,1,.3,1),filter 1.2s ease}
.ix.is-live [data-ix="cap-brand"].on .ix-word{opacity:1;letter-spacing:.08em;filter:none}
.ix.is-live [data-ix="cap-cta"]{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.ix.is-live [data-ix="cap-cta"].on{opacity:1;transform:none}
.ix.is-replaying [data-ix]{transition-duration:.01s!important}
.ix-mark-static{display:block;width:clamp(96px,16vh,150px);height:auto;margin:0 auto 22px;color:#93C5FD;filter:drop-shadow(0 0 24px rgba(96,165,250,.55))}
.ix.is-live .ix-mark-static{display:none}
.ix:not(.is-live) .ix-brand{top:50%;transform:translateY(-50%)}

/* ── controls ───────────────────────────────────────────────────── */
.ix-bar{position:absolute;top:18px;right:22px;z-index:3;display:flex;align-items:center;gap:8px}
.ix-meta{position:absolute;top:28px;left:26px;z-index:3;font-family:var(--ix-mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(226,234,255,.45);white-space:nowrap}
.ix-meta::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#EF4444;margin-right:10px;vertical-align:1px;box-shadow:0 0 10px #EF4444;animation:ix-rec 1.6s ease-in-out infinite}
.ix.is-done .ix-meta::before,.ix.is-static .ix-meta::before,.ix.is-paused .ix-meta::before{background:#60A5FA;box-shadow:0 0 10px #60A5FA;animation:none}
@keyframes ix-rec{50%{opacity:.25}}
.ix-progress{position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.ix-progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#3B82F6,#38BDF8);box-shadow:0 0 12px #38BDF8}
.ix-ctl{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(8,12,28,.55);color:rgba(240,245,255,.85);
  font:600 .74rem/1 'Inter',system-ui,sans-serif;letter-spacing:.02em;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,border-color .2s}
.ix-ctl:hover{background:rgba(59,130,246,.22);border-color:rgba(147,197,253,.45)}
.ix-ctl svg{width:13px;height:13px}
.ix-ctl .i-play{display:none}
.ix.is-paused .ix-ctl .i-play{display:block}
.ix.is-paused .ix-ctl .i-pause{display:none}
.ix:not(.is-live) .ix-bar,.ix:not(.is-live) .ix-meta,.ix:not(.is-live) .ix-progress,.ix.is-landed [data-ix-act="skip"],.ix.is-static [data-ix-act="pause"]{display:none}
.ix [data-ix-act="replay"]{display:none}
.ix.is-done [data-ix-act="replay"],.ix.is-static [data-ix-act="replay"]{display:inline-flex}
.ix.is-done [data-ix-act="pause"]{display:inline-flex}
.ix-scroll{position:absolute;left:50%;bottom:30px;z-index:3;width:24px;height:38px;margin-left:-12px;border:1.5px solid rgba(226,234,255,.35);border-radius:14px;opacity:0;transition:opacity .8s 1s}
.ix-scroll::after{content:'';position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#93C5FD;animation:ix-wheel 1.8s ease-in-out infinite}
@keyframes ix-wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.ix.is-done .ix-scroll,.ix.is-static .ix-scroll{opacity:1}

@media(max-width:640px){
  .ix{height:clamp(560px,calc(100svh - 52px),820px)}
  .ix-bar{top:12px;right:12px}
  .ix-meta{display:none}
  .ix-btn{height:46px;padding:0 20px;font-size:.9rem}
  .ix-lane{top:calc(40% + 13vh)}
  .ix-scroll{display:none}
  [data-ix="cap-intro"]{bottom:16%}
}
@media(prefers-reduced-motion:reduce){
  .ix-aurora,.ix-floor,.ix-grain,.ix-scroll::after{animation:none!important}
  .ix.is-live *{transition-duration:.01s!important;transition-delay:0s!important}
}