/* A playhead, a connected workflow and light that follows the reader. */
.cinema-sweep,.cinema-divider,.preset-depth { display:none; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-motion .cinema-word { display:inline-block; overflow:clip; vertical-align:bottom; padding-bottom:.15em; margin-bottom:-.15em; }
  .scroll-motion .cinema-word-inner { display:inline-block; transform-origin:0 100%; }
  .scroll-motion :is(.why-section,.product-section,.studio-section) { position:relative; }
  .scroll-motion .cinema-divider {
    display:block; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
    background:linear-gradient(90deg,transparent,#bbed9740 24%,#e0ffd299 50%,#bbed972e 75%,transparent);
    transform-origin:center; opacity:.65;
  }
  .scroll-motion .studio-section>.cinema-divider { max-width:1180px; width:calc(100% - 48px); margin:auto; }
  .scroll-motion .cinema-sweep { display:block; position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:4; }
  .scroll-motion .cinema-sweep::before {
    content:""; position:absolute; inset:-30% -60%; opacity:0;
    background:linear-gradient(110deg,transparent 36%,#e6ffd909 43%,#e6ffd929 49.5%,#e6ffd900 56%,transparent 64%);
  }
  .scroll-motion .scroll-arrived>.cinema-sweep::before { animation:cinema-scan 2100ms 280ms cubic-bezier(.2,.65,.3,1) both; }
  @keyframes cinema-scan {
    0% { transform:translateX(-65%); opacity:0; }
    18% { opacity:.75; }
    75% { opacity:.45; }
    100% { transform:translateX(65%); opacity:0; }
  }
  @supports (mask-composite:exclude) {
    .scroll-motion .cinema-sweep::after {
      content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
      background:conic-gradient(from var(--scene-angle,-45deg),transparent 0deg 205deg,#9cbe801a 230deg,#d6ffc3a6 270deg,#9cbe801a 310deg,transparent 335deg);
      mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;
      opacity:var(--scene-light,0);
    }
  }
  .scroll-motion .motion-paused .cinema-sweep::before,
  .motion-paused .cinema-sweep::before { animation-play-state:paused!important; }
  @media(min-width:1001px) {
    .scroll-motion .hero-visual { translate:0 calc(var(--hero-exit,0) * -48px); scale:calc(1 - var(--hero-exit,0) * .025); }
    .scroll-motion .hero-main { translate:0 calc(var(--hero-exit,0) * -20px); }
    .scroll-motion .hero-visual:focus-within { translate:none; scale:1; }
  }
  .scroll-motion body::before {
    content:""; position:fixed; inset:0 0 auto; height:2px; z-index:30; pointer-events:none;
    background:linear-gradient(90deg,#689a50,#c5efa8); transform-origin:left;
    transform:scaleX(var(--read-progress,0)); box-shadow:0 0 9px #bbed9740;
  }
  .scroll-motion .workflow-steps { position:relative; padding-top:27px; border-bottom:0; }
  .scroll-motion .workflow-steps::before,
  .scroll-motion .workflow-steps::after {
    content:""; position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none; border-radius:2px;
  }
  .scroll-motion .workflow-steps::before { background:#2c3330; }
  .scroll-motion .workflow-steps::after {
    background:linear-gradient(90deg,#4c6b3f,#bbec98 85%,#ecffdf);
    box-shadow:0 0 12px #bbed9733; transform-origin:left; transform:scaleX(var(--flow-progress,0));
  }
  .scroll-motion .step-number { position:relative; z-index:1; transition:background .35s,color .35s,box-shadow .35s; }
  .scroll-motion .workflow-steps h3 { color:#a8b2a8; transition:color .4s; }
  .scroll-motion .flow-reached h3 { color:#f0f6e9; }
  .scroll-motion .flow-reached .step-number {
    background:#bbed97; color:#1b2817; box-shadow:0 0 0 5px #bbed9708,0 0 20px #bbed9720;
  }
  .scroll-motion :is(.hero-stage,.preset-showcase,.gallery-frame,.caption-workbench) { position:relative; isolation:isolate; }
  .scroll-motion :is(.hero-stage,.preset-showcase,.gallery-frame,.caption-workbench)::before {
    content:""; position:absolute; top:0; left:2%; width:36%; height:2px; border-radius:100%;
    background:linear-gradient(90deg,transparent,#d6ffc0,transparent); z-index:3; pointer-events:none;
    transform:translateX(calc(var(--scene-progress,0) * 165%)); opacity:var(--scene-light,0);
    box-shadow:0 3px 15px #bbed9755;
  }
  .scroll-motion :is(.hero-stage,.preset-showcase,.gallery-frame,.caption-workbench)::after {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
    box-shadow:inset 0 1px 0 #bbed9760,inset 0 0 45px #bbed9708,0 10px 55px #99d56b10;
    opacity:var(--scene-light,0);
  }
  .scroll-motion .preset-showcase { background:radial-gradient(ellipse at 90% 0%,#314329 0%,#1a1d1e 65%); }
  .scroll-motion .preset-showcase-heading>svg { transition:stroke .6s,filter .6s; }
  .scroll-motion .scene-on .preset-showcase-heading>svg { stroke:#c6edae; filter:drop-shadow(0 0 6px #bbed9740); }
  .scroll-motion .preset-caption-sample mark { position:relative; overflow:hidden; isolation:isolate; }
  .scroll-motion .preset-caption-sample mark::after {
    content:""; position:absolute; inset:-15% -50%; pointer-events:none;
    background:linear-gradient(110deg,transparent 32%,#ffffffbd 48%,transparent 64%);
    transform:translateX(-100%); opacity:0;
  }
  .scroll-motion .scroll-arrived .preset-caption-sample mark::after {
    animation:preset-light-pass 1.3s .4s cubic-bezier(.22,.7,.35,1) both;
  }
  .motion-paused .preset-caption-sample mark::after { animation-play-state:paused!important; }
  @keyframes preset-light-pass {
    0% { transform:translateX(-70%); opacity:0; }
    20%,80% { opacity:.75; }
    100% { transform:translateX(70%); opacity:0; }
  }
  @media (max-width:760px) {
    .scroll-motion .workflow-steps { padding:0; }
    .scroll-motion .workflow-steps li,
    .scroll-motion .workflow-steps li:first-child,
    .scroll-motion .workflow-steps li:last-child { padding:16px 0; border:0; }
    .scroll-motion .workflow-steps::before,
    .scroll-motion .workflow-steps::after { left:15px; right:auto; top:32px; bottom:32px; width:2px; height:auto; }
    .scroll-motion .workflow-steps::after {
      background:linear-gradient(#4c6b3f,#bbec98 85%,#ecffdf);
      transform-origin:top; transform:scaleY(var(--flow-progress,0));
    }
  }
}
@media print {
  .scroll-motion * { opacity:1!important; translate:none!important; scale:1!important; }
  .scroll-motion body::before,
  .scroll-motion .cinema-sweep,.scroll-motion .cinema-divider,
  .scroll-motion :is(.workflow-steps,.hero-stage,.preset-showcase,.gallery-frame,.caption-workbench)::before,
  .scroll-motion :is(.workflow-steps,.hero-stage,.preset-showcase,.gallery-frame,.caption-workbench)::after,
  .scroll-motion .preset-caption-sample mark::after { display:none!important; }
}

/* A stable navigation surface: no height change when it docks. */
html { scroll-padding-top:118px; }
.skip:focus { position:fixed; top:12px; z-index:100; color:#15200f; border-radius:8px; }
header.nav {
  position:sticky; top:12px; z-index:26; width:min(1220px,calc(100% - 40px));
  min-height:76px; margin:12px auto 0; padding:14px 20px; border:1px solid transparent;
  border-radius:18px; background:#101112f5; gap:24px;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
header.nav.nav-scrolled {
  background:#171b1af5; border-color:#39443d;
  box-shadow:0 12px 36px #0005,inset 0 1px 0 #ffffff06;
}
header.nav nav { position:relative; isolation:isolate; gap:4px; }
header.nav nav::before {
  content:""; position:absolute; inset:0 auto 0 0; width:var(--nav-width,0px);
  transform:translateX(var(--nav-x,0px)); border:1px solid #bbec9824; border-radius:9px;
  background:#bbed9711; opacity:0; pointer-events:none;
  transition:transform .4s cubic-bezier(.2,.8,.3,1),width .4s,opacity .25s;
}
header.nav nav.has-current::before { opacity:1; }
header.nav nav a { position:relative; z-index:1; padding:10px 13px; white-space:nowrap; transition:color .2s; }
header.nav nav a:hover { text-decoration:none; color:#e4f5d9; }
header.nav nav a[aria-current] { color:#d4efc1; }
header.nav a:focus-visible { outline-color:#bbed97; outline-offset:3px; }
header.nav .button.small { border-color:#445044; background:#ffffff03; min-height:42px; }
header.nav .button.small:hover { background:#bbed970f; border-color:#7c986b; }
@supports (backdrop-filter:blur(14px)) {
  header.nav.nav-scrolled { background:#171b1ae8; backdrop-filter:blur(14px); }
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .scroll-motion :is(.hero-stage,.preset-showcase,.gallery-frame)::after {
    background:radial-gradient(320px circle at var(--pointer-x,50%) var(--pointer-y,50%),#c9f8a800,transparent 70%);
    transition:background .18s;
  }
  .scroll-motion :is(.hero-stage,.preset-showcase,.gallery-frame).pointer-lit::after {
    background:radial-gradient(320px circle at var(--pointer-x,50%) var(--pointer-y,50%),#c9f8a81a,transparent 70%);
  }
  .scroll-motion .preset-showcase {
    transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    transition:transform .4s cubic-bezier(.2,.8,.3,1);
  }
  .scroll-motion .preset-showcase.pointer-lit { transition-duration:.18s; }
  .scroll-motion .preset-demo-card { box-shadow:0 8px 24px #0002; }
  .scroll-motion .hero-actions .button.primary:hover { box-shadow:0 6px 26px #bbed9725; }
}
@media(min-width:761px) and (max-width:1000px) {
  header.nav { padding:13px 16px; gap:12px; }
  header.nav nav { gap:0; }
  header.nav nav a { padding:10px 9px; font-size:13px; }
}
@media(max-width:760px) {
  html { scroll-padding-top:99px; }
  header.nav { top:8px; min-height:66px; width:calc(100% - 24px); margin-top:8px; padding:10px 12px; border-radius:14px; gap:10px; }
  header.nav .brand { font-size:24px; }
  header.nav .brand img { width:30px; height:30px; }
  header.nav .button.small { min-height:40px; padding:9px 11px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  header.nav,header.nav nav::before,header.nav nav a { transition:none!important; }
}
@media print { header.nav { position:static; box-shadow:none; backdrop-filter:none; } }

/* Three scroll-controlled reveals. Their layout stays fixed; controls settle on approach. */
@media (min-width:1001px) and (min-height:650px) and (prefers-reduced-motion:no-preference) {
  .scroll-motion .reel-scene {
    --reel-remaining:0;
    transform-origin:50% 38%;
    transform:perspective(1600px) translate3d(0,calc(var(--reel-remaining) * 72px),0) rotateX(calc(var(--reel-remaining) * 9deg)) rotateY(calc(var(--reel-remaining) * -3deg)) scale(calc(1 - var(--reel-remaining) * .15));
    opacity:calc(1 - var(--reel-remaining) * .38);
    transition:none;
  }
  .scroll-motion .workspace-gallery.reel-scene {
    transform-origin:70% 40%;
    transform:perspective(1600px) translate3d(calc(var(--reel-remaining) * 26px),calc(var(--reel-remaining) * 64px),0) rotateY(calc(var(--reel-remaining) * -12deg)) rotateX(calc(var(--reel-remaining) * 4deg)) scale(calc(1 - var(--reel-remaining) * .14));
  }
  .scroll-motion .caption-workbench.reel-scene {
    transform-origin:50% 20%;
    transform:perspective(1800px) translate3d(0,calc(var(--reel-remaining) * 82px),0) rotateX(calc(var(--reel-remaining) * 12deg)) scale(calc(1 - var(--reel-remaining) * .12));
  }
  .scroll-motion .preset-showcase.reel-scene {
    transform:perspective(1600px) translate3d(0,calc(var(--reel-remaining) * 72px),0) rotateX(calc(var(--reel-remaining) * 9deg + var(--tilt-x,0deg))) rotateY(calc(var(--reel-remaining) * 3deg + var(--tilt-y,0deg))) scale(calc(1 - var(--reel-remaining) * .13));
  }
  .scroll-motion .preset-depth { display:block; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; }
  .scroll-motion .preset-depth::before,.scroll-motion .preset-depth::after {
    content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid #9fb29445;
    background:#171d19; transform-origin:50% 85%;
  }
  .scroll-motion .preset-depth::before {
    transform:translate(calc(var(--reel-remaining) * -32px),calc(8px + var(--reel-remaining) * 21px)) rotate(calc(var(--reel-remaining) * -5deg)) scale(.965);
    opacity:calc(.14 + var(--reel-remaining) * .46);
  }
  .scroll-motion .preset-depth::after {
    transform:translate(calc(var(--reel-remaining) * 25px),calc(5px + var(--reel-remaining) * 9px)) rotate(calc(var(--reel-remaining) * 3deg)) scale(.982);
    opacity:calc(.18 + var(--reel-remaining) * .58);
  }
  .scroll-motion .reel-scene.reel-ready { opacity:1; }
  .scroll-motion .reel-scene.reel-ready:not(.pointer-lit) { transform:none; }
  .scroll-motion .hero-visual { transform:perspective(1700px) rotateX(calc(var(--hero-exit,0) * -5deg)); transform-origin:50% 100%; }
  .scroll-motion .hero-visual:focus-within { transform:none; }
}
@media print { .preset-depth { display:none!important; } .reel-scene { transform:none!important; opacity:1!important; } }