/* PowerPoint2Vid homepage: hero, deck-to-film scroll story, demo, styles, CTA.
   Uses tokens from styles.css :root only. Motion respects prefers-reduced-motion. */

html { scroll-padding-top: 72px; }
body.home { background: var(--bg); overflow-x: clip; }
.home h1, .home h2, .home .display, .hero2__fill { font-family: var(--font-display); font-optical-sizing: auto; }

/* ---------- header: floats over the dark hero, turns light below it ---------- */
.home .site-header { position: fixed; inset: 0 0 auto; transition: background var(--dur-med), border-color var(--dur-med); }
.home .site-header.is-dark { background: rgb(8 11 34 / 55%); border-bottom-color: rgb(255 255 255 / 8%); }
.home .site-header.is-dark .brand { color: var(--white); }
.home .site-header.is-dark .brand b { color: var(--violet-400); }
.home .site-header.is-dark .nav a { color: var(--ink-300); }
.home .site-header.is-dark .nav a:hover { color: var(--white); }

/* ---------- buttons on dark ---------- */
.btn--dark { background: rgb(255 255 255 / 8%); color: var(--white); border: 1px solid rgb(255 255 255 / 18%); box-shadow: none; }
.btn--dark:hover { background: rgb(255 255 255 / 16%); color: var(--white); }
.btn--lg { min-height: 54px; padding: var(--s-4) var(--s-6); font-size: var(--fs-md); }
.btn .play-ico { width: 18px; height: 18px; }

/* ================= HERO ================= */
.hero2 { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: center;
  padding: calc(64px + var(--s-7)) 0 var(--s-8); background: var(--ink-950); color: var(--white); overflow: hidden; }
.hero2__beam { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 60% at 78% 45%, rgb(109 74 255 / 38%), transparent 70%),
    radial-gradient(30% 35% at 92% 8%, rgb(255 107 74 / 22%), transparent 70%),
    conic-gradient(from 200deg at 100% 0%, transparent 0deg, rgb(143 117 255 / 14%) 18deg, transparent 40deg); }
.hero2__grain { position: absolute; inset: -50%; z-index: -1; opacity: .07; pointer-events: none;
  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");
  animation: grain 1s steps(3) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } }

.hero2__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.hero2__copy { position: relative; z-index: 2; }

/* Headline: lines build in like slide animations, then a playhead "renders" outline type into solid type */
.title-wrap { position: relative; margin: 0 0 var(--s-5); }
.hero2__title, .hero2__fill { font-size: var(--fs-display); line-height: .92; letter-spacing: -0.045em; font-weight: 800; margin: 0; max-width: none; font-variation-settings: "wdth" 92; letter-spacing: -0.035em; }
.hero2__title { color: transparent; -webkit-text-stroke: 1.5px rgb(170 176 212 / 55%); }
.hero2__fill { position: absolute; inset: 0; color: var(--white); clip-path: inset(0 100% 0 0); animation: render 1.5s var(--ease-out) 1.05s forwards; pointer-events: none; }
.t-line { display: block; overflow: hidden; padding-bottom: .06em; }
.t-line > span { display: inline-block; transform: translateY(105%); animation: build-in .9s var(--ease-out) forwards; }
.t-line:nth-child(2) > span { animation-delay: .12s; }
.t-line:nth-child(3) > span { animation-delay: .24s; }
.t-line .hl { color: var(--violet-400); }
.hero2__title .t-line .hl { -webkit-text-stroke-color: rgb(143 117 255 / 70%); color: transparent; }
@keyframes build-in { to { transform: none; } }
@keyframes render { to { clip-path: inset(0 0 0 0); } }

.playhead { position: absolute; top: -6%; bottom: -4%; left: 0; width: 2px; background: var(--coral-500); box-shadow: 0 0 18px 2px rgb(255 107 74 / 70%); opacity: 0;
  animation: sweep 1.5s var(--ease-out) 1.05s forwards; pointer-events: none; }
.playhead::before { content: ""; position: absolute; top: -10px; left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 3px 3px 50% 50%; background: var(--coral-500); }
@keyframes sweep { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.hero2__lede { font-size: var(--fs-lg); line-height: 1.5; color: var(--ink-300); max-width: 34ch; margin: 0 0 var(--s-6);
  opacity: 0; animation: rise .8s var(--ease-out) 1.6s forwards; }
.hero2__lede strong { color: var(--white); font-weight: 600; }
.hero2__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); opacity: 0; animation: rise .8s var(--ease-out) 1.75s forwards; }
.hero2__ctas .btn--accent { box-shadow: 0 12px 34px -10px rgb(255 107 74 / 70%); }
.hero2__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; padding: 0; margin: var(--s-6) 0 0; font-size: var(--fs-sm); color: var(--ink-300);
  opacity: 0; animation: rise .8s var(--ease-out) 1.9s forwards; }
.hero2__facts li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero2__facts svg { width: 16px; height: 16px; color: var(--mint-500); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Deck: a 3D stack of slides being dealt onto the stage, tilts with the pointer */
.deck { --rx: 0deg; --ry: 0deg; position: relative; aspect-ratio: 4 / 3.2; perspective: 1400px; z-index: 1; }
.deck__rig { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(10deg + var(--rx))) rotateY(calc(-22deg + var(--ry))) rotateZ(2deg);
  transition: transform .5s var(--ease-out); animation: float 7s ease-in-out 2.4s infinite; }
@keyframes float { 50% { translate: 0 -10px; } }
.deck__card { --i: 0; position: absolute; left: 4%; top: 8%; width: 84%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  transform: translate3d(calc(var(--i) * 7%), calc(var(--i) * -9%), calc(var(--i) * -70px));
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 8%);
  opacity: 0; animation: deal .9s var(--ease-out) forwards; animation-delay: calc(.35s + (3 - var(--i)) * .14s); }
.deck__card:nth-child(1) { --i: 0; } .deck__card:nth-child(2) { --i: 1; } .deck__card:nth-child(3) { --i: 2; } .deck__card:nth-child(4) { --i: 3; }
.deck__card:nth-child(n+2) { filter: brightness(.72) saturate(.8); }
@keyframes deal { from { opacity: 0; transform: translate3d(calc(var(--i) * 7% + 30%), 60%, 120px) rotateZ(14deg); } to { opacity: 1; } }

/* mini slide content (shared by deck + story) */
.ms { position: absolute; inset: 0; padding: 7% 8%; display: flex; flex-direction: column; gap: 6%; background: var(--white); color: var(--ink-900); font-family: var(--font-sans); }
.ms--violet { background: linear-gradient(140deg, var(--violet-600), var(--violet-400)); color: var(--white); }
.ms--ink { background: var(--ink-800); color: var(--white); }
.ms--paper { background: var(--paper-100); }
.ms__kicker { font-size: clamp(8px, 1.1vw, 12px); font-weight: 700; color: var(--violet-500); }
.ms--violet .ms__kicker, .ms--ink .ms__kicker { color: rgb(255 255 255 / 75%); }
.ms__title { font: 800 clamp(14px, 2.3vw, 28px)/1.05 var(--font-display); letter-spacing: -0.03em; margin: 0; }
.ms__lines { display: grid; gap: 7px; }
.ms__lines i { display: block; height: 7px; border-radius: 4px; background: currentColor; opacity: .16; }
.ms__lines i:nth-child(2) { width: 82%; } .ms__lines i:nth-child(3) { width: 64%; }
.ms__bars { display: flex; align-items: flex-end; gap: 6%; flex: 1; padding-top: 4%; }
.ms__bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--violet-400); height: var(--h); }
.ms__bars i:last-child { background: var(--coral-500); }
.ms__big { font: 800 clamp(26px, 5vw, 60px)/1 var(--font-display); letter-spacing: -0.05em; margin-top: auto; }

/* top card plays: elements build in after the deal */
.deck__card:first-child .ms > * { opacity: 0; transform: translateY(12px); animation: rise .7s var(--ease-out) forwards; }
.deck__card:first-child .ms > :nth-child(1) { animation-delay: 1.5s; }
.deck__card:first-child .ms > :nth-child(2) { animation-delay: 1.65s; }
.deck__card:first-child .ms > :nth-child(3) { animation-delay: 1.85s; }
.deck__card:first-child .ms__bars i { transform-origin: bottom; transform: scaleY(0); animation: grow .9s var(--ease-spring) forwards; animation-delay: calc(2s + var(--d, 0s)); }
@keyframes grow { to { transform: none; } }

.deck__cap { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; background: rgb(14 19 48 / 82%); color: var(--white); font-size: clamp(8px, 1.05vw, 12px); font-weight: 600; padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  opacity: 0; animation: rise .5s var(--ease-out) 2.5s forwards; }

/* floating narration chip */
.voice-chip { position: absolute; z-index: 3; right: 2%; bottom: 6%; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  background: rgb(255 255 255 / 8%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgb(255 255 255 / 14%); border-radius: var(--r-pill);
  font-size: var(--fs-xs); color: var(--white); opacity: 0; animation: rise .7s var(--ease-out) 2.2s forwards; }
.voice-chip__dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--coral-500); }
.voice-chip__dot svg { width: 14px; height: 14px; }
.voice-chip b { display: block; font-weight: 700; }
.voice-chip small { color: var(--ink-300); }
.wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.wave i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.25); animation: talk 1.1s ease-in-out infinite; animation-delay: calc(var(--k) * -.13s); }
.wave i:nth-child(1) { --k: 1; } .wave i:nth-child(2) { --k: 4; } .wave i:nth-child(3) { --k: 2; } .wave i:nth-child(4) { --k: 6; } .wave i:nth-child(5) { --k: 3; } .wave i:nth-child(6) { --k: 5; } .wave i:nth-child(7) { --k: 7; }
@keyframes talk { 0%, 100% { transform: scaleY(.25); } 30% { transform: scaleY(1); } 55% { transform: scaleY(.45); } 75% { transform: scaleY(.8); } }

.scroll-cue { position: absolute; left: 50%; bottom: var(--s-5); translate: -50% 0; width: 26px; height: 42px; border: 2px solid rgb(255 255 255 / 25%); border-radius: 14px; opacity: 0; animation: rise .8s var(--ease-out) 2.6s forwards; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--white); animation: cue 1.8s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } }

@media (max-width: 900px) {
  .hero2 { min-height: auto; padding-top: calc(64px + var(--s-6)); }
  .hero2__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .deck { max-width: 520px; width: 100%; margin: 0 auto; order: -1; aspect-ratio: 4 / 2.6; }
  .scroll-cue, .deck__cap { display: none; }
}

/* ================= STORY: deck to film, pinned and scroll-driven ================= */
.story { --p1: 0; --p2: 0; --p3: 0; --p4: 0; position: relative; height: 440vh; background: var(--ink-950); color: var(--white); }
.story__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; overflow: hidden; }
.story__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-7); align-items: center; padding-top: 48px; }
.story h2 { font-size: var(--fs-xl); margin-bottom: var(--s-6); color: var(--white); max-width: 16ch; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); counter-reset: s; }
.steps li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-7); color: var(--ink-500); transition: color var(--dur-med) var(--ease-out); counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: var(--s-3); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / 14%); font-weight: 800; font-size: var(--fs-sm); transition: background var(--dur-med), border-color var(--dur-med), color var(--dur-med); }
.steps li::after { content: ""; position: absolute; left: 15px; top: calc(var(--s-3) + 36px); bottom: -6px; width: 2px; background: rgb(255 255 255 / 8%); }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: var(--fs-lg); margin: 4px 0 var(--s-1); letter-spacing: -0.01em; }
.steps p { margin: 0; font-size: var(--fs-sm); max-width: 38ch; max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--dur-med) var(--ease-out), opacity var(--dur-med); }
.steps li.is-on { color: var(--white); }
.steps li.is-on::before { background: var(--violet-500); border-color: var(--violet-500); color: var(--white); }
.steps li.is-done::before { background: rgb(31 191 143 / 18%); border-color: var(--mint-500); color: var(--mint-500); }
.steps li.is-on p { max-height: 8em; opacity: 1; color: var(--ink-300); }
.story__bar { height: 3px; border-radius: 2px; margin-top: var(--s-6); background: rgb(255 255 255 / 10%); overflow: hidden; max-width: 320px; }
.story__bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--violet-500), var(--coral-500)); }

/* stage */
.stage2 { position: relative; }
.frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: var(--ink-800);
  transform: scale(calc(.94 + var(--p1) * .06)); box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 50px 120px -40px rgb(109 74 255 / calc(var(--p1) * 70%)); }
.frame__drop { position: absolute; inset: 0; border: 2px dashed rgb(170 176 212 / 45%); border-radius: inherit; display: grid; place-items: center; color: var(--ink-300); font-size: var(--fs-sm);
  opacity: calc(1 - var(--p1) * 1.6); }
.frame__screen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; opacity: clamp(0, calc(var(--p1) * 2 - .6), 1); }
.frame .ms { padding: 6% 7%; gap: 5%; }
.frame .ms__title { font-size: clamp(18px, 2.6vw, 34px); }
.frame .ms__lines i { height: 10px; }
/* PowerPoint edit-mode selection boxes, before playback */
.el { position: relative; transition: opacity .5s var(--ease-out), transform .6s var(--ease-spring), filter .5s; }
.el::after { content: ""; position: absolute; inset: -6px; border: 1.5px dashed var(--violet-400); border-radius: 4px; opacity: 0; transition: opacity .3s; }
.story[data-step="0"] .el::after, .story[data-step="1"] .el::after { opacity: .9; }
.story[data-step="2"] .el:not(.is-built), .story[data-step="3"] .el:not(.is-built) { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.ms__bars.el i { transform-origin: bottom; transition: transform .7s var(--ease-spring); transition-delay: calc(var(--n) * 60ms); }
.story[data-step="2"] .ms__bars.el:not(.is-built) i, .story[data-step="3"] .ms__bars.el:not(.is-built) i { transform: scaleY(0); }

/* the falling .pptx file */
.file { position: absolute; z-index: 4; left: 50%; top: 50%; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  border-radius: var(--r-sm); background: var(--white); color: var(--ink-900); font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--shadow-lg);
  transform: translate(-50%, calc(-50% - (1 - var(--p1)) * 240px)) rotate(calc((1 - var(--p1)) * -10deg)) scale(calc(1 - clamp(0, var(--p1) * 2 - 1, 1) * .4));
  opacity: calc(1 - clamp(0, var(--p1) * 2.4 - 1.4, 1)); }
.file__ico { width: 28px; height: 34px; border-radius: 4px; background: var(--coral-500); color: var(--white); display: grid; place-items: end center; padding-bottom: 4px; font-size: 8px; font-weight: 800; }

/* narration: waveform badge on frame */
.narrator { position: absolute; z-index: 3; right: var(--s-3); top: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 12px 6px 8px; border-radius: var(--r-pill);
  background: rgb(14 19 48 / 85%); color: var(--white); font-size: var(--fs-xs); font-weight: 600; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s var(--ease-out); }
.narrator .wave { height: 16px; color: var(--coral-500); }
.narrator .wave i { animation-play-state: paused; }
.story[data-step="1"] .narrator, .story[data-step="2"] .narrator { opacity: 1; transform: none; }
.story[data-step="1"] .narrator .wave i, .story[data-step="2"] .narrator .wave i { animation-play-state: running; }

/* captions */
.cap { position: absolute; z-index: 3; left: 50%; bottom: 9%; translate: -50% 0; max-width: 86%; text-align: center; padding: 6px 14px; border-radius: 8px;
  background: rgb(14 19 48 / 88%); color: var(--white); font-size: clamp(12px, 1.4vw, 16px); font-weight: 600; opacity: 0; transition: opacity .3s; }
.story[data-step="2"] .cap, .story[data-step="3"] .cap { opacity: 1; }

/* video player chrome */
.chrome { position: absolute; z-index: 3; inset: auto 0 0; padding: var(--s-5) var(--s-4) var(--s-3); display: flex; align-items: center; gap: var(--s-3);
  background: linear-gradient(transparent, rgb(8 11 34 / 85%)); color: var(--white); font: 600 var(--fs-xs)/1 var(--font-sans); font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); }
.chrome svg { width: 14px; height: 14px; flex: none; }
.chrome__track { flex: 1; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 25%); position: relative; }
.chrome__track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p4) * 100%); border-radius: inherit; background: var(--coral-500); }
.chrome__track i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--white); }
.rec { position: absolute; z-index: 3; right: var(--s-3); top: var(--s-3); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: rgb(14 19 48 / 85%); font-size: var(--fs-xs); font-weight: 700; opacity: 0; transition: opacity .3s; }
.rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral-500); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.story[data-step="3"] .chrome { opacity: 1; transform: none; }
.story[data-step="3"] .rec { opacity: 1; }
.story[data-step="3"] .cap { bottom: 22%; }
.story[data-step="3"] .frame { box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 50px 140px -30px rgb(255 107 74 / 55%); }

/* below-frame panels (thumbs / notes / export) share one slot */
.below { position: relative; height: 128px; margin-top: var(--s-5); }
.below > * { position: absolute; inset: 0; transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.thumbs { display: flex; gap: var(--s-3); }
.thumbs span { --i: 0; flex: 1; aspect-ratio: 16 / 9; align-self: flex-start; border-radius: 6px; background: var(--paper-100); position: relative; overflow: hidden;
  opacity: clamp(0, calc(var(--p1) * 3 - 1.2 - var(--i) * .25), 1); transform: translateY(calc((1 - clamp(0, calc(var(--p1) * 3 - 1.2 - var(--i) * .25), 1)) * 24px)); }
.thumbs span::before { content: ""; position: absolute; left: 12%; top: 18%; width: 55%; height: 12%; border-radius: 2px; background: var(--ink-700); opacity: .55; }
.thumbs span::after { content: ""; position: absolute; left: 12%; top: 42%; width: 70%; height: 30%; border-radius: 2px; background: var(--violet-400); opacity: .4; }
.thumbs span:first-child { outline: 2px solid var(--violet-400); outline-offset: 2px; }
.thumbs span:nth-child(2) { --i: 1; } .thumbs span:nth-child(3) { --i: 2; } .thumbs span:nth-child(4) { --i: 3; } .thumbs span:nth-child(5) { --i: 4; }
.notes { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 10%); font-size: var(--fs-md); line-height: 1.5; color: var(--ink-500); }
.notes small { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-300); margin-bottom: var(--s-1); }
.notes .w { transition: color .25s; }
.notes .w.is-said { color: var(--white); }
.notes .w.is-now { color: var(--white); background: rgb(109 74 255 / 45%); border-radius: 3px; box-shadow: 0 0 0 2px rgb(109 74 255 / 45%); }
.export { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-sm); background: var(--white); color: var(--ink-900); align-self: start; height: fit-content; }
.export__ico { width: 40px; height: 40px; border-radius: 10px; background: var(--ink-900); display: grid; place-items: center; color: var(--white); flex: none; }
.export__ico svg { width: 18px; height: 18px; }
.export__body { flex: 1; min-width: 0; }
.export__name { font-weight: 700; font-size: var(--fs-sm); display: flex; justify-content: space-between; gap: var(--s-2); }
.export__name span { color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.export__bar { height: 6px; border-radius: 3px; background: var(--paper-200); margin-top: var(--s-2); overflow: hidden; }
.export__bar i { display: block; height: 100%; width: calc(var(--p4) * 100%); background: linear-gradient(90deg, var(--violet-500), var(--coral-500)); }
.export.is-done .export__ico { background: var(--mint-500); }
.export.is-done .export__bar i { background: var(--mint-500); }

.story .below > * { opacity: 0; transform: translateY(14px); pointer-events: none; }
.story[data-step="0"] .thumbs, .story[data-step="1"] .notes, .story[data-step="2"] .notes, .story[data-step="3"] .export { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .story { height: 420vh; }
  .story__grid { grid-template-columns: 1fr; gap: var(--s-4); padding-top: 64px; }
  .story__copy { order: 2; }
  .story h2 { display: none; }
  .steps { display: block; position: relative; min-height: 11.5em; }
  .steps li { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s var(--ease-out); }
  .steps li.is-on { opacity: 1; transform: none; }
  .steps li::after { display: none; }
  .story__bar { margin-top: var(--s-3); }
  .below { height: 112px; margin-top: var(--s-4); }
  .notes { font-size: var(--fs-sm); }
}
@media (max-width: 900px) and (max-height: 700px) { .below { display: none; } }

/* ================= DEMO ================= */
.demo2 { --d: 0; background: var(--ink-950); color: var(--white); padding: var(--s-8) 0 var(--s-9); text-align: center; position: relative; overflow: hidden; }
.demo2::before { content: ""; position: absolute; left: 50%; top: 30%; width: 90%; height: 70%; translate: -50% 0; background: radial-gradient(closest-side, rgb(109 74 255 / 35%), transparent); pointer-events: none; }
.demo2 h2 { color: var(--white); font-size: clamp(2rem, 4.6vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.02; margin: 0 auto var(--s-3); max-width: 18ch; }
.demo2 > .wrap > p { color: var(--ink-300); margin: 0 auto var(--s-6); max-width: 52ch; }
.demo2 .hero-video { position: relative; margin: 0 auto; max-width: min(960px, calc((100svh - 140px) * 16 / 9)); transform: perspective(1600px) rotateX(calc((1 - var(--d)) * 18deg)) scale(calc(.86 + var(--d) * .14)); transform-origin: 50% 100%; }
.demo2 .hero-video .stage { border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgb(255 255 255 / 12%), 0 60px 140px -40px rgb(109 74 255 / 70%); }
.demo2 figcaption { color: var(--ink-300); }
.demo2 figcaption a { color: var(--white); }

/* ================= CONVERTER intro ================= */
.app-head { padding: var(--s-8) 0 0; text-align: center; }
.app-head h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -0.04em; line-height: 1.02; margin: 0 auto var(--s-3); max-width: 20ch; }
.app-head p { color: var(--text-muted); max-width: 52ch; margin: 0 auto; }
.home .app { padding-top: var(--s-6); }
.home .drop { transition: border-color .2s, background .2s, transform .3s var(--ease-spring); }
.home .drop:hover, .home .drop.is-over { transform: scale(1.01); }

/* ================= VIDEO STYLES ================= */
.styles2 { padding: var(--s-8) 0; background: var(--surface); border-block: 1px solid var(--border); }
.styles2 h2 { font-size: var(--fs-xl); }
.styles2 .lead { color: var(--text-muted); margin: 0 0 var(--s-6); max-width: 56ch; }
.sty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
@media (max-width: 860px) { .sty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sty-grid { grid-template-columns: 1fr; } }
.sty { display: flex; flex-direction: column; justify-content: flex-start; appearance: none; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-md); }
.sty__frame { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--border); transition: box-shadow .3s, transform .4s var(--ease-out); }
.sty:hover .sty__frame, .sty:focus-visible .sty__frame { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--primary), var(--shadow-md); }
.sty__name { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-top: var(--s-3); font-weight: 700; }
.sty__name span { font-size: var(--fs-xs); font-weight: 600; color: var(--primary); opacity: 0; transition: opacity .2s; }
.sty:hover .sty__name span, .sty:focus-visible .sty__name span { opacity: 1; }
.sty__in > * { display: block; }
.sty__desc { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.sty__in { position: absolute; inset: 0; padding: 9% 10%; display: flex; flex-direction: column; gap: 9%; }
.sty__t { width: 62%; height: 15%; border-radius: 3px; background: var(--ink-900); }
.sty__l { width: 80%; height: 6%; border-radius: 3px; background: var(--ink-300); }
.sty__l + .sty__l { width: 56%; }
.sty__b { margin-top: auto; width: 38%; height: 24%; border-radius: 4px; background: var(--violet-500); }
.sty__in > * { animation-duration: 1.1s; animation-fill-mode: both; animation-timing-function: var(--ease-out); }
.sty__in > :nth-child(2) { animation-delay: .12s; } .sty__in > :nth-child(3) { animation-delay: .24s; } .sty__in > :nth-child(4) { animation-delay: .36s; }

/* per-style looks + their motion, played on hover, focus, or once on touch screens when in view */
.sty--cinematic .sty__frame { background: var(--ink-900); }
.sty--cinematic .sty__frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, transparent 55%, rgb(0 0 0 / 65%)); }
.sty--cinematic .sty__t { background: var(--white); } .sty--cinematic .sty__l { background: var(--ink-500); } .sty--cinematic .sty__b { background: var(--paper-200); opacity: .3; }
.sty--keynote .sty__frame { background: radial-gradient(80% 90% at 30% 20%, var(--ink-700), var(--ink-950)); }
.sty--keynote .sty__in { inset: 14% 12%; padding: 7% 8%; border-radius: 6px; background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 20%); }
.sty--keynote .sty__t { background: var(--white); } .sty--keynote .sty__l { background: var(--ink-300); } .sty--keynote .sty__b { background: var(--violet-400); }
.sty--ui-springs .sty__frame { background: #ecebe7; }
.sty--ui-springs .sty__b { background: var(--ink-900); border-radius: 999px; width: 30%; }
.sty--kinetic .sty__frame { background: #f2efe6; }
.sty--kinetic .sty__t { background: var(--ink-900); height: 22%; width: 78%; border-radius: 0; box-shadow: 3px 2px 0 var(--coral-500), -2px -1px 0 var(--violet-400); }
.sty--kinetic .sty__l { border-radius: 0; background: var(--ink-900); height: 4%; } .sty--kinetic .sty__b { border-radius: 0; background: var(--coral-500); }
.sty--paper .sty__frame { background: #e9e4d6; }
.sty--paper .sty__in { inset: 10% 12%; background: #fffdf6; box-shadow: 0 6px 14px -6px rgb(0 0 0 / 30%); rotate: -1.5deg; }
.sty--paper .sty__t { position: relative; background: var(--ink-800); }
.sty--paper .sty__t::after { content: ""; position: absolute; left: 0; right: 10%; bottom: -40%; height: 3px; border-radius: 3px; background: var(--coral-500); transform-origin: left; }
.sty--paper .sty__b { background: #fff3a8; height: 18%; rotate: 2deg; border-radius: 2px; }

.sty:is(:hover, :focus-visible, .is-play).sty--clean .sty__in > * { animation-name: s-fade; }
.sty:is(:hover, :focus-visible, .is-play).sty--cinematic .sty__in { animation: s-push 2.4s var(--ease-out) both; }
.sty:is(:hover, :focus-visible, .is-play).sty--cinematic .sty__in > * { animation-name: s-blur; animation-duration: 1.4s; }
.sty:is(:hover, :focus-visible, .is-play).sty--keynote .sty__in { animation: s-glass 1.6s var(--ease-out) both; }
.sty:is(:hover, :focus-visible, .is-play).sty--keynote .sty__in > * { animation-name: s-fade; }
.sty:is(:hover, :focus-visible, .is-play).sty--ui-springs .sty__in > * { animation-name: s-spring; animation-timing-function: var(--ease-spring); animation-duration: .8s; }
.sty:is(:hover, :focus-visible, .is-play).sty--kinetic .sty__in > * { animation-name: s-slam; animation-timing-function: cubic-bezier(.2, 1.4, .4, 1); animation-duration: .45s; }
.sty:is(:hover, :focus-visible, .is-play).sty--paper .sty__in > * { animation-name: s-fade; }
.sty:is(:hover, :focus-visible, .is-play).sty--paper .sty__t::after { animation: s-draw .9s var(--ease-out) .5s both; }
@keyframes s-fade { from { opacity: 0; transform: translateY(14px); } }
@keyframes s-blur { from { opacity: 0; filter: blur(10px); } }
@keyframes s-push { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes s-glass { from { opacity: 0; transform: translateY(16%) rotateX(18deg) scale(.92); } }
@keyframes s-spring { from { opacity: 0; transform: scale(.6); } }
@keyframes s-slam { from { opacity: 0; transform: translateY(120%); } }
@keyframes s-draw { from { transform: scaleX(0); } }

/* ================= FEATURES ================= */
.feats { padding: var(--s-8) 0; }
.feats h2 { font-size: var(--fs-xl); max-width: 22ch; }
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-6); margin-top: var(--s-6); }
@media (max-width: 860px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .feat-grid { grid-template-columns: 1fr; } }
.feat svg { width: 28px; height: 28px; color: var(--primary); margin-bottom: var(--s-3); }
.feat h3 { font-size: var(--fs-md); }
.feat p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* ================= FAQ ================= */
.home #faq { padding: var(--s-8) 0; background: var(--paper-100); }
.home #faq .wrap { max-width: 820px; }
.home details { transition: box-shadow .2s; }
.home details[open] { box-shadow: var(--shadow-md); }
.home summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; }
.home summary::-webkit-details-marker { display: none; }
.home summary::after { content: "+"; font-size: 1.4em; font-weight: 400; color: var(--primary); transition: transform .3s var(--ease-out); flex: none; }
.home details[open] summary::after { transform: rotate(45deg); }

/* ================= FINAL CTA ================= */
.finale { position: relative; overflow: hidden; background: var(--ink-950); color: var(--white); padding: var(--s-9) 0; text-align: center; isolation: isolate; }
.finale::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; z-index: -1; background: radial-gradient(40% 50% at 50% 60%, rgb(109 74 255 / 45%), transparent 70%), radial-gradient(25% 30% at 70% 80%, rgb(255 107 74 / 30%), transparent 70%); }
.finale h2 { font-size: clamp(2.5rem, 6.4vw, 5.25rem); line-height: .95; letter-spacing: -0.045em; margin: 0 auto var(--s-4); max-width: 14ch; color: var(--white); font-variation-settings: "wdth" 92; letter-spacing: -0.035em; }
.finale p { color: var(--ink-300); margin: 0 auto var(--s-6); max-width: 46ch; }
.finale .controls { justify-content: center; }
.home .site-footer { border-top: 1px solid rgb(255 255 255 / 8%); background: var(--ink-950); }

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  .hero2__grain, .deck__rig, .wave i, .rec::before, .scroll-cue { animation: none !important; }
  .hero2__fill { clip-path: none; animation: none; }
  .playhead { display: none; }
  .t-line > span, .hero2__lede, .hero2__ctas, .hero2__facts, .deck__card, .deck__card .ms > *, .deck__card .ms__bars i, .deck__cap, .voice-chip { animation: none !important; opacity: 1 !important; transform: none !important; }
  .deck__card { transform: translate3d(calc(var(--i) * 7%), calc(var(--i) * -9%), calc(var(--i) * -70px)); }
  .story { height: auto; padding: var(--s-8) 0; }
  .story__sticky { position: static; height: auto; }
  .steps li p { max-height: none; opacity: 1; }
  .steps li { color: var(--white); position: relative !important; opacity: 1 !important; transform: none !important; }
  .story h2 { display: block !important; }
  .demo2 .hero-video { transform: none; }
  .sty__in, .sty__in > *, .sty--paper .sty__t::after { animation: none !important; }
}