/* Source animation variants with transparent, caption-free final wordmarks. */
.classic-motion .assembly-target { background:transparent; border:0; box-shadow:none; padding:0; }
.classic-motion .assembly-halo { display:none; }
.variation-panel { width:100%; }
.v-heading { font-size:clamp(40px,4vw,58px); font-weight:600; letter-spacing:-1.65px; line-height:1.03; }
.v-heading em { color:var(--red); font-style:normal; }
.v-lead { font-size:18px; line-height:1.45; color:var(--muted); max-width:390px; }
.v-stage { width:100%; position:relative; }
.v-stage .motion-canvas { overflow:clip; }
.v-stage .source-cover { width:76px; }
.v-stage .source-icon { width:76px; height:96px; }
.v-stage .source-icon svg { width:68px; height:91px; }
.v-result { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; justify-items:center; align-content:center; gap:13px; opacity:0; }
.v-result img { width:235px; height:auto; }

.v-versions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.v-version { border-top:1px solid var(--line); padding-top:13px; }
.v-version h3 { display:flex; gap:10px; align-items:baseline; font-size:20px; line-height:1.25; font-weight:600; margin-bottom:7px; }
.v-version h3 span { font-size:12px; color:var(--red); }
.v-version p { font-size:15px; line-height:1.4; color:var(--muted); }
.v-versions.vertical { grid-template-columns:1fr; gap:15px; }
.v-versions.vertical .v-version h3 { font-size:19px; }
.v-versions.vertical .v-version p { margin-left:24px; }

/* Current page-two rule: dark, with visual-left/text-right or centered composition. */
.chapter-studio { --ink:#f8f3e9; --muted:#aaa69f; --line:#45423e; --red:#c98f89; --card:#24211e; --chapter-background:#1d1b19; --motion-total:3000ms; color:var(--ink); }
.chapter-studio .cta { color:#171310; }
.chapter-studio .cta:hover { background:#deb0a7; border-color:#deb0a7; }
.chapter-footer { align-items:center; flex-wrap:wrap; gap:8px 20px; }
.chapter-footer-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.chapter-footer-actions .chapter-replay { margin:0; font-size:inherit; }
.s-split { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:75px; align-items:center; }
.s-heading { container-type:inline-size; }
.s-heading .v-lead { max-width:none; font-size:min(17px,3.25cqi); white-space:nowrap; margin-top:17px; }
.s-copy .v-versions { margin-top:24px; }
.s-copy .v-versions.vertical { gap:15px; }
.s-original .v-heading { font-size:clamp(38px,3.45vw,52px); }
.s-classic-stage { max-width:620px; margin-inline:auto; }
.s-classic-stage .assembly-target { width:480px; }
.s-classic-stage .assembly-target img { width:380px; }
.s-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); text-align:center; }
.s-benefits p { color:var(--muted); font-size:14px; line-height:1.4; }
.s-benefits strong { display:block; color:var(--ink); font-size:17px; font-weight:600; margin-bottom:4px; }
.s-center { text-align:center; }
.s-center .v-heading { font-size:46px; line-height:1.03; }
.s-center .v-lead { max-width:none; margin-top:10px; }
.s-center .v-stage { width:min(650px,100%); margin:10px auto 4px; }
.s-center .v-versions { margin:10px 0; }
.s-center .v-version h3 { justify-content:center; }
.s-center .v-version p { margin:0; }

/* Every complete sequence, including stagger and final reveal, ends at 3 seconds. */
.variation-panel {
  --source-duration:calc(var(--motion-total) * .8); --source-stagger:calc(var(--motion-total) * .01); --reveal-duration:calc(var(--motion-total) * .2);
  --reveal-delay:calc(var(--motion-total) - var(--reveal-duration));
  --motion-ease:cubic-bezier(.4,0,.2,1); --reveal-ease:cubic-bezier(.22,1,.36,1);
}
.motion-stack { --source-stagger:calc(var(--motion-total) * .024); }
.motion-shuffle { --source-stagger:calc(var(--motion-total) * .012); }
.motion-cascade { --source-stagger:calc(var(--motion-total) * .02); }
.classic-motion .source-token:nth-child(1), .shuffle-card:nth-of-type(1) { --i:0; --lift:-18px; }
.classic-motion .source-token:nth-child(2), .shuffle-card:nth-of-type(2) { --i:1; --lift:8px; }
.classic-motion .source-token:nth-child(3), .shuffle-card:nth-of-type(3) { --i:2; --lift:18px; }
.classic-motion .source-token:nth-child(4), .shuffle-card:nth-of-type(4) { --i:3; --lift:8px; }
.classic-motion .source-token:nth-child(5), .shuffle-card:nth-of-type(5) { --i:4; --lift:-18px; }
.classic-motion .source-token { --delay:calc(var(--i) * var(--source-stagger)); }
.classic-motion .assembly-target { transform:translate(-50%,-50%); }
.is-playing .classic-motion .source-token { animation:original-gather var(--source-duration) var(--motion-ease) var(--delay) both; }
.is-playing .classic-motion .source-token>span:last-child { animation:source-label var(--source-duration) ease var(--delay) both; }
.is-playing .classic-motion .assembly-target { animation:elegant-reveal var(--reveal-duration) var(--reveal-ease) var(--reveal-delay) both; }
@keyframes source-label { 0%,26% { opacity:1; } 46%,100% { opacity:0; } }
@keyframes original-gather {
  0%,24% { opacity:1; transform:translate(var(--x),0) rotate(0) scale(1); }
  62% { opacity:1; transform:translate(calc(var(--x) * .06),-3px) rotate(-3deg) scale(.9); }
  76% { opacity:1; transform:translate(0,-3px) rotate(0) scale(.9); }
  93%,100% { opacity:0; transform:translate(0,-9px) rotate(0) scale(.86); }
}
@keyframes elegant-reveal {
  from { opacity:0; transform:translate(-50%,calc(-50% + 8px)) scale(.98); }
  to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

/* Soft stack: the sources arrive in sequence and rest as a shallow paper stack. */
.is-playing.motion-stack .classic-motion .source-token { animation-name:original-stack; }
@keyframes original-stack {
  0%,24% { opacity:1; transform:translate(var(--x),0) rotate(0); }
  58%,76% { opacity:1; transform:translate(calc((var(--i) - 2) * 8px),calc((2 - var(--i)) * 4px)) rotate(calc((var(--i) - 2) * -3deg)) scale(.94); }
  95%,100% { opacity:0; transform:translate(0,-6px) rotate(0) scale(.9); }
}

/* Card shuffle: keep the fan and collection, soften the entrance and final turn. */
.shuffle-stage .motion-canvas { perspective:1400px; }
.shuffle-card {
  --x:calc((var(--i) - 2) * 136px); --angle:calc((var(--i) - 2) * 5deg);
  position:absolute; left:50%; top:50%; width:138px; height:178px;
  margin:-89px 0 0 -69px; padding:15px 14px;
  background:#282421; border:1px solid #625851; border-radius:5px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:translateX(var(--x)) rotate(var(--angle)); transform-origin:50% 80%;
  backface-visibility:hidden;
}
.shuffle-card .source-cover { width:69px; }
.shuffle-card .source-icon { width:69px; height:88.5px; }
.shuffle-card .source-icon svg { width:61.5px; height:84px; }
.shuffle-card strong { margin-top:11px; font-size:14px; font-weight:600; white-space:nowrap; }
.shuffle-result { top:142px; width:650px; }
.shuffle-result .stacked-mark { width:300px; }
.s-original .shuffle-result .stacked-mark { width:400px; }
.shuffle-result .horizontal-mark { width:470px; }
.is-playing .shuffle-card { animation:shuffle-gather var(--source-duration) var(--motion-ease) calc(var(--i) * var(--source-stagger)) both; }
.is-playing .shuffle-result { animation:elegant-turn var(--reveal-duration) var(--reveal-ease) var(--reveal-delay) both; }
@keyframes shuffle-gather {
  0% { opacity:0; transform:translate(calc(var(--x) * 1.05),18px) rotate(var(--angle)) scale(.98); }
  20%,36% { opacity:1; transform:translate(var(--x),0) rotate(var(--angle)) scale(1); }
  66%,77% { opacity:1; transform:translate(calc((var(--i) - 2) * 6px),calc((2 - var(--i)) * 3px)) rotate(calc((var(--i) - 2) * -1deg)) scale(1); }
  96%,100% { opacity:0; transform:translate(0,-4px) rotateY(22deg) scale(.98); }
}
@keyframes elegant-turn {
  from { opacity:0; transform:translate(-50%,calc(-50% + 6px)) rotateY(-14deg) scale(.98); }
  to { opacity:1; transform:translate(-50%,-50%) rotateY(0) scale(1); }
}

/* Cascade: a measured left-to-right deal, then the horizontal wordmark. */
.is-playing.motion-cascade .shuffle-card { animation-name:shuffle-cascade; }
.is-playing.motion-cascade .shuffle-result { animation-name:elegant-reveal; }
@keyframes shuffle-cascade {
  0% { opacity:0; transform:translate(var(--x),-26px) rotate(-3deg); }
  22%,36% { opacity:1; transform:translate(var(--x),0) rotate(0); }
  65%,78% { opacity:1; transform:translate(calc((var(--i) - 2) * 5px),calc((var(--i) - 2) * -3px)) rotate(calc((var(--i) - 2) * -2deg)); }
  96%,100% { opacity:0; transform:translate(0,8px) rotate(0) scale(.98); }
}

/* Restored cartoon Book Parade, with every beat scaled to the shared 3-second duration. */
.motion-parade { --source-duration:calc(var(--motion-total) * .85); --source-stagger:calc(var(--motion-total) * .025); --reveal-duration:calc(var(--motion-total) * .25); }
.v-parade .v-source { --delay:calc(var(--i) * var(--source-stagger)); position:absolute; left:50%; top:218px; width:110px; margin:-61px 0 0 -55px; display:grid; justify-items:center; gap:20px; transform:translate(var(--x),0) rotate(var(--tilt)); }
.v-parade .v-source:nth-child(1) { --i:0; --x:-265px; --tilt:-6deg; }
.v-parade .v-source:nth-child(2) { --i:1; --x:-132px; --tilt:5deg; }
.v-parade .v-source:nth-child(3) { --i:2; --x:0px; --tilt:-2deg; }
.v-parade .v-source:nth-child(4) { --i:3; --x:132px; --tilt:4deg; }
.v-parade .v-source:nth-child(5) { --i:4; --x:265px; --tilt:7deg; }
.v-source-label { color:var(--muted); font-size:12px; line-height:1.2; white-space:nowrap; }
.v-sources { position:absolute; inset:0; }
.v-limbs { position:absolute; width:100px; height:126px; left:5px; top:-8px; fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.v-floor { position:absolute; top:317px; left:35px; right:35px; border-top:1.5px solid var(--line); }
.v-parade-result { top:250px; width:510px; min-height:116px; padding:0; border:0; background:transparent; }
.v-parade-result img { width:420px; }
.v-burst { position:absolute; left:50%; top:250px; width:550px; height:225px; transform:translate(-50%,-50%); opacity:0; fill:none; stroke:var(--red); stroke-width:3; stroke-linecap:round; }
.is-playing .v-parade .v-source { animation:vp-hop var(--source-duration) cubic-bezier(.35,.6,.3,1) var(--delay) both; }
.is-playing .v-parade .v-source-label { animation:source-label var(--source-duration) ease-out var(--delay) both; }
.is-playing .v-parade-result { animation:vp-pop var(--reveal-duration) var(--reveal-delay) ease-out both; }
.is-playing .v-burst { animation:vp-burst var(--reveal-duration) var(--reveal-delay) ease-out both; }
@keyframes vp-hop {
  0%,18% { opacity:1; transform:translate(var(--x),0) rotate(var(--tilt)); }
  24% { transform:translate(var(--x),8px) rotate(0) scale(1.1,.88); }
  36% { transform:translate(calc(var(--x) * .7),-78px) rotate(calc(var(--tilt) * -1)) scale(.94,1.06); }
  46% { transform:translate(calc(var(--x) * .48),3px) rotate(0) scale(1.08,.9); }
  60% { opacity:1; transform:translate(calc(var(--x) * .18),-58px) rotate(var(--tilt)); }
  72% { opacity:1; transform:translate(0,3px) rotate(0) scale(1.1,.85); }
  87%,100% { opacity:0; transform:translate(0,4px) scale(.12,.6); }
}
@keyframes vp-pop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3,1.2); } 45% { opacity:1; transform:translate(-50%,-50%) scale(1.08,.91) rotate(-2deg); } 72% { transform:translate(-50%,-50%) scale(.97,1.025) rotate(1deg); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes vp-burst { 0% { opacity:0; transform:translate(-50%,-50%) scale(.65); } 30% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.18); } }

@media(min-width:1051px) {
  .chapter-studio { padding-top:32px; }
  .chapter-invitation { margin-top:18px; padding-block:16px; }
  .chapter-review { padding-block:12px; }
  .s-heading .v-lead { margin-top:12px; }
  .s-copy .v-versions { margin-top:20px; }
}
@media(min-width:1051px) and (max-height:780px) {
  .chapter-studio { padding-top:24px; }
  .chapter-invitation { margin-top:14px; padding-block:12px; }
  .s-copy .v-versions.vertical { gap:12px; }
  .s-split { gap:50px; }
  .s-direction .v-heading { font-size:40px; }
  .s-center .v-heading { font-size:40px; }
  .s-center .v-stage { max-width:560px; margin-block:5px; }
  .s-heading .v-lead { font-size:min(15px,3.25cqi); margin-top:8px; }
  .s-benefits { padding-top:12px; margin-top:12px; }
  .s-copy .v-versions { margin-top:12px; }
}
@media(max-width:1050px) and (min-width:721px) {
  .s-split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
  .s-direction .v-heading { font-size:39px; }
}
@media(max-width:720px) {
  .s-split { display:flex; flex-direction:column; gap:20px; align-items:stretch; }
  .s-copy { display:contents; }
  .s-heading { order:-2; text-align:center; }
  .s-split>.v-stage { order:-1; }
  .v-heading,.s-center .v-heading { font-size:37px; line-height:1.06; letter-spacing:-1.2px; }
  .s-heading .v-lead { max-width:none; font-size:min(16px,3.25cqi); line-height:1.45; }
  .s-split .v-versions { margin-top:0; }
  .v-versions { grid-template-columns:1fr; gap:17px; }
  .v-version h3 { font-size:19px; }
  .v-version p { font-size:14px; }
  .s-center .v-versions { text-align:center; }
  .s-center .v-stage { width:100%; margin:12px 0; }
  .s-benefits { grid-template-columns:1fr; gap:15px; margin-top:22px; padding-top:20px; }
  .s-benefits strong { font-size:18px; }
  .v-parade-result { width:550px; min-height:150px; }
  .v-parade-result img { width:480px; }
  .shuffle-result .stacked-mark, .s-original .shuffle-result .stacked-mark { width:490px; }
  .shuffle-result .horizontal-mark { width:610px; }
  .chapter-tabs button { font-size:11.5px; }
}
@media(prefers-reduced-motion:reduce) {
  .v-parade .v-source { top:120px; transform:translate(var(--x),0) scale(.78); opacity:1; }
  .v-parade-result { top:270px; }
  .v-burst { display:none; }
  .variation-panel *, .variation-panel *::before, .variation-panel *::after { animation:none!important; transition:none!important; }
  .variation-panel .v-result { opacity:1; transform:translate(-50%,-50%); }
  .variation-panel .classic-motion .source-token { top:68px; transform:translate(var(--x),0) scale(.76); opacity:1; }
  .variation-panel .classic-motion .assembly-target { top:235px; opacity:1; transform:translate(-50%,-50%); }
  .shuffle-card { top:48px; transform:translateX(var(--x)) scale(.64); opacity:1; transform-origin:50% 90%; }
  .shuffle-result { top:214px; }
  .shuffle-result .stacked-mark, .s-original .shuffle-result .stacked-mark { width:270px; }
  .shuffle-result .horizontal-mark { width:500px; }
}