/* ==========================================================================
   A22 — /ai page. Motion layer on top of the locked design system (site.css).
   Adds no new colours and no new typefaces: only depth, texture and movement.
   ========================================================================== */

:root{
  --ai-ease:cubic-bezier(.16,1,.3,1);           /* long, expensive-feeling ease-out */
  --ai-ease-io:cubic-bezier(.76,0,.24,1);
}

/* Smooth-scroll wrapper: body height is driven by JS, content is translated. */
html.ai-smooth, html.ai-smooth body{overflow:visible;}
html.ai-smooth body{background:var(--green);}
#scroll-content{will-change:transform;}

/* ===== Fixed texture + vignette. The grain is what stops a dark page
   from reading as flat/cheap. Tile is generated once on a canvas. ===== */
#grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;
  background-repeat:repeat;mix-blend-mode:overlay;}
#vignette{position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.5) 100%);}

/* ===== Progress hairline ===== */
#progress{position:fixed;top:0;left:0;height:1px;z-index:70;width:0;
  background:var(--cream);opacity:.5;}

/* ===== Line-mask reveal. Each line sits in an overflow-hidden box and rises. ===== */
.reveal-line{display:block;overflow:hidden;}
.reveal-line > span{display:block;transform:translateY(115%);
  transition:transform 1.15s var(--ai-ease);}
.is-in .reveal-line > span{transform:translateY(0);}
.reveal-line:nth-child(2) > span{transition-delay:.08s;}
.reveal-line:nth-child(3) > span{transition-delay:.16s;}
.reveal-line:nth-child(4) > span{transition-delay:.24s;}

/* generic fade-rise for blocks */
.fx{opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--ai-ease), transform 1.1s var(--ai-ease);}
.is-in.fx, .is-in .fx{opacity:1;transform:none;}
.fx-d1{transition-delay:.09s;} .fx-d2{transition-delay:.18s;}
.fx-d3{transition-delay:.27s;} .fx-d4{transition-delay:.36s;}

/* ===== HERO ===== */
.ai-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;padding:0 var(--pad);overflow:hidden;}
.ai-hero .eyebrow{font-family:var(--font-body);font-weight:700;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cream-faint);margin-bottom:34px;}
.ai-hero h1{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(2.9rem,10.5vw,10rem);line-height:.92;letter-spacing:-.015em;
  color:var(--cream);max-width:16ch;}
.ai-hero .sub{margin-top:40px;max-width:44ch;font-weight:300;font-size:clamp(1rem,1.3vw,1.15rem);
  color:var(--cream-soft);}
.scroll-cue{position:absolute;left:var(--pad);bottom:38px;display:flex;align-items:center;gap:12px;
  font-family:var(--font-body);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-faint);}
.scroll-cue i{display:block;width:52px;height:1px;background:var(--cream-faint);
  position:relative;overflow:hidden;}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--cream);
  transform:translateX(-100%);animation:cue 2.4s var(--ai-ease-io) infinite;}
@keyframes cue{0%{transform:translateX(-100%);}55%,100%{transform:translateX(100%);}}

/* ===== Big editorial statement ===== */
.statement{padding:clamp(90px,16vh,180px) 0;}
.statement p{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,4.6vw,3.6rem);line-height:1.16;letter-spacing:-.01em;
  color:var(--cream);max-width:26ch;}
.statement .tail{font-family:var(--font-body);font-style:normal;font-size:clamp(.95rem,1.2vw,1.08rem);
  font-weight:300;color:var(--cream-soft);max-width:48ch;margin-top:34px;line-height:1.6;}

/* ===== STICKY CAPABILITIES — the showpiece ===== */
.caps{position:relative;}
.caps-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(30px,6vw,90px);}
.caps-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;}
.caps-index{font-family:var(--font-display);font-size:clamp(5rem,15vw,13rem);line-height:.8;
  color:var(--cream);position:relative;height:1em;}
.caps-index span{position:absolute;inset:0;opacity:0;transform:translateY(38%);
  transition:opacity .55s var(--ai-ease), transform .7s var(--ai-ease);}
.caps-index span.on{opacity:1;transform:none;}
.caps-index span.out{opacity:0;transform:translateY(-38%);}
.caps-sticky .label{font-family:var(--font-body);font-weight:700;font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream-faint);margin-bottom:28px;}
.caps-sticky .of{font-family:var(--font-body);font-size:.72rem;letter-spacing:.14em;
  color:var(--cream-faint);margin-top:26px;}

.caps-list{padding:12vh 0;}
.cap{min-height:78svh;display:flex;flex-direction:column;justify-content:center;
  border-top:1px solid var(--cream-line);padding:44px 0;}
.cap:last-child{border-bottom:1px solid var(--cream-line);}
.cap h3{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.55rem,3.5vw,2.7rem);line-height:1.14;color:var(--cream);max-width:22ch;}
.cap p{margin-top:22px;font-weight:300;font-size:clamp(.95rem,1.15vw,1.06rem);
  line-height:1.62;color:var(--cream-soft);max-width:46ch;}
.cap .n{font-family:var(--font-body);font-weight:700;font-size:.62rem;letter-spacing:.2em;
  color:var(--cream-faint);margin-bottom:20px;}

/* ===== PROCESS ===== */
.steps{display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--cream-line);border:1px solid var(--cream-line);margin-top:56px;}
@media (min-width:1120px){ .steps{grid-template-columns:repeat(4,1fr);} }
@media (max-width:560px){ .steps{grid-template-columns:1fr;} }
.step{background:var(--green);padding:38px 32px 44px;transition:background .5s var(--ai-ease);}
.bg-gray .step{background:var(--gray);}
.step:hover{background:rgba(245,244,240,.055);}
.step .n{font-family:var(--font-body);font-weight:700;font-size:.62rem;letter-spacing:.2em;
  color:var(--cream-faint);margin-bottom:26px;}
.step h4{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:1.32rem;
  color:var(--cream);margin-bottom:14px;}
.step p{font-weight:300;font-size:.93rem;line-height:1.6;color:var(--cream-soft);}

/* ===== MARQUEE (stack) ===== */
.marquee{overflow:hidden;padding:26px 0;border-top:1px solid var(--cream-line);
  border-bottom:1px solid var(--cream-line);margin-top:52px;}
.marquee + .marquee{border-top:none;margin-top:0;}
.marquee-track{display:flex;width:max-content;will-change:transform;
  animation:mq 34s linear infinite;}
.marquee.rev .marquee-track{animation-direction:reverse;}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-track span{font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.2rem,2.4vw,2rem);color:var(--cream);opacity:.82;
  padding:0 clamp(18px,2.4vw,38px);white-space:nowrap;}
.marquee-track span::after{content:"·";margin-left:clamp(18px,2.4vw,38px);color:var(--cream-faint);}

/* ===== NOT ===== */
.nots{margin-top:52px;display:flex;flex-direction:column;}
.not{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,54px);align-items:baseline;
  padding:30px 0;border-top:1px solid var(--cream-line);}
.nots .not:last-child{border-bottom:1px solid var(--cream-line);}
.not .x{font-family:var(--font-body);font-size:.8rem;color:var(--cream-faint);}
.not h4{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,2vw,1.6rem);color:var(--cream);}
.not p{font-family:var(--font-body);font-style:normal;font-weight:300;font-size:.95rem;
  color:var(--cream-soft);margin-top:8px;line-height:1.58;max-width:46ch;}

/* ===== CTA ===== */
.ai-cta{min-height:92svh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:0 var(--pad);}
.ai-cta h2{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(2.1rem,7vw,6rem);line-height:1.02;letter-spacing:-.015em;
  color:var(--cream);
  /* width:100% is required: inside a centred flex column the heading would
     shrink to fit-content, and the line-splitter would then measure a tiny box
     and break every word onto its own line. */
  width:100%;max-width:22ch;margin:0 auto;}
.ai-cta .lead{margin:34px auto 52px;}
.mail{position:relative;display:inline-block;font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.15rem,2.4vw,2rem);color:var(--cream);text-decoration:none;
  padding:6px 2px;will-change:transform;}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--cream);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ai-ease);}
.mail:hover::after{transform:scaleX(1);}

@media (max-width:860px){
  .caps-grid{grid-template-columns:1fr;gap:0;}
  .caps-sticky{position:relative;height:auto;padding:8vh 0 4vh;}
  .caps-index{height:auto;font-size:clamp(3.4rem,18vw,6rem);}
  .caps-index span{position:relative;opacity:1;transform:none;display:none;}
  .caps-index span.on{display:block;}
  .caps-list{padding:0 0 6vh;}
  .cap{min-height:auto;padding:34px 0;}
}

/* ===== Motion off: everything lands in its final state, nothing moves. ===== */
@media (prefers-reduced-motion:reduce){
  .reveal-line > span{transform:none!important;transition:none!important;}
  .fx{opacity:1!important;transform:none!important;transition:none!important;}
  .caps-index span{opacity:0;} .caps-index span.on{opacity:1;transform:none;}
  .marquee-track{animation:none!important;}
  .scroll-cue i::after{animation:none!important;}
  #grain{display:none;}
}

/* ==========================================================================
   FOG — sits behind all content, grows with scroll.
   Textures are canvas-generated at runtime; only transform/opacity animate.
   ========================================================================== */
#fog{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.fog-streak{position:absolute;left:-12%;width:124%;
  background-repeat:no-repeat;background-size:100% 100%;
  will-change:transform,opacity;transform-origin:50% 50%;opacity:0;}
.fog-cloud{position:absolute;left:-14%;bottom:-6%;width:128%;height:40vh;
  background-repeat:no-repeat;background-size:100% 100%;
  background-position:bottom center;
  will-change:transform,opacity;transform-origin:50% 100%;opacity:0;}

/* content must sit above the fog */
.topbar, section, footer.site{position:relative;z-index:4;}
#grain,#vignette{z-index:6;}
#progress{z-index:8;}

/* ==========================================================================
   AGENTS — engraved automata that appear and leave with the scroll.
   ========================================================================== */
.agent{position:absolute;z-index:2;pointer-events:none;
  width:clamp(150px,20vw,280px);
  opacity:0;transition:opacity 1.15s var(--ai-ease);}
.agent.in{opacity:.9;}
.agent > div{will-change:transform;transition:transform .1s linear;}
.agent svg{width:100%;height:auto;display:block;}

/* placements — kept clear of the text columns */
.agent-01{top:6%;right:3%;}
.agent-02{top:34%;left:1%;}
.agent-03{top:66%;right:2%;}

/* the sticky capability column is the busiest area: pull agents back there */
.caps .agent{opacity:0;}
.caps .agent.in{opacity:.62;}

@media (max-width:900px){
  .agent{width:clamp(112px,30vw,170px);}
  .agent.in{opacity:.42;}
  .agent-01{top:3%;right:-2%;}
  .agent-02{top:auto;bottom:6%;left:-4%;}
  .agent-03{top:74%;right:-3%;}
}

/* ==========================================================================
   SCROLL-SCALED TYPE
   ========================================================================== */
[data-scale]{display:block;transform-origin:0% 50%;will-change:transform;}
.ai-cta [data-scale]{transform-origin:50% 50%;}

@media (prefers-reduced-motion:reduce){
  #fog{display:none;}
  .agent{opacity:.8!important;}
  .agent > div{transform:none!important;}
  [data-scale]{transform:none!important;}
}

/* The agents bleed past the viewport edge on purpose. Clip the horizontal
   overflow WITHOUT creating a scroll container — `overflow:hidden` here would
   break `position:sticky` on the capabilities column, `overflow-x:clip` does not. */
html, body{overflow-x:clip;}