/* ============================================================
   Kitsune AI — Our Story (cinematic scroll narrative)
   towerdoors-style: parallax portrait · BIG year-chapters with
   full-width visual panels · full-bleed statement. Copy unchanged.
   ============================================================ */

/* hero scroll cue */
.os-cue { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); }
.os-cue i { width:1px; height:36px; background:linear-gradient(var(--kit-fox-500), transparent); position:relative; overflow:hidden; }
.os-cue i::after { content:""; position:absolute; top:-12px; left:0; width:1px; height:12px; background:var(--kit-fox-500); animation:oscue 1.9s var(--ease-in-out) infinite; }
@keyframes oscue { 0%{top:-12px;} 70%,100%{top:38px;} }

/* ---- provenance chapter (parallax portrait) ---- */
.os-prov__grid { display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(36px,5vw,84px); align-items:center; max-width:1248px; margin:0 auto; }
.os-portrait { position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/5; }
.os-portrait img { position:absolute; left:0; top:-4%; width:100%; height:108%; object-fit:cover; object-position:50% 16%; will-change:transform; }
.os-portrait__cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; background:linear-gradient(to top, rgba(11,13,18,.82), transparent); color:#fff; }
.os-portrait__cap b { display:block; font-size:17px; }
.os-portrait__cap span { font-family:var(--font-mono); font-size:12px; color:var(--kit-slate-300); letter-spacing:.04em; }
.os-prov__kicker { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--kit-fox-500); display:inline-block; margin-bottom:16px; }
.os-prov__title { font-family:var(--font-display); font-size:clamp(28px,3.6vw,48px); line-height:1.04; letter-spacing:-.02em; color:var(--fg-1); }
.os-prov__body { margin-top:22px; font-size:var(--fs-body-lg); line-height:1.65; color:var(--fg-2); }
.os-prov__body p + p { margin-top:1em; }
@media (max-width:860px){ .os-prov__grid { grid-template-columns:1fr; gap:32px; } .os-portrait{ aspect-ratio:1/1; } }

/* ============================================================
   YEAR-CHAPTERS (the cinematic timeline)
   ============================================================ */
.story { background:var(--bg-sunken); }
.story__intro { max-width:760px; margin:0 auto clamp(36px,5vw,68px); text-align:center; }
.chapters { max-width:1240px; margin:0 auto; }

.chapter { position:relative; padding:clamp(54px,8vw,120px) 0; border-top:1px solid var(--border); }
.chapter:first-child { border-top:0; padding-top:clamp(16px,2.5vw,32px); }

.chapter__k { font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); display:block; margin-bottom:18px; }
.chapter__year { font-family:var(--font-display); font-weight:600; font-size:clamp(58px,14vw,184px); line-height:.82; letter-spacing:-.045em; color:var(--fg-1); }
.chapter__year small { font-size:.30em; color:var(--fg-3); font-weight:500; letter-spacing:-.01em; }
.chapter--a .chapter__year { color:var(--kit-ink); }
.chapter__title { font-family:var(--font-display); font-size:clamp(26px,3.4vw,46px); line-height:1.03; letter-spacing:-.02em; color:var(--fg-1); margin-top:clamp(22px,2.6vw,34px); max-width:24ch; }
.chapter__body { margin-top:16px; font-size:var(--fs-body-lg); line-height:1.65; color:var(--fg-2); max-width:58ch; }

/* big full-width visual panel per chapter */
.chapter__visual { margin-top:clamp(30px,3.6vw,50px); position:relative; aspect-ratio:21/9; border-radius:var(--r-xl); overflow:hidden; background:var(--kit-ink);
  opacity:0; clip-path:inset(10% 12% round var(--r-xl)); transition:opacity 1s var(--ease-kinetic), clip-path 1.1s var(--ease-kinetic); }
.chapter.is-in .chapter__visual { opacity:1; clip-path:inset(0% round var(--r-xl)); }
@media (max-width:680px){ .chapter__visual { aspect-ratio:3/2; } }
.chapter__visual img { position:absolute; left:0; top:-9%; width:100%; height:118%; object-fit:cover; will-change:transform; }
.chapter__tint { position:absolute; inset:0; }
.chapter--a .chapter__tint { background:linear-gradient(120deg, rgba(11,13,18,.34), transparent 52%), radial-gradient(70% 120% at 18% 100%, rgba(238,77,31,.34), transparent 60%); }
.chapter--b .chapter__tint { background:linear-gradient(120deg, rgba(11,13,18,.42), transparent 58%); }
.chapter--c .chapter__tint { background:linear-gradient(120deg, rgba(11,13,18,.30), transparent 54%), radial-gradient(70% 120% at 82% 0%, rgba(35,55,241,.30), transparent 60%); }
.chapter--d .chapter__tint { background:linear-gradient(120deg, rgba(11,13,18,.42), transparent 56%), radial-gradient(80% 120% at 50% 100%, rgba(75,53,200,.26), transparent 64%); }

/* chapter text reveal */
.chapter__k, .chapter__year, .chapter__title, .chapter__body { opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease-kinetic), transform .8s var(--ease-kinetic); }
.chapter.is-in .chapter__k { opacity:1; transform:none; }
.chapter.is-in .chapter__year { opacity:1; transform:none; transition-delay:.06s; }
.chapter.is-in .chapter__title { opacity:1; transform:none; transition-delay:.14s; }
.chapter.is-in .chapter__body { opacity:1; transform:none; transition-delay:.2s; }

/* ============================================================
   BESPOKE CHAPTER ANIMATIONS
   ============================================================ */
.chapter__visual--anim { background:radial-gradient(120% 130% at 50% 0%, #12151d, var(--kit-ink) 70%); }
.ch-anim { position:absolute; inset:0; overflow:hidden; }
.ch-anim__grid { position:absolute; inset:-20%; background-image:linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px); background-size:46px 46px; animation:chgrid 20s linear infinite alternate; }
@keyframes chgrid { to { background-position:46px 46px; } }
.ch-anim__label { position:absolute; left:clamp(16px,2vw,28px); bottom:clamp(14px,2vw,22px); z-index:3; font-family:var(--font-mono); font-size:clamp(10px,1.1vw,12px); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.ch-anim__label b { color:#fff; font-weight:600; }

/* ---- 01 · Agency journey ---- */
.ch-journey { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; align-content:center; gap:clamp(10px,1.6vw,26px) clamp(16px,2.4vw,40px); padding:clamp(34px,6vw,72px) clamp(28px,5vw,80px) clamp(46px,7vw,84px); }
.ch-journey__w { font-family:var(--font-display); font-weight:600; font-size:clamp(15px,2.5vw,34px); line-height:1; letter-spacing:-.015em; color:#fff; white-space:nowrap; opacity:0;
  transform:translate(var(--jx,0),var(--jy,0)) scale(.5) rotate(var(--jr,0)); animation:jrny 12s var(--ease-kinetic) infinite; animation-delay:var(--jd,0s); }
.ch-journey__w em { font-style:normal; color:var(--kit-fox-400); }
.ch-journey__w i { font-style:normal; color:var(--kit-electric-400); }
@keyframes jrny {
  0%   { opacity:0; transform:translate(var(--jx,0),var(--jy,0)) scale(.5) rotate(var(--jr,0)); }
  10%  { opacity:1; transform:translate(0,0) scale(1) rotate(0); }
  72%  { opacity:1; transform:translate(0,0) scale(1) rotate(0); }
  86%,100% { opacity:0; transform:translate(calc(var(--jx,0) * -.6), calc(var(--jy,0) * -.6)) scale(.6) rotate(calc(var(--jr,0) * -1)); }
}

/* ---- 02 · Passed on every fad ---- */
.ch-fads__x { position:absolute; right:0; white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,3.2vw,46px); letter-spacing:-.02em; color:rgba(255,255,255,.78); opacity:0; transform:translateX(110%); animation:fadx var(--d,14s) linear infinite; animation-delay:var(--dl,0s); }
.ch-fads__x i { position:absolute; left:-4%; top:52%; width:108%; height:2px; background:var(--kit-fox-500); transform:scaleX(0); transform-origin:left center; animation:fadstrike var(--d,14s) linear infinite; animation-delay:var(--dl,0s); }
@keyframes fadx {
  0% { opacity:0; transform:translateX(110%); }
  10%,72% { opacity:1; }
  100% { opacity:0; transform:translateX(-130%); }
}
@keyframes fadstrike { 0%,40% { transform:scaleX(0); } 56%,100% { transform:scaleX(1); } }

/* ---- 02 (rebuilt) · Hype-cycle glass gallery ---- */
.chapter__visual--fads { container-type:inline-size; }
.ch-fadmuseum { position:absolute; inset:0; z-index:2; display:flex; gap:2.2cqw; padding:3cqw; }
.fadtile { position:relative; flex:1 1 0; border-radius:1.4cqw; overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.55); }
.fadtile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.35) brightness(.66) contrast(1.02); }
.fadtile::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,10,15,.92), rgba(8,10,15,.05) 56%); }
.fadtile__pass { position:absolute; z-index:2; top:1.1cqw; left:1.1cqw; font-family:var(--font-mono); font-size:.92cqw; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--kit-fox-500); padding:.5cqw .9cqw; border-radius:99px; box-shadow:0 .4cqw 1cqw rgba(238,77,31,.35); }
.fadtile__cap { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:1.5cqw 1.6cqw; display:flex; align-items:baseline; justify-content:space-between; gap:1cqw; }
.fadtile__cap s { font-family:var(--font-display); font-weight:600; font-size:2.6cqw; line-height:1; letter-spacing:-.01em; color:#fff; text-decoration-thickness:.22cqw; text-decoration-color:var(--kit-fox-500); }
.fadtile__cap i { font-family:var(--font-mono); font-style:normal; font-size:1cqw; color:rgba(255,255,255,.58); white-space:nowrap; }

.fadledger { flex:1.18 1 0; display:flex; flex-direction:column; border-radius:1.4cqw; padding:1.9cqw 2cqw; background:rgba(255,255,255,.055); backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1); border:1px solid rgba(255,255,255,.13); box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.fadledger__h { font-family:var(--font-mono); font-size:1cqw; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.fadledger ul { list-style:none; margin:0; padding:0; flex:1; display:grid; grid-template-columns:1fr 1fr; gap:0 2.4cqw; align-content:center; }
.fadledger li { display:flex; align-items:baseline; justify-content:space-between; gap:1cqw; padding:.95cqw 0; border-bottom:1px solid rgba(255,255,255,.08); }
.fadledger li s { flex:0 1 auto; min-width:0; white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:1.72cqw; line-height:1; letter-spacing:-.015em; color:rgba(255,255,255,.8); text-decoration-thickness:.16cqw; text-decoration-color:var(--kit-fox-500); }
.fadledger li i { flex:none; font-family:var(--font-mono); font-style:normal; font-size:.92cqw; color:rgba(255,255,255,.42); }
.fadledger__f { display:flex; align-items:center; gap:.8cqw; margin-top:1.3cqw; font-family:var(--font-mono); font-size:.92cqw; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.fadledger__dot { width:.85cqw; height:.85cqw; border-radius:50%; background:var(--kit-fox-500); box-shadow:0 0 0 .32cqw rgba(238,77,31,.2); }

/* entrance — staggered rise with the chapter clip-open */
.ch-fadmuseum .reveal { opacity:0; transform:translateY(3cqw); transition:opacity .7s var(--ease-kinetic), transform .7s var(--ease-kinetic); }
.chapter.is-in .ch-fadmuseum .reveal { opacity:1; transform:none; }
.chapter.is-in .ch-fadmuseum .reveal[data-d="0"] { transition-delay:.18s; }
.chapter.is-in .ch-fadmuseum .reveal[data-d="1"] { transition-delay:.28s; }
.chapter.is-in .ch-fadmuseum .reveal[data-d="2"] { transition-delay:.38s; }

@media (max-width:680px){
  .ch-fadmuseum { flex-wrap:wrap; gap:2.6cqw; padding:3.4cqw; }
  .fadtile { flex:1 1 42%; aspect-ratio:4/3; }
  .fadledger { flex:1 1 100%; }
  .fadledger ul { grid-template-columns:1fr 1fr; }
}

/* ---- 03 · Agentic AI · OODA loop ---- */
.ch-ooda { position:absolute; inset:0; display:grid; place-items:center; }
.ch-ooda__ring { position:relative; height:min(80%, 300px); aspect-ratio:1; }
.ch-ooda__sweep { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(35,55,241,0) 0deg, rgba(35,55,241,.05) 200deg, rgba(238,77,31,.5) 340deg, rgba(238,77,31,0) 360deg); -webkit-mask:radial-gradient(closest-side, transparent 60%, #000 61%, #000 100%); mask:radial-gradient(closest-side, transparent 60%, #000 61%, #000 100%); animation:spin 6s linear infinite; }
.ch-ooda__orbit { position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(255,255,255,.16); }
.ch-ooda__node { position:absolute; inset:0; transform:rotate(var(--a)); }
.ch-ooda__node b { position:absolute; left:50%; top:0; transform:translate(-50%,-50%) rotate(calc(var(--a) * -1)); display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--font-mono); font-size:clamp(9px,1.15vw,13px); letter-spacing:.08em; text-transform:uppercase; color:#fff; font-weight:500; white-space:nowrap; }
.ch-ooda__node b::before { content:""; width:clamp(11px,1.5vw,16px); height:clamp(11px,1.5vw,16px); border-radius:50%; background:var(--kit-fox-500); box-shadow:0 0 0 5px rgba(238,77,31,.14), 0 0 18px 2px rgba(238,77,31,.55); animation:oodapulse 5s ease-in-out infinite; animation-delay:var(--nd,0s); }
@keyframes oodapulse { 0%,72%,100% { transform:scale(.62); opacity:.45; } 12%,30% { transform:scale(1); opacity:1; } }
.ch-ooda__core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; }
.ch-ooda__core b { display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(15px,2.2vw,28px); letter-spacing:-.01em; color:#fff; }
.ch-ooda__core span { font-family:var(--font-mono); font-size:clamp(9px,1vw,11px); letter-spacing:.2em; text-transform:uppercase; color:var(--kit-fox-400); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- 03 (rebuilt) · Agent-run console (Agentic AI product UI) ---- */
.chapter__visual--agent { container-type:inline-size; background:radial-gradient(105% 125% at 82% 2%, #3a2566 0%, #221842 34%, #120d24 64%, #09060f 100%); }
.agentrun { position:absolute; inset:0; z-index:2; display:flex; gap:2.4cqw; padding:3cqw; }

/* left — reasoning pipeline */
.agentrun__brain { flex:1 1 0; display:flex; flex-direction:column; }
.agentrun__h { display:flex; align-items:center; gap:.8cqw; font-family:var(--font-mono); font-size:1cqw; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:1.8cqw; }
.agentrun__dot { width:.85cqw; height:.85cqw; border-radius:50%; background:var(--kit-fox-500); box-shadow:0 0 0 .3cqw rgba(238,77,31,.2); }
.agpipe { list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column; justify-content:center; gap:0; }
.agpipe__s { position:relative; padding:0 0 0 3cqw; min-height:5.6cqw; display:flex; flex-direction:column; justify-content:center; }
.agpipe__s::before { content:""; position:absolute; left:.55cqw; top:1.5cqw; bottom:-1cqw; width:1px; background:rgba(255,255,255,.14); }
.agpipe__s:last-child::before { display:none; }
.agpipe__s::after { content:""; position:absolute; left:0; top:1.1cqw; width:1.2cqw; height:1.2cqw; border-radius:50%; border:.18cqw solid rgba(255,255,255,.28); background:var(--kit-ink); }
.agpipe__s.is-done::after { background:var(--kit-fox-500); border-color:var(--kit-fox-500); box-shadow:0 0 0 .25cqw rgba(238,77,31,.16); }
.agpipe__s.is-active::after { border-color:var(--kit-fox-500); box-shadow:0 0 0 .25cqw rgba(238,77,31,.18); animation:agpulse 2s var(--ease-in-out) infinite; }
.agpipe__s b { font-family:var(--font-display); font-weight:600; font-size:2cqw; line-height:1; letter-spacing:-.01em; color:rgba(255,255,255,.55); }
.agpipe__s.is-done b { color:#fff; }
.agpipe__s.is-active b { color:#fff; }
.agpipe__s span { font-family:var(--font-sans); font-size:1.04cqw; color:rgba(255,255,255,.5); margin-top:.5cqw; }
.agpipe__s.is-active span { color:var(--kit-fox-300); }
@keyframes agpulse { 0%,100%{ box-shadow:0 0 0 .25cqw rgba(238,77,31,.18);} 50%{ box-shadow:0 0 0 .7cqw rgba(238,77,31,0);} }

/* right — execution console */
.agentrun__console { flex:1.32 1 0; display:flex; flex-direction:column; border-radius:1.3cqw; overflow:hidden; background:rgba(255,255,255,.045); backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1); border:1px solid rgba(255,255,255,.12); box-shadow:0 1.4cqw 3.4cqw rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07); }
.agcon__bar { display:flex; align-items:center; gap:1cqw; padding:1.1cqw 1.4cqw; border-bottom:1px solid rgba(255,255,255,.09); }
.agcon__dots { display:flex; gap:.55cqw; }
.agcon__dots i { width:.9cqw; height:.9cqw; border-radius:50%; background:rgba(255,255,255,.18); }
.agcon__dots i:first-child { background:var(--kit-fox-500); }
.agcon__name { font-family:var(--font-mono); font-size:1.02cqw; letter-spacing:.02em; color:rgba(255,255,255,.55); }
.agcon__name b { color:#fff; font-weight:500; }
.agcon__live { margin-left:auto; display:inline-flex; align-items:center; gap:.6cqw; font-family:var(--font-mono); font-size:.82cqw; letter-spacing:.1em; text-transform:uppercase; color:var(--kit-fox-300); border:1px solid rgba(238,77,31,.32); background:rgba(238,77,31,.08); padding:.45cqw .9cqw; border-radius:99px; }
.agcon__live i { width:.6cqw; height:.6cqw; border-radius:50%; background:var(--kit-fox-400); animation:agpulse2 1.4s ease-in-out infinite; }
@keyframes agpulse2 { 0%,100%{ opacity:1;} 50%{ opacity:.25;} }
.agcon__body { flex:1; padding:1.4cqw; display:flex; flex-direction:column; gap:1cqw; justify-content:center; }
.agcon__plan { font-family:var(--font-mono); font-size:1.18cqw; color:#fff; display:flex; align-items:center; gap:.7cqw; }
.agcon__caret { color:var(--kit-fox-400); }
.agcon__step { margin-left:auto; font-size:.92cqw; color:rgba(255,255,255,.45); }
.agcon__tool { display:flex; align-items:center; gap:.9cqw; font-family:var(--font-mono); font-size:1.04cqw; color:rgba(255,255,255,.82); }
.agcon__k { font-size:.78cqw; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.16); padding:.3cqw .6cqw; border-radius:.5cqw; }
.agcon__call { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agcon__tag { font-size:.82cqw; letter-spacing:.06em; text-transform:uppercase; color:#7fd8a6; border:1px solid rgba(95,196,139,.3); background:rgba(95,196,139,.1); padding:.3cqw .7cqw; border-radius:99px; }
.agcon__tag--run { color:var(--kit-fox-300); border-color:rgba(238,77,31,.32); background:rgba(238,77,31,.1); }
.agcon__tool.is-run .agcon__tag--run::before { content:""; display:inline-block; width:.55cqw; height:.55cqw; border-radius:50%; background:var(--kit-fox-400); margin-right:.45cqw; vertical-align:middle; animation:agpulse2 1.1s ease-in-out infinite; }
.agcon__think { font-family:var(--font-sans); font-size:1.02cqw; line-height:1.5; color:rgba(255,255,255,.62); border-left:.2cqw solid var(--kit-fox-500); padding-left:1cqw; }
.agcon__think-k { font-family:var(--font-mono); font-size:.78cqw; letter-spacing:.12em; text-transform:uppercase; color:var(--kit-fox-300); margin-right:.6cqw; }
.agcon__stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.09); }
.agcon__stats div { padding:1.1cqw 1.4cqw; border-right:1px solid rgba(255,255,255,.07); }
.agcon__stats div:last-child { border-right:0; }
.agcon__stats b { display:block; font-family:var(--font-display); font-weight:600; font-size:1.9cqw; line-height:1; color:#fff; }
.agcon__stats span { font-family:var(--font-mono); font-size:.8cqw; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.42); }

.agentrun .reveal { opacity:0; transform:translateY(2.6cqw); transition:opacity .7s var(--ease-kinetic), transform .7s var(--ease-kinetic); }
.chapter.is-in .agentrun .reveal { opacity:1; transform:none; }
.chapter.is-in .agentrun .reveal[data-d="1"] { transition-delay:.16s; }

/* floating glass UI chips */
.agfloat { position:absolute; z-index:6; display:inline-flex; align-items:center; gap:.7cqw; padding:.72cqw 1.1cqw; border-radius:99px; font-family:var(--font-mono); font-size:.95cqw; letter-spacing:.02em; color:#fff; white-space:nowrap; background:linear-gradient(135deg, rgba(58,40,96,.62), rgba(20,14,36,.62)); backdrop-filter:blur(12px) saturate(1.15); -webkit-backdrop-filter:blur(12px) saturate(1.15); border:1px solid rgba(173,140,255,.26); box-shadow:0 1.2cqw 2.8cqw rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); opacity:0; }
.chapter.is-in .agfloat { opacity:1; transition:opacity .8s var(--ease-kinetic); animation:agdrift 7s var(--ease-in-out) infinite; }
.chapter.is-in .agfloat--auto { transition-delay:.5s; }
.chapter.is-in .agfloat--hitl { transition-delay:.66s; animation-delay:-2.4s; animation-duration:8s; }
.chapter.is-in .agfloat--metric { transition-delay:.8s; animation-delay:-4s; animation-duration:6.4s; }
@keyframes agdrift { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.1cqw); } }

.agfloat--auto  { top:1.1cqw; right:2.4cqw; }
.agfloat--hitl  { bottom:1.4cqw; left:2.2cqw; color:#bfa6ff; }
.agfloat--hitl svg { width:1.15cqw; height:1.15cqw; color:#8b5cf6; }
.agfloat--metric { top:0.7cqw; left:25cqw; }

.agfloat__label { color:rgba(255,255,255,.78); }
.agfloat__toggle { width:2.1cqw; height:1.15cqw; border-radius:99px; background:var(--kit-fox-500); position:relative; box-shadow:0 0 .8cqw rgba(238,77,31,.5); }
.agfloat__toggle i { position:absolute; top:50%; right:.18cqw; transform:translateY(-50%); width:.85cqw; height:.85cqw; border-radius:50%; background:#fff; }
.agfloat__on { font-size:.78cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--kit-fox-300); }
.agfloat__spark { display:inline-flex; align-items:flex-end; gap:.22cqw; height:1.3cqw; }
.agfloat__spark i { width:.28cqw; border-radius:99px; background:#a78bfa; }
.agfloat__spark i:nth-child(1){ height:35%; } .agfloat__spark i:nth-child(2){ height:60%; } .agfloat__spark i:nth-child(3){ height:45%; } .agfloat__spark i:nth-child(4){ height:80%; } .agfloat__spark i:nth-child(5){ height:100%; }
.agfloat--metric b { color:#fff; font-family:var(--font-display); font-weight:600; font-size:1.3cqw; }
.agfloat__sub { color:rgba(255,255,255,.55); font-size:.85cqw; }

@media (max-width:680px){
  .agentrun { flex-direction:column; gap:3cqw; padding:3.6cqw; }
  .agpipe { flex-direction:row; flex-wrap:wrap; gap:2cqw; }
  .agpipe__s { min-height:auto; padding-left:2.6cqw; flex:1 1 40%; }
  .agpipe__s::before { display:none; }
}
@media (prefers-reduced-motion:reduce){
  .agpipe__s.is-active::after, .agcon__live i, .agcon__tool.is-run .agcon__tag--run::before { animation:none; }
  .chapter.is-in .agfloat { animation:none; }
}

@media (prefers-reduced-motion:reduce){
  .chapter__k, .chapter__year, .chapter__title, .chapter__body { opacity:1; transform:none; }
  .chapter__visual { opacity:1; clip-path:none; }
  .os-cue i::after, .ch-anim__grid, .ch-ooda__sweep, .ch-ooda__node b::before { animation:none; }
  .ch-journey__w { opacity:1; transform:none; animation:none; }
  .ch-fads__x { position:relative; right:auto; display:inline-block; margin:.2em .6em; opacity:1; transform:none; animation:none; }
  .ch-fads__x i { transform:scaleX(1); animation:none; }
  .ch-fads { position:absolute; inset:0; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; padding:8%; }
}

/* ---- cinematic full-bleed statement ---- */
.os-statement { background:var(--kit-ink); color:#fff; position:relative; overflow:hidden; }
.os-statement__grid { position:absolute; inset:0; background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 72%); mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 72%); }
.os-statement__inner { position:relative; z-index:1; max-width:1000px; margin:0 auto; text-align:center; }
.os-statement__lead { font-family:var(--font-sans); font-size:clamp(15px,1.6vw,18px); color:var(--kit-slate-400); max-width:62ch; margin:0 auto clamp(28px,4vw,44px); line-height:1.6; }
.os-statement blockquote { margin:0; padding:0; border:0; font-family:var(--font-display); font-size:clamp(28px,4.2vw,58px); line-height:1.08; letter-spacing:-.02em; color:#fff; }

/* ============================================================
   TWEAKS — three expressive levers (set via data-attrs on <html>)
   tempo (motion), scale (type drama), mood (color arc).
   All variable-driven so a single switch cascades sitewide.
   ============================================================ */
:root{ --story-reveal:1; --story-loop:1; --story-parallax:1; --story-year-scale:1; }
[data-tempo="measured"]{ --story-reveal:1.55; --story-loop:1.5; --story-parallax:.45; }
[data-tempo="kinetic"]  { --story-reveal:.58; --story-loop:.66; --story-parallax:1.7; }
[data-scale="editorial"]  { --story-year-scale:.72; }
[data-scale="monumental"] { --story-year-scale:1.26; }

/* tempo → reveal timing (text + visual clip-open) */
.chapter__k, .chapter__year, .chapter__title, .chapter__body { transition-duration: calc(.8s * var(--story-reveal)); }
.chapter__visual { transition-duration: calc(1s * var(--story-reveal)), calc(1.1s * var(--story-reveal)); }
/* tempo → ambient loop speeds */
.ch-anim__grid   { animation-duration: calc(20s * var(--story-loop)); }
.ch-journey__w   { animation-duration: calc(12s * var(--story-loop)); }
.ch-fads__x, .ch-fads__x i { animation-duration: calc(var(--d,14s) * var(--story-loop)); }
.ch-ooda__sweep  { animation-duration: calc(6s * var(--story-loop)); }
.ch-ooda__node b::before { animation-duration: calc(5s * var(--story-loop)); }

/* type drama → the monumental years + chapter titles */
.chapter__year  { font-size: calc(clamp(58px,14vw,184px) * var(--story-year-scale)); }
.chapter__title { font-size: calc(clamp(26px,3.4vw,46px) * var(--story-year-scale)); }

/* mood → color arc (scoped to main content so nav/footer keep brand) */
#top[data-mood], [data-mood] #top { } /* anchor */
[data-mood="heat"] #top { --kit-electric-400:#f5a23c; --kit-fox-400:#ff7a45; }
[data-mood="heat"] .chapter--c .chapter__tint { background:linear-gradient(120deg, rgba(11,13,18,.30), transparent 54%), radial-gradient(70% 120% at 82% 0%, rgba(238,77,31,.34), transparent 60%); }
[data-mood="heat"] .chapter--d .chapter__tint { background:linear-gradient(120deg, rgba(11,13,18,.42), transparent 56%), radial-gradient(80% 120% at 50% 100%, rgba(245,140,50,.30), transparent 64%); }
[data-mood="heat"] .ch-ooda__sweep { background:conic-gradient(from 0deg, rgba(245,140,50,0) 0deg, rgba(245,140,50,.06) 200deg, rgba(238,77,31,.55) 340deg, rgba(238,77,31,0) 360deg); }

[data-mood="mono"] #top { --kit-fox-500:#3c4150; --kit-fox-400:#5d6473; --kit-electric-400:#8a919f; }
[data-mood="mono"] .chapter--a .chapter__tint { background:linear-gradient(120deg, rgba(11,13,18,.46), transparent 58%); }
[data-mood="mono"] .chapter--c .chapter__tint { background:linear-gradient(120deg, rgba(11,13,18,.42), transparent 56%); }
[data-mood="mono"] .chapter--d .chapter__tint { background:linear-gradient(120deg, rgba(11,13,18,.46), transparent 58%); }
[data-mood="mono"] .ch-ooda__sweep { background:conic-gradient(from 0deg, rgba(150,156,168,0) 0deg, rgba(150,156,168,.06) 200deg, rgba(150,156,168,.5) 340deg, rgba(150,156,168,0) 360deg); }
[data-mood="mono"] .ch-ooda__node b::before { background:#6b7280; box-shadow:0 0 0 5px rgba(120,126,138,.14), 0 0 18px 2px rgba(120,126,138,.4); }