/* ==========================================================================
   DOODLE KIT — hand-drawn accents for the marketing pages.
   Markup lives in templates/_doodles.html.

   Language
   • One ink weight, warm ink strokes (--ink), paper fills, solid-ink hair.
   • Characters physically interact with the UI: the peeker's fingers curl
     over a window bar, the greeter says hi.
   • Everything is decorative: aria-hidden + pointer-events:none.
   • Arrows/underlines draw themselves when a `.reveal` ancestor gets `.in`
     (the hero draws on after load). Reduced motion → already drawn, still.

   Anchoring math (characters are cropped by the edge they hide behind):
   • peek      — edge line at y=88 (box 140×118) → top:  -(88/140) × width
   • peek-side — hand at x=108 (box 120×190) → left: -(108/120) × width
   ========================================================================== */

:root {
  --doodle-ink: var(--ink);
  --doodle-paper: var(--paper);
  --doodle-mark: var(--accent);            /* underline / ring colour */
  --doodle-blush: #f2ab9e;
  --sticker-amber: #f5a524;
  --sticker-coral: #ef5b3d;
  --sticker-blue: #2383e2;
  --sticker-green: #1f9d74;
  --sticker-violet: #7a5af8;
  --sticker-ink: #37352f;
}

.doodle {
  color: var(--doodle-ink);
  pointer-events: none;
  user-select: none;
}
.doodle-fill { fill: currentColor; }
.doodle-skin { fill: var(--doodle-paper); }
.doodle-blush { fill: var(--doodle-blush); opacity: 0.55; }

/* A generic "this thing has doodles around it" anchor. */
.doodle-scene { position: relative; }
.doodle-scene > .window,
.doodle-scene > .hero-visual-frame,
.doodle-scene > .dns-demo,
.doodle-scene > .steps-photo { position: relative; z-index: 1; }

/* ── Characters ────────────────────────────────────────────────────────── */

.doodle-char {
  position: absolute;
  display: block;
  height: auto;
  overflow: visible;
  z-index: 3;                    /* occlusion is drawn into the artwork */
}

/* Kilroy over a top edge: fingers land on the frame below the edge line.
   top = -(edge y / viewBox width) × width = -(88/140) × width            */
.doodle-peek {
  --w: 126px;
  width: var(--w);
  top: calc(var(--w) * -0.6286);
}
/* Friend standing left of a frame, hand resting on its edge.
   left = -(hand x / viewBox width) × width = -(108/120) × width          */
.doodle-peek-side {
  --w: 100px;
  width: var(--w);
  left: calc(var(--w) * -0.9);
}

/* tiny idle bob — alive without stealing focus */
@keyframes doodle-bob {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50%      { transform: translateY(-4px) rotate(var(--tilt, 0deg)); }
}
.doodle-char.is-alive { animation: doodle-bob 7s ease-in-out infinite; }

/* everyone blinks now and then */
@keyframes doodle-blink {
  0%, 94%, 98%, 100% { transform: scaleY(1); }
  96%                { transform: scaleY(0.1); }
}
.doodle-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: doodle-blink 5.4s linear infinite;
}
.doodle-peek-side .doodle-eyes { animation-delay: 1.7s; }

/* greeter hand is static — no arm animation */

/* ── Stickers — wobbly die-cut discs ───────────────────────────────────── */

.doodle-sticker {
  position: absolute;
  display: block;
  width: 48px;
  height: 48px;
  transform: rotate(var(--tilt, -6deg));
  filter: drop-shadow(0 2px 5px rgba(20, 15, 5, 0.18));
  z-index: 4;
}
.doodle-sticker svg { width: 100%; height: 100%; display: block; overflow: visible; }
.doodle-sticker-disc {
  fill: var(--sticker, var(--sticker-ink));
  stroke: var(--doodle-paper);
  stroke-width: 5;
  paint-order: stroke;           /* white die-cut rim outside the colour */
}
.doodle-sticker.is-sm { width: 40px; height: 40px; }
.doodle-sticker.is-amber  { --sticker: var(--sticker-amber); }
.doodle-sticker.is-coral  { --sticker: var(--sticker-coral); }
.doodle-sticker.is-blue   { --sticker: var(--sticker-blue); }
.doodle-sticker.is-green  { --sticker: var(--sticker-green); }
.doodle-sticker.is-violet { --sticker: var(--sticker-violet); }
.doodle-sticker.is-ink    { --sticker: var(--sticker-ink); }

/* pop in when revealed */
@keyframes doodle-pop {
  0%   { transform: rotate(var(--tilt, -6deg)) scale(0.4); opacity: 0; }
  70%  { transform: rotate(var(--tilt, -6deg)) scale(1.08); opacity: 1; }
  100% { transform: rotate(var(--tilt, -6deg)) scale(1); opacity: 1; }
}
.reveal .doodle-sticker { opacity: 0; }
.reveal.in .doodle-sticker { animation: doodle-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both; }
.hero .doodle-sticker { animation: doodle-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both; }

/* ── Arrows / marks that draw themselves ───────────────────────────────── */

.doodle-arrow,
.doodle-squiggle {
  position: absolute;
  display: block;
  height: auto;
  overflow: visible;
}
.doodle-arrow { width: 110px; }
.doodle-squiggle { width: 72px; }
.doodle-squiggle.is-coral { color: var(--sticker-coral); }

.doodle-draw {
  stroke-dasharray: 1.14;
  stroke-dashoffset: 1.14;
}
.doodle-draw-head { opacity: 0; }
@keyframes doodle-draw { to { stroke-dashoffset: 0; } }
@keyframes doodle-head-in { to { opacity: 1; } }
.reveal.in .doodle-draw,
.hero .doodle-draw,
.is-drawn .doodle-draw {
  animation: doodle-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
}
.reveal.in .doodle-draw-head,
.hero .doodle-draw-head,
.is-drawn .doodle-draw-head {
  animation: doodle-head-in 0.12s ease 1.2s forwards;
}
.hero .doodle-draw { animation-delay: 1.1s; }
.hero .doodle-draw-head { animation-delay: 1.95s; }

/* Word decorations: wrap the word in .scribble-word */
.scribble-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
/* an <em> used purely as a scribble anchor, not for emphasis */
.scribble-word.is-plain { font-style: normal; }
/* squiggle riding under a word (e.g. the dated Word file in the CTA) */
.scribble-word > .doodle-squiggle {
  left: 1%;
  bottom: -0.34em;
  width: 98%;
  height: 0.26em;
}
.doodle-underline,
.doodle-ring,
.doodle-highlight {
  position: absolute;
  color: var(--doodle-mark);
  pointer-events: none;
}
.doodle-underline {
  left: -2%;
  right: -2%;
  bottom: -0.16em;
  width: 104%;
  height: 0.3em;
}
.doodle-ring {
  left: -0.34em;
  top: -0.18em;
  width: calc(100% + 0.68em);
  height: calc(100% + 0.4em);
}
/* highlighter swipe behind the word */
.doodle-highlight {
  left: -0.18em;
  top: 0.06em;
  width: calc(100% + 0.36em);
  height: 1em;
  opacity: 0.34;
  z-index: -1;
}
.doodle-highlight.is-amber { color: #ffcf3f; }
.doodle-highlight.is-blue  { color: #79bcf5; }
.doodle-highlight.is-green { color: #63d3ae; }

/* Sparkles */
.doodle-star {
  position: absolute;
  width: 18px;
  height: 18px;
  color: var(--sticker-amber);
  transform: rotate(var(--tilt, 0deg));
}
.doodle-star.is-ink { color: var(--doodle-ink); }
.doodle-star.is-sm { width: 12px; height: 12px; }
.doodle-sparkles {
  position: absolute;
  width: 58px;
  height: auto;
  color: var(--sticker-amber);
  transform: rotate(var(--tilt, 0deg));
  z-index: 4;
}
.doodle-sparkles.is-ink { color: var(--doodle-ink); }
@keyframes doodle-twinkle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.72); opacity: 0.55; }
}
.doodle-star.is-alive,
.doodle-sparkles .doodle-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: doodle-twinkle 3.6s ease-in-out infinite;
}
.doodle-sparkles .s2 { animation-delay: 1.1s; }
.doodle-sparkles .s3 { animation-delay: 2.2s; }
.reveal .doodle-sparkles { opacity: 0; }
.reveal.in .doodle-sparkles { transition: opacity 0.4s ease 0.5s; opacity: 1; }

/* ── Props ─────────────────────────────────────────────────────────────── */

/* paper plane with a dashed trail */
.doodle-plane {
  position: absolute;
  width: 128px;
  height: auto;
  color: var(--ink-2);
  transform: rotate(var(--tilt, 0deg));
  overflow: visible;
  z-index: 4;
}
.reveal .doodle-plane { opacity: 0; transform: translate(-10px, 8px) rotate(var(--tilt, 0deg)); }
.reveal.in .doodle-plane {
  transition: opacity 0.6s ease 0.4s, transform 0.7s var(--ease, ease) 0.4s;
  opacity: 1;
  transform: translate(0, 0) rotate(var(--tilt, 0deg));
}

/* washi tape — translucent, torn ends */
.doodle-tape {
  position: absolute;
  width: 92px;
  height: auto;
  color: var(--sticker-blue);
  opacity: 0.30;
  mix-blend-mode: multiply;
  transform: rotate(var(--tilt, -4deg));
  z-index: 4;
}
.doodle-tape.is-amber { color: var(--sticker-amber); opacity: 0.38; }
.doodle-tape.is-coral { color: var(--sticker-coral); opacity: 0.28; }
.doodle-tape.is-green { color: var(--sticker-green); opacity: 0.30; }

/* rubber stamp */
.doodle-stamp {
  position: absolute;
  width: 96px;
  height: 96px;
  color: var(--ok, #0f7b6c);
  opacity: 0.85;
  transform: rotate(var(--tilt, -12deg));
  z-index: 4;
}
@keyframes doodle-stamp-in {
  0%   { transform: rotate(var(--tilt, -12deg)) scale(1.5); opacity: 0; }
  55%  { transform: rotate(var(--tilt, -12deg)) scale(0.96); opacity: 0.9; }
  100% { transform: rotate(var(--tilt, -12deg)) scale(1); opacity: 0.85; }
}
.reveal .doodle-stamp { opacity: 0; }
.reveal.in .doodle-stamp { animation: doodle-stamp-in 0.45s cubic-bezier(0.22, 1.2, 0.36, 1) 0.45s both; }

/* Handwritten side-notes that go with arrows */
.doodle-note {
  position: absolute;
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--ink-2);
  white-space: nowrap;
  transform: rotate(var(--tilt, -3deg));
  pointer-events: none;
  z-index: 4;
}
.doodle-note .doodle-arrow { position: absolute; }

/* ── Placements ────────────────────────────────────────────────────────── */

/* Hero: the peeker grips the editor's window bar, sparkles by the peeker's
   head, and a handwritten note points at the custom-domain chip. */
.hero-visual { overflow: visible; }
.hero-visual .hero-visual-frame { position: relative; z-index: 1; }
.hero-visual .hero-chip { z-index: 4; }
.hero-peek {
  --w: 122px;
  right: 9%;
  --tilt: 0deg;
  animation: hero-peek-in 0.9s var(--ease) 0.75s both;
}
@keyframes hero-peek-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-sparkles {
  right: calc(9% + 118px);
  top: -66px;
  width: 46px;
  --tilt: -10deg;
  animation: hero-doodle-in 0.7s var(--ease) 1.35s both;
}
.hero-note-domain {
  right: 8.5rem;
  bottom: -2.4rem;
  --tilt: -4deg;
  color: var(--ink-3);
  animation: hero-doodle-in 0.8s var(--ease) 1s both;
}
/* swoop from the end of the note up to the domain chip */
.hero-note-domain .doodle-arrow {
  width: 62px;
  left: calc(100% + 0.35rem);
  bottom: 0.5rem;
  transform: rotate(-28deg);
  transform-origin: left bottom;
}
.hero h1 .doodle-underline { bottom: -0.12em; }
@keyframes hero-doodle-in {
  from { opacity: 0; transform: translateY(10px) rotate(var(--tilt, 0deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
}
@media (max-width: 980px) {
  /* Stacked hero: same grip on the window chrome as desktop — only shrink
     and tuck in from the right so it stays on the frame, not the image. */
  .hero-peek {
    --w: 84px;
    right: 6%;
  }
  .hero-sparkles {
    right: calc(6% + 78px);
    top: -42px;
    width: 36px;
  }
  /* Keep the note left of the domain chip so the swoop still aims at it —
     `right: 0.5rem` sat under the chip and sent the arrow off-canvas. */
  .hero-note-domain {
    right: 6.75rem;
    bottom: -0.9rem;
    font-size: 1.05rem;
  }
  .hero-note-domain .doodle-arrow {
    width: 52px;
    left: calc(100% - 0.2rem);
    bottom: 0.85rem;
    transform: rotate(-48deg);
  }
}
@media (max-width: 720px) {
  .hero-note-domain {
    right: 5.5rem;
    bottom: -0.75rem;
    font-size: 0.98rem;
  }
  .hero-note-domain .doodle-arrow {
    width: 44px;
    bottom: 0.7rem;
    transform: rotate(-52deg);
  }
}
@media (max-width: 560px) {
  /* Domain chip is gone here, so the note has nothing to point at. */
  .hero-note-domain { display: none; }
  .hero-peek { --w: 72px; right: 4%; }
  .hero-sparkles {
    right: calc(4% + 66px);
    top: -36px;
    width: 32px;
  }
}

/* First clip: handwritten note sitting just above the window, arrow into the recording */
#features .section-head { margin-bottom: 3.4rem; }
.doodle-note-recordings {
  left: 10%;
  top: -3.1rem;
  --tilt: -5deg;
  color: var(--ink);
  font-size: 1.25rem;
}
.doodle-note-recordings .doodle-arrow {
  width: 72px;
  left: calc(100% - 0.1rem);
  top: 0.55rem;
  color: var(--ink);
  transform: rotate(18deg);
  transform-origin: left top;
}
.doodle-note-recordings .doodle-arrow path {
  stroke-width: 3;
}
@media (max-width: 900px) {
  #features .section-head { margin-bottom: clamp(2.4rem, 5vw, 3rem); }
  /* Stacked, the note's negative top would sit over the last point in the
     list above it. Open a gap for it to hang in. */
  .feature-media.has-note { margin-top: 2.6rem; }
  .doodle-note-recordings {
    left: 0.5rem;
    top: -2.4rem;
    font-size: 1.05rem;
  }
  .doodle-note-recordings .doodle-arrow {
    width: 52px;
  }
}

/* Feature clips: sticker on a corner, a peeker gripping a window bar,
   a paper plane sailing off the publish clip */
.feature-media { position: relative; }
.feature-media .doodle-sticker.at-tr { top: -18px; right: -16px; --tilt: 8deg; }
.feature-media .doodle-sticker.at-bl { bottom: -16px; left: -18px; --tilt: -9deg; }
.feature-media .doodle-sticker.at-tl { top: -16px; left: -18px; --tilt: -8deg; }
.feature-media .doodle-sticker.at-br { bottom: -18px; right: -16px; --tilt: 9deg; }
.feature-media .doodle-peek.at-tl { --w: 104px; left: 7%; }
.feature-media .doodle-peek.at-tr { --w: 104px; right: 7%; }
.feature-media .doodle-sparkles.at-tr { top: -30px; right: 16%; width: 52px; --tilt: 8deg; }
.feature-media .doodle-sparkles.at-bl { bottom: -26px; left: 20%; width: 48px; --tilt: -8deg; }
.feature-media .doodle-plane.at-tr { top: -32px; right: -20px; --tilt: 0deg; }
@media (max-width: 900px) {
  .feature-media .doodle-sticker.at-tr { top: -12px; right: -8px; }
  .feature-media .doodle-sticker.at-bl { bottom: -12px; left: -8px; }
  .feature-media .doodle-sticker.at-tl { top: -12px; left: -8px; }
  .feature-media .doodle-sticker.at-br { bottom: -12px; right: -8px; }
  .feature-media .doodle-peek.at-tl,
  .feature-media .doodle-peek.at-tr { --w: 72px; }
  .feature-media .doodle-sparkles.at-tr {
    top: -22px;
    right: 10%;
    width: 38px;
  }
  .feature-media .doodle-sparkles.at-bl {
    bottom: -18px;
    left: 12%;
    width: 36px;
  }
  .feature-media .doodle-plane.at-tr {
    top: -18px;
    right: -6px;
    width: 72px;
  }
}

/* ATS card: rubber stamp of approval */
.tile-media { position: relative; }
.tile-media .doodle-stamp.at-tr { top: 10px; right: -6px; }

/* Custom-domain demo: shield sticker on the card corner + a note with a
   curly arrow pointing down at the two DNS rows */
.dns-demo { position: relative; }
.dns-demo .doodle-sticker.at-br { bottom: -18px; right: -16px; --tilt: 9deg; }
.doodle-note-dns {
  right: 1.2rem;
  top: 0.8rem;
  --tilt: -3deg;
  font-size: 1.15rem;
}
.doodle-note-dns .doodle-arrow {
  width: 66px;
  right: 0.2rem;
  top: 1.3rem;
  transform: scaleX(-1) rotate(22deg);
  transform-origin: center;
}
@media (max-width: 1100px) {
  .doodle-note-dns {
    right: 0.6rem;
    top: 0.5rem;
    font-size: 1rem;
  }
  .doodle-note-dns .doodle-arrow {
    width: 52px;
    top: 1.1rem;
  }
}
@media (max-width: 560px) {
  .doodle-note-dns {
    right: 0.75rem;
    top: 0.55rem;
    font-size: 0.95rem;
  }
}

/* How-it-works: the photo is taped down, a peeker grips its top edge,
   wavy arrows join the steps */
.steps-photo-wrap { position: relative; min-width: 0; }
.steps-photo-wrap .steps-photo { margin: 0; }
.steps-photo-wrap .doodle-tape.at-tl { top: -13px; left: -26px; --tilt: -42deg; width: 84px; }
.steps-photo-wrap .doodle-tape.at-tr { top: -13px; right: -26px; --tilt: 42deg; width: 84px; }
.steps-photo-wrap .doodle-sticker.at-br { bottom: -16px; right: -16px; --tilt: 10deg; }
.steps-photo-wrap .doodle-peek.at-tl { --w: 92px; left: 10%; }
.steps-scene .steps { gap: 2.15rem; }
.steps-scene .step { position: relative; }
/* The doodle is the join — a hairline through the shaft looks unfinished. */
.steps-scene .step:has(.doodle-step-arrow) { border-top-color: transparent; }
.steps-scene .step .doodle-step-arrow {
  position: absolute;
  left: 0.1rem;
  top: -1.95rem;
  width: 24px;
  height: 46px;
  color: var(--ink-4);
  transform: rotate(4deg);
  transform-origin: center bottom;
}
@media (max-width: 1024px) {
  .steps-photo-wrap .doodle-peek.at-tl {
    --w: 72px;
    left: 6%;
  }
  .steps-photo-wrap .doodle-tape.at-tl {
    top: -10px;
    left: -10px;
    width: 64px;
  }
  .steps-photo-wrap .doodle-tape.at-tr {
    top: -10px;
    right: -10px;
    width: 64px;
  }
  .steps-photo-wrap .doodle-sticker.at-br {
    bottom: -12px;
    right: -8px;
  }
}

/* Pricing: ring around "Pro" — a little breathing room so the loop clears its neighbours */
.scribble-word.is-ring { margin: 0 0.22em; }
.scribble-word.is-ring .doodle-ring { color: var(--sticker-coral); }

/* CTA: a CV page launches a paper plane toward the right edge */
.cta-scene .shell { position: relative; }
.cta-liftoff {
  position: absolute;
  right: clamp(0.25rem, 5vw, 4.5rem);
  bottom: 10px;
  width: min(240px, 42vw);
  height: auto;
  z-index: 1;
  color: var(--ink-2);
  overflow: visible;
  pointer-events: none;
}
.reveal .cta-liftoff { opacity: 0; transform: translate(8px, 10px); }
.reveal.in .cta-liftoff {
  transition: opacity 0.55s ease 0.15s, transform 0.7s var(--ease, ease) 0.15s;
  opacity: 1;
  transform: none;
}
.cta-liftoff .doodle-liftoff-plane { transform-origin: 183px 32px; }
/* The plane arrives: it glides out of the torn corner on reveal, settles,
   then keeps a soft float. Until the glide ends the float stays delayed. */
.reveal .cta-liftoff .doodle-liftoff-plane {
  opacity: 0;
  transform: translate(-26px, 18px) rotate(3deg);
}
.reveal.in .cta-liftoff .doodle-liftoff-plane {
  transition: opacity 0.45s ease 0.3s, transform 0.85s cubic-bezier(0.2, 0.6, 0.2, 1) 0.3s;
  opacity: 1;
  transform: none;
  animation: doodle-liftoff-float 5.5s ease-in-out 1.4s infinite;
}
.cta-liftoff .doodle-liftoff-trail {
  opacity: 0;
}
.reveal.in .cta-liftoff .doodle-liftoff-trail {
  transition: opacity 0.5s ease 0.45s;
  opacity: 1;
}
/* Same amber 4-point stars as .doodle-star / .doodle-sparkles elsewhere */
.doodle-liftoff-sparks {
  color: var(--sticker-amber);
}
@keyframes doodle-liftoff-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(3px, -5px) rotate(-2deg); }
}
/* "about ten minutes" sits at the right end of the button row, its arrow
   curling back up onto the buttons. The offset clears the ghost button —
   any less and the arrow's tail crosses the button's edge. */
.cta-note {
  left: 27.8rem;
  bottom: 3.9rem;
  --tilt: -4deg;
  color: var(--ink-3);
}
.cta-note .doodle-arrow {
  width: 46px;
  right: calc(100% + 0.3rem);
  bottom: -0.1rem;
  transform: rotate(192deg);
  transform-origin: center;
}
@media (max-width: 900px) {
  /* Mobile only: keep doodles visible with compact placements.
     Desktop above stays exactly as originally designed.
     The strip below the buttons is split — note on the left, still curling
     back up onto the primary button; paper in the right corner. They no
     longer share the same column, so neither runs off the edge. */
  .cta-scene .shell {
    --cta-pad: clamp(6.75rem, 30vw, 9rem);
    padding-bottom: var(--cta-pad);
  }
  .cta-liftoff {
    right: 0.15rem;
    bottom: 0.15rem;
    width: min(150px, 42vw);
  }
  .cta-note {
    /* Sit just under the primary button so the curl reads as pointing at it. */
    left: clamp(3.4rem, 12vw, 7.5rem);
    right: auto;
    bottom: calc(var(--cta-pad) - 0.35rem);
    font-size: 1rem;
  }
  .cta-note .doodle-arrow {
    width: 40px;
    right: calc(100% + 0.15rem);
    bottom: -0.15rem;
    transform: rotate(192deg);
    transform-origin: center;
  }
}

/* ── Motion opt-out ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .doodle-char, .doodle-sticker, .doodle-star, .doodle-sparkles, .doodle-note,
  .doodle-plane, .doodle-stamp, .doodle-eyes, .doodle-liftoff,
  .doodle-liftoff .doodle-liftoff-plane,
  .doodle-sparkles .doodle-spark,
  .doodle-liftoff .doodle-spark { animation: none !important; }
  .doodle-draw { stroke-dashoffset: 0; animation: none !important; }
  .doodle-draw-head { opacity: 1; animation: none !important; }
  .reveal .doodle-sticker, .reveal .doodle-sparkles, .reveal .doodle-plane,
  .reveal .doodle-stamp, .reveal .cta-liftoff { opacity: 1; }
  .reveal .doodle-stamp { opacity: 0.85; }
  .reveal .doodle-plane { transform: rotate(var(--tilt, 0deg)); }
  .reveal .cta-liftoff { transform: none; }
  .reveal .cta-liftoff .doodle-liftoff-plane { opacity: 1; transform: none; }
  .reveal .cta-liftoff .doodle-liftoff-trail { opacity: 1; }
}