/* Sketchbook intro: editable paper, type and vectors. The original audio clock is retained.
   Scribble 80ms · page slap 260ms · doodles land 940ms · card stamp 1500ms (impact ~1815ms)
   · ink 2240ms + 860ms (including its 10% hold) · title pop 3080ms · idle loop from ~3.4s. */
body[data-phase="intro"] { background:#efe4c9; --font-display:'Cairo',sans-serif; }
body[data-phase="intro"] :is(#stage,#view) { background:#efe4c9; }
.intro-paper-launch--animated {
  --intro-ink:#4d5145;
  --intro-page:#fbf7ea;
  background:radial-gradient(ellipse at 50% 42%,#f6eedb 0 38%,#e9dab7 100%);
  container-type:inline-size;
}
.intro-paper-layer { background:none; }

/* Whole-stage jolt when the title card lands. */
.intro-paper-launch--animated .intro-paper-launch-art {
  animation:sketch-intro-shake 360ms linear 1800ms both;
}

/* Notebook page ---------------------------------------------------------- */
.intro-paper-launch-burst {
  inset:4.2% 3.2% 4.6%;
  width:auto; height:auto;
  overflow:hidden;
  clip-path:none;
  border-radius:6px 12px 8px 14px;
  background-color:var(--intro-page);
  background-image:
    linear-gradient(90deg,transparent 6.6%,#bb756650 6.6%,#bb756650 6.75%,transparent 6.75%,transparent 7.05%,#bb756630 7.05%,#bb756630 7.15%,transparent 7.15%),
    repeating-linear-gradient(180deg,transparent 0 2.35cqw,#748e9c24 2.35cqw calc(2.35cqw + 1px));
  box-shadow:0 .45cqw 0 #dccba4,0 1.4cqw 2.8cqw #6b573330;
  transform-origin:50% 45%;
  animation:sketch-intro-page-slap 760ms cubic-bezier(.22,.8,.3,1) 220ms both;
}
/* Spiral-bound holes along the top edge. */
.intro-paper-launch-burst::before {
  content:''; position:absolute; z-index:2; left:4%; right:4%; top:1.1cqw; height:1.3cqw;
  background:radial-gradient(circle at 50% 50%,#d8c69f 0 .42cqw,#bfae88 .44cqw .52cqw,transparent .55cqw) 0 0 / 3.2cqw 100% repeat-x;
}
.intro-sketch-rays {
  position:absolute; z-index:0; left:50%; top:37%;
  width:124cqw; aspect-ratio:1;
  translate:-50% -50%;
  overflow:visible;
  animation:sketch-intro-rays-spin 70s linear 1200ms infinite;
}
.intro-sketch-ray {
  fill:none; stroke-width:17; stroke-linecap:round; opacity:.85;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:sketch-intro-ray-draw 520ms cubic-bezier(.2,.8,.3,1) calc(430ms + var(--ray-delay,0ms)) both;
}
.intro-sketch-ray--0 { stroke:#f5e0a4; }
.intro-sketch-ray--1 { stroke:#f4d6ca; }
.intro-sketch-ray--2 { stroke:#d9e6ec; }

/* Opening scribble -------------------------------------------------------- */
.intro-paper-launch-scribble {
  z-index:5; stroke:#466f86; stroke-width:5; filter:none;
  animation:sketch-intro-scribble-away 260ms ease-in 640ms both;
  transform-origin:50% 50%;
}
.intro-paper-launch-scribble path {
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:sketch-intro-scribble-draw 560ms cubic-bezier(.35,.55,.35,1) 80ms both;
}

/* Doodles drop in with squash and stretch, then fidget while the host talks. */
.intro-paper-prop {
  z-index:3; inset:auto; width:14%; height:auto; clip-path:none;
  transform-origin:50% 100%;
  animation:sketch-intro-drop 760ms cubic-bezier(.25,.8,.3,1) 940ms both;
}
.intro-prop-idle {
  display:block;
  transform-origin:50% 90%;
  animation:sketch-intro-fidget 2.8s ease-in-out calc(2700ms + var(--idle-index,0) * 230ms) infinite;
}
.intro-paper-prop svg {
  display:block; width:100%; overflow:visible;
  fill:#f3dc9a; stroke:var(--intro-ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(.35cqw .45cqw 0 #6b573322);
}
.intro-paper-prop--pencil-left { left:6.5%; top:37%; }
.intro-paper-prop--pencil-left svg { fill:#cfe0c4; }
.intro-paper-prop--pencil-right { right:7%; top:38%; width:13%; animation-delay:1020ms; }
.intro-paper-prop--pencil-right svg { fill:#f3dc9a; transform:rotate(14deg); }
.intro-paper-prop--crayon-red { left:27%; bottom:8%; width:11%; animation-name:sketch-intro-pop; animation-delay:1110ms; }
.intro-paper-prop--crayon-red svg { fill:#f0c95c; transform:rotate(-12deg); }
.intro-paper-prop--crayon-blue { right:27%; bottom:7%; width:13%; animation-name:sketch-intro-pop; animation-delay:1180ms; }
.intro-paper-prop--crayon-blue svg { fill:#ecc0b0; transform:rotate(8deg); }
.intro-paper-prop--dallah { left:10%; top:6%; width:10%; animation-delay:1240ms; }
.intro-paper-prop--dallah svg { fill:#e9b99f; transform:rotate(-9deg); }
.intro-paper-prop--lantern { right:11%; top:5%; width:9.5%; animation-delay:1300ms; }
.intro-paper-prop--lantern svg { fill:#b9d2e0; transform:rotate(10deg); }

/* Paper confetti ------------------------------------------------------------ */
.intro-paper-confetti { z-index:4; }
.intro-paper-confetti-piece {
  left:50%; top:40%;
  width:1.6%;
  background:var(--c,#f0c95c);
  border:1px solid #79756570;
  box-shadow:none;
  transform:none;
  animation:
    sketch-intro-confetti 900ms cubic-bezier(.12,.78,.3,1) var(--delay,700ms) both,
    sketch-intro-drift 3.2s ease-in-out calc(var(--delay,700ms) + 900ms) infinite alternate;
}
.intro-paper-confetti-piece:nth-child(4n) { width:.9%; aspect-ratio:.45; border-radius:40%; }

/* Title card ---------------------------------------------------------------- */
.intro-paper-launch-logo {
  z-index:6;
  inset:21% 25% auto; width:50%; height:37%;
  clip-path:none;
  transform-origin:50% 62%;
  animation:sketch-intro-stamp 720ms cubic-bezier(.3,.72,.3,1) 1500ms both;
}
.intro-logo-rock {
  position:absolute; inset:0;
  animation:sketch-intro-rock 3.6s ease-in-out 3500ms infinite;
}
.intro-logo-blank {
  background:#fffdf5; border:2px solid var(--intro-ink);
  border-radius:9px 17px 10px 15px / 14px 9px 17px 8px;
  box-shadow:.55cqw .7cqw 0 #77684f2e;
  transform:rotate(-2deg);
}
.intro-logo-blank::before,.intro-logo-blank::after {
  content:''; position:absolute; top:-9%; width:25%; height:16%;
  background:repeating-linear-gradient(110deg,#e0c27ae6 0 7px,#ebd49ce6 7px 9px);
  clip-path:polygon(3% 0,98% 3%,100% 92%,96% 100%,0 96%,2% 65%);
  animation:sketch-intro-tape 240ms cubic-bezier(.3,1.4,.5,1) 1930ms both;
}
.intro-logo-blank::before { left:4%; rotate:-12deg; }
.intro-logo-blank::after { right:3%; rotate:11deg; animation-delay:2030ms; }
.intro-logo-highlight {
  position:absolute; left:21%; right:12%; top:53%; height:22%;
  background:#f3d46f; opacity:.62;
  border-radius:45% 18% 40% 22% / 60% 40% 55% 45%;
  rotate:-1.5deg;
  transform-origin:100% 50%;
  animation:sketch-intro-highlight 460ms cubic-bezier(.3,.75,.25,1) 2120ms both;
}
.intro-logo-ink {
  background:none; display:flex; align-items:center; justify-content:center;
  direction:rtl; padding-left:9%; box-sizing:border-box; font-family:'Cairo',sans-serif; font-size:9.8cqw; font-weight:900;
  line-height:1.6; color:#3f5a47; text-shadow:.18cqw .24cqw 0 #e8d69e;
  animation:
    intro-logo-reveal 860ms cubic-bezier(.46,0,.2,1) 2240ms both,
    sketch-intro-ink-pop 480ms cubic-bezier(.3,1.5,.5,1) 3080ms both;
}
.intro-logo-bang {
  position:absolute; left:9%; top:19%;
  font-family:'Cairo',sans-serif; font-size:11.5cqw; font-weight:900; line-height:1;
  color:#c7604e; text-shadow:.18cqw .24cqw 0 #f2cfc2;
  transform-origin:50% 85%;
  animation:sketch-intro-bang 420ms cubic-bezier(.3,1.6,.5,1) 3140ms both;
}
.intro-logo-sparks {
  position:absolute; width:13%; aspect-ratio:1; overflow:visible;
  fill:none; stroke:#c7604e; stroke-width:7; stroke-linecap:round;
}
.intro-logo-sparks--top { right:-5%; top:-17%; }
.intro-logo-sparks--bottom { left:-6%; bottom:-14%; rotate:180deg; stroke:#466f86; }
.intro-logo-sparks path {
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:sketch-intro-spark 300ms cubic-bezier(.2,.8,.3,1) 3200ms both, sketch-intro-spark-blink 1.8s ease-in-out 3700ms infinite;
}
.intro-logo-sparks path:nth-child(2) { animation-delay:3250ms,3850ms; }
.intro-logo-sparks path:nth-child(3) { animation-delay:3300ms,4000ms; }
.intro-logo-sparks--bottom path { animation-delay:3280ms,4300ms; }

/* The little pencil rides the ink edge from right to left. */
.intro-logo-pencil {
  position:absolute; z-index:2; right:7%; top:4%; width:19%;
  animation:sketch-intro-pencil-away 320ms cubic-bezier(.5,0,.8,.4) 3080ms both;
}
.intro-logo-pencil-travel {
  display:block;
  transform-origin:40% 90%;
  animation:
    sketch-intro-pencil-travel 860ms cubic-bezier(.46,0,.2,1) 2240ms both,
    sketch-intro-pencil-scrawl 150ms ease-in-out 2320ms 5 alternate;
}
.intro-logo-pencil svg {
  display:block; width:100%; overflow:visible; rotate:-28deg;
  fill:#f3dc9a; stroke:var(--intro-ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}

/* Ink marks that burst out from under the card when it lands. */
.intro-logo-impact { position:absolute; inset:0; pointer-events:none; }
.intro-logo-impact-mark {
  position:absolute; width:3.2cqw; height:.45cqw; margin:-.225cqw 0 0 -1.6cqw;
  border-radius:1cqw; background:var(--intro-ink);
  opacity:0;
  rotate:var(--a);
  animation:sketch-intro-impact 420ms cubic-bezier(.15,.8,.3,1) 1800ms both;
}

/* Exit: small anticipation, then the page is flicked away and a fresh sheet slides in. */
.intro-paper-launch::after {
  background-color:var(--intro-page,#fbf7ea);
  background-image:repeating-linear-gradient(180deg,transparent 0 2.35cqw,#748e9c24 2.35cqw calc(2.35cqw + 1px));
  box-shadow:-1.2cqw 0 3cqw #6b573340;
}
.intro-paper-launch.is-exiting .intro-paper-launch-art {
  animation:sketch-intro-exit 520ms cubic-bezier(.5,0,.75,.35) both;
}

@keyframes sketch-intro-page-slap {
  0% { opacity:0; transform:translateY(-10%) scale(1.3) rotate(-5deg); }
  30% { opacity:1; }
  42% { transform:translateY(0) scale(1.02,.955) rotate(.8deg); }
  60% { transform:scale(.99,1.02) rotate(-.6deg); }
  78% { transform:scale(1.004,.996) rotate(-.2deg); }
  100% { opacity:1; transform:rotate(-.35deg); }
}
@keyframes sketch-intro-ray-draw {
  from { stroke-dashoffset:1; opacity:0; }
  30% { opacity:1; }
  to { stroke-dashoffset:0; opacity:.85; }
}
@keyframes sketch-intro-rays-spin { to { rotate:360deg; } }
@keyframes sketch-intro-scribble-draw {
  from { stroke-dashoffset:1; }
  to { stroke-dashoffset:0; }
}
@keyframes sketch-intro-scribble-away {
  from { opacity:1; transform:none; }
  to { opacity:0; transform:scale(1.12) rotate(-3deg); }
}
@keyframes sketch-intro-drop {
  0% { opacity:0; transform:translateY(-26cqw) rotate(-14deg) scale(.86,1.2); }
  18% { opacity:1; }
  52% { transform:translateY(0) rotate(0) scale(1.22,.76); }
  68% { transform:translateY(-2.4cqw) rotate(4deg) scale(.92,1.1); }
  84% { transform:translateY(0) scale(1.06,.94); }
  100% { opacity:1; transform:none; }
}
@keyframes sketch-intro-pop {
  0% { opacity:0; transform:translateY(8cqw) scale(.2) rotate(-30deg); }
  45% { opacity:1; transform:translateY(-1.5cqw) scale(1.2,1.12) rotate(8deg); }
  65% { transform:translateY(0) scale(.9,1.08) rotate(-4deg); }
  82% { transform:scale(1.04,.97) rotate(1deg); }
  100% { opacity:1; transform:none; }
}
@keyframes sketch-intro-fidget {
  0%,100% { transform:rotate(0) translateY(0); }
  25% { transform:rotate(-4deg) translateY(-.45cqw); }
  55% { transform:rotate(3deg) translateY(0) scale(1.03,.97); }
  75% { transform:rotate(1deg) translateY(-.2cqw); }
}
@keyframes sketch-intro-confetti {
  0% { opacity:0; translate:-50% -50%; scale:.2; rotate:0deg; }
  14% { opacity:1; }
  100% { opacity:1; translate:calc(-50% + var(--x)) calc(-50% + var(--y)); scale:1; rotate:var(--rot); }
}
@keyframes sketch-intro-drift {
  from { transform:translateY(0) rotate(0); }
  to { transform:translateY(-.7cqw) rotate(24deg); }
}
@keyframes sketch-intro-stamp {
  0% { opacity:0; transform:translateY(-7cqw) scale(1.85) rotate(-11deg); }
  30% { opacity:1; }
  44% { transform:translateY(0) scale(1.08,.86) rotate(1.8deg); }
  62% { transform:scale(.95,1.07) rotate(-1.2deg); }
  80% { transform:scale(1.02,.985) rotate(.4deg); }
  100% { opacity:1; transform:none; }
}
@keyframes sketch-intro-shake {
  0%,100% { transform:none; }
  15% { transform:translate(.5cqw,.35cqw) rotate(.25deg); }
  32% { transform:translate(-.42cqw,-.2cqw) rotate(-.2deg); }
  50% { transform:translate(.28cqw,-.18cqw); }
  68% { transform:translate(-.14cqw,.12cqw); }
  84% { transform:translate(.06cqw,0); }
}
@keyframes sketch-intro-impact {
  0% { opacity:0; transform:translateX(0) scaleX(.3); }
  20% { opacity:.9; }
  100% { opacity:0; transform:translateX(3.4cqw) scaleX(.2); }
}
@keyframes sketch-intro-tape {
  from { opacity:0; transform:translateY(-60%) scale(1.7,1.3); }
  to { opacity:1; transform:none; }
}
@keyframes sketch-intro-highlight {
  from { scale:0 1; opacity:0; }
  15% { opacity:.62; }
  to { scale:1 1; opacity:.62; }
}
@keyframes sketch-intro-ink-pop {
  0% { scale:1; }
  40% { scale:1.12 1.08; }
  70% { scale:.97 1.02; }
  100% { scale:1; }
}
@keyframes sketch-intro-bang {
  0% { opacity:0; transform:translateY(-4cqw) scale(2.6) rotate(-35deg); }
  55% { opacity:1; transform:translateY(0) scale(.82,1.12) rotate(14deg); }
  78% { transform:scale(1.08,.95) rotate(6deg); }
  100% { opacity:1; transform:rotate(9deg); }
}
@keyframes sketch-intro-spark { to { stroke-dashoffset:0; } }
@keyframes sketch-intro-spark-blink {
  0%,70%,100% { opacity:1; }
  80% { opacity:.25; }
}
@keyframes sketch-intro-pencil-travel {
  0% { opacity:0; translate:0 -2cqw; }
  10% { opacity:1; translate:0 0; }
  100% { opacity:1; translate:-28cqw .8cqw; }
}
@keyframes sketch-intro-pencil-scrawl {
  from { rotate:-5deg; }
  to { rotate:6deg; }
}
@keyframes sketch-intro-pencil-away {
  0% { opacity:1; transform:none; }
  100% { opacity:0; transform:translate(-4cqw,-7cqw) rotate(-40deg) scale(.7); }
}
@keyframes sketch-intro-rock {
  0%,100% { transform:rotate(0) translateY(0); }
  30% { transform:rotate(-.9deg) translateY(-.35cqw); }
  70% { transform:rotate(.8deg) translateY(.1cqw); }
}
@keyframes sketch-intro-exit {
  0% { opacity:1; transform:none; }
  28% { opacity:1; transform:scale(.97) rotate(.6deg); }
  100% { opacity:0; transform:translateX(-14%) translateY(-3%) rotate(-6deg) scale(.94); }
}

/* Reduced motion removes travel, but keeps the title hidden until its audio beat. */
@media(prefers-reduced-motion:reduce) {
  .intro-paper-launch--animated { background:#efe4c9; }
  .intro-paper-launch--animated .intro-paper-launch-art { display:block; animation:none; }
  .intro-paper-launch-burst,.intro-paper-prop,.intro-prop-idle,.intro-paper-confetti-piece,.intro-sketch-rays,.intro-logo-rock { animation:none; opacity:1; }
  .intro-sketch-ray { animation:none; stroke-dashoffset:0; }
  .intro-paper-confetti-piece { translate:calc(-50% + var(--x)) calc(-50% + var(--y)); rotate:var(--rot); }
  .intro-paper-launch-scribble,.intro-logo-pencil,.intro-logo-impact { display:none; }
  .intro-paper-launch-logo { animation:sketch-intro-appear 1ms step-end 1500ms both; }
  .intro-logo-blank::before,.intro-logo-blank::after { animation:none; }
  :is(.intro-logo-ink,.intro-logo-highlight,.intro-logo-bang) { animation:sketch-intro-appear 1ms step-end 2326ms both; }
  .intro-logo-bang { transform:rotate(9deg); }
  .intro-logo-sparks path { animation:none; stroke-dashoffset:0; }
  .intro-paper-launch.is-exiting .intro-paper-launch-art { animation:none; }
}
@keyframes sketch-intro-appear { from { opacity:0; } to { opacity:1; } }