/* Hero animation, pure CSS, plays once. A pencil family drawing hangs from a magnet; handwritten sticky notes
   stick on until it is almost covered; the app icon shimmers in; the notes fall off; the headline shimmers.
   Only transform and opacity move (plus visibility). Stage markup and the geometry/timing block below are
   generated by scripts/hero-notes.py: edit the data there and re-run it. */
@font-face { font-family: "Caveat"; font-weight: 400; font-display: swap; src: url("/assets/fonts/caveat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url("/assets/fonts/caveat-latin-700-normal.woff2") format("woff2"); }

#hero, .hn-stage {
  --fs-h1: clamp(2.6rem, calc(9.2 * var(--su)), 5.2rem);
  --tw: var(--tw-px, calc(var(--fs-h1) * 5.1)); /* width of the headline: measured by main.js, em estimate until then */
  --gap: 80px; /* space between the copy and the picture */
  --pwl: calc(var(--pw) * var(--su)); /* picture width */
  --grp: calc(var(--tw) + var(--gap) + var(--pwl));
  --sdx: calc((var(--tw) + var(--gap)) / 2); --sdy: calc(var(--sly) * var(--su));
  --H: max(100svh, 600px);
  --su: min(calc(100vw / 160), calc(var(--H) / 90));
  --s: max(110px, calc(var(--S) * var(--su)), calc(100vw / 8.5), calc(var(--H) / 4.6));
}
@media (max-width: 1279px) { #hero, .hn-stage { --gap: 60px; } }
@media (max-width: 1023px) { #hero, .hn-stage { --gap: 40px; } }
@media (max-width: 799px) { #hero, .hn-stage { --gap: 20px; } }
/* Tablets: 48px left and right; the picture takes whatever width the headline leaves */
@media (min-width: 701px) and (max-width: 1023px) {
  #hero, .hn-stage { --pwl: calc(100vw - 96px - var(--tw) - var(--gap)); }
  .copy-block { --gutter: 48px; }
  .copy-block .copy { width: calc(100% - 96px); }
}
#hero {
  position: relative; height: var(--H); padding: 0; overflow: hidden;
}
/* hero-notes:geometry:start */
#hero, .hn-stage { --cw:160;--ch:90;--pw:62;--pr:1.43;--slx:40;--sly:0;--S:21;--tl:14;--tt:50;--t-wall-start:0.9s;--t-wall-end:4.9s;--t-icon:5.4s;--t-fall:6.8s;--t-slide:7.4s; }
@media (max-width: 700px) { #hero, .hn-stage { --cw:90;--ch:196;--pw:80;--pr:1.43;--slx:0;--sly:0;--S:32;--tl:7;--tt:24; } }
/* hero-notes:geometry:end */

/* ---- Text: hidden until the notes fall, then it slides in from the left while the picture moves aside ---- */
#hero > .copy {
  position: absolute; z-index: 10; margin: 0;
  left: calc((100% - var(--grp)) / 2);
  top: calc(50% + (var(--tt) - var(--ch) / 2) * var(--su)); transform: translateY(-50%);
  width: var(--tw); max-width: none;
  display: grid; grid-template-columns: var(--tw); justify-content: start; justify-items: start;
}
#hero > .copy > p { width: auto; min-width: 0; }
#hero > .copy h1 { font-size: var(--fs-h1); isolation: isolate; }
#hero > .copy h1, #hero > .copy > p, #hero > .copy .store-links { animation: hn-slide 1.6s cubic-bezier(.22, .7, .2, 1) both; }
#hero > .copy h1 { animation-delay: var(--t-slide); }
#hero > .copy > p { animation-delay: calc(var(--t-slide) + .12s); }
#hero > .copy .store-links { animation-delay: calc(var(--t-slide) + .24s); }
@keyframes hn-slide { 0% { opacity: 0; visibility: hidden; transform: translateX(calc(var(--su) * -16)); } 1% { visibility: visible; } 55% { opacity: 1; } 100% { opacity: 1; visibility: visible; transform: none; } }
#hero .hl { position: relative; display: inline-block; white-space: nowrap; }
/* Whole headline: a warm shimmer travels through the letters word by word, each word swells a little as it passes,
   and sparkles ride along. */
#hero .hl .w {
  --shine: #f0b323; --wd: calc(var(--t-slide) + 1.2s + var(--i) * .34s);
  display: inline-block; transform-origin: 50% 80%;
  background: linear-gradient(105deg, var(--ink) 0 30%, var(--shine) 50%, var(--ink) 70% 100%) 0 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: hn-shimmer 1.5s cubic-bezier(.4, 0, .3, 1) var(--wd) both, hn-pop 1.2s ease-in-out var(--wd) both;
}
html[data-theme="dark"] #hero .hl .w { --shine: #ffd54a; }
#hero .hl-a { --sd0: calc(var(--t-slide) + 1.3s); }
#hero .hl-b { --sd0: calc(var(--t-slide) + 1.3s + .68s); }
@keyframes hn-shimmer { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes hn-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.05); } }
#hero .hl .sp {
  position: absolute; width: .3em; height: .3em; margin: -.15em 0 0 -.15em; pointer-events: none; opacity: 0;
  left: var(--px); top: var(--py); -webkit-text-fill-color: initial;
  filter: drop-shadow(0 0 .12em #ffd54a) drop-shadow(0 0 .3em rgb(255 200 60 / .7));
  animation: hn-spark 1s ease-out calc(var(--sd0) + var(--pd)) both;
}
#hero .hl .sp::before { content: ""; position: absolute; inset: 0; background: #fff7d1; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@keyframes hn-spark { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 35% { opacity: 1; transform: scale(1.25) rotate(40deg); } 100% { opacity: 0; transform: scale(.2) rotate(110deg); } }

/* ---- The drawing: centred at first, then it slides to the right half ---- */
.hn-stage { position: absolute; top: 0; left: 0; width: 100%; height: var(--H); overflow: hidden; pointer-events: none; } /* lives outside <main> so the notes can sit above the dock */
.hn-paper {
  position: absolute; z-index: 20; width: var(--pwl); left: calc(50% - var(--pwl) / 2); top: calc(50% - var(--pwl) / var(--pr) / 2);
  transform: rotate(-1.2deg); animation: hn-paper-in .9s cubic-bezier(.2, .8, .3, 1) .1s both, hn-paper-slide 1.3s cubic-bezier(.45, 0, .2, 1) var(--t-slide) forwards;
}
.hn-paper img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .5em .6em rgb(40 30 20 / .32)) drop-shadow(0 1.6em 2.4em rgb(40 30 20 / .28)); }
.hn-paper { position: absolute; }
/* The two drawings cross-fade through opacity: sad while the notes pile up, happy once they fall */
.hn-paper img.hp-happy { animation: hn-hide .5s ease-in-out calc(var(--t-wall-start) - .1s) forwards, hn-show .5s ease-in-out var(--t-fall) forwards; }
.hn-paper img.hp-sad { position: absolute; left: 0; top: 0; opacity: 0; animation: hn-show .5s ease-in-out calc(var(--t-wall-start) - .1s) forwards, hn-hide .5s ease-in-out var(--t-fall) forwards; }
@keyframes hn-show { to { opacity: 1; } }
@keyframes hn-hide { to { opacity: 0; } }
@keyframes hn-paper-in { 0% { opacity: 0; transform: translateY(-1.6em) rotate(-3deg); } 100% { opacity: 1; transform: translateY(0) rotate(-1.2deg); } }
@keyframes hn-paper-slide { from { transform: translate(0, 0) rotate(-1.2deg); } to { transform: translate(var(--sdx), var(--sdy)) rotate(.6deg); } }

/* ---- Notes ---- */
.hn {
  position: absolute; z-index: var(--z); --w: calc(var(--s) * var(--k)); width: var(--w); aspect-ratio: 1; font-size: calc(var(--w) * .2);
  left: calc(var(--x) - var(--w) / 2); top: calc(var(--y) - var(--w) / 2);
  padding: .42em .5em .4em; border-top: .34em solid var(--c); border-radius: 2px 2px 3px 14px / 2px 2px 3px 3px;
  background: linear-gradient(172deg, color-mix(in srgb, var(--c) 20%, #fffbea), color-mix(in srgb, var(--c) 30%, #fff6dc));
  box-shadow: 0 1px 1px rgb(0 0 0 / .14), 0 .5em .8em -.4em rgb(0 0 0 / .5);
  color: #283038; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; line-height: .95; overflow: hidden;
  transform: rotate(var(--r)); opacity: 0; will-change: transform, opacity;
  animation: hn-stick .6s var(--d) both, hn-fall var(--fdur) var(--fs) forwards;
}
/* Paper texture: fine grain and a soft curl of light, drawn once as an SVG and laid over every sheet */
.hn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .5), transparent 30%, transparent 70%, rgb(90 60 30 / .12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .9 -.28'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 80px 80px;
}
/* Ruled white paper: horizontal lines, a thin margin rule and the colour of the note along the top */
.hn.is-lined {
  border-top-width: .12em; padding-left: .8em; line-height: 1.05;
  background:
    linear-gradient(90deg, transparent .62em, rgb(205 90 100 / .55) .62em calc(.62em + 1px), transparent calc(.62em + 1px)),
    repeating-linear-gradient(180deg, transparent 0 .94em, rgb(110 140 185 / .55) .94em 1em) 0 .2em / 100% 100%,
    linear-gradient(172deg, #fffefb, #f6f4ee);
}
.hn.is-lined b, .hn.is-lined span { line-height: 1.05em; }
.hn.is-lined span { margin-top: 0; }
.hn-stage .hn b { display: block; font-weight: 700; font-size: .96em; letter-spacing: .005em; }
.hn-stage .hn.is-long b { font-size: .82em; }
.hn-stage .hn.is-long { padding-bottom: .2em; }
.hn-stage .hn.is-long span { font-size: .8em; margin-top: .12em; }
.hn-stage .hn span { display: block; margin-top: .22em; font-weight: 400; font-size: .86em; opacity: .82; }
.hn-stage .hn.is-ul b { display: inline; box-decoration-break: clone; background: linear-gradient(transparent 86%, color-mix(in srgb, var(--c) 70%, #283038) 86% 93%, transparent 93%) 0 0 / 100% 100% no-repeat; }
.hn-stage .hn.is-ul span { margin-top: .5em; }
.hn-doodle { position: absolute; right: .35em; bottom: .3em; width: 1.5em; height: 1.5em; fill: none; stroke: color-mix(in srgb, var(--c) 65%, #283038); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hn-stick {
  0% { opacity: 0; transform: translateY(-1.8em) rotate(calc(var(--r) + 10deg)) scale(1.45); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  62% { opacity: 1; transform: translateY(0) rotate(var(--r)) scale(.96); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--r)) scale(1); }
}
/* peel at the top edge, then drop away with a random sideways drift and spin */
@keyframes hn-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); animation-timing-function: ease-out; }
  16% { opacity: 1; transform: translate(0, .25em) rotate(calc(var(--r) + var(--fr) * .12)); animation-timing-function: cubic-bezier(.55, 0, .95, .5); }
  99% { opacity: 1; transform: translate(calc(var(--fx) * var(--su)), calc(var(--H) * 1.1)) rotate(calc(var(--r) + var(--fr))); }
  100% { opacity: 0; visibility: hidden; transform: translate(calc(var(--fx) * var(--su)), calc(var(--H) * 1.1)) rotate(calc(var(--r) + var(--fr))); }
}

/* ---- The app icon: pops in over the notes, shimmers, then bows out as they fall ---- */
.hn-icon {
  position: absolute; z-index: 200; --is: calc(var(--su) * 15); width: var(--is); height: var(--is);
  left: calc(50% - var(--is) / 2); top: calc(50% - var(--is) / 2);
  opacity: 0; animation: hn-icon-in .8s cubic-bezier(.2, 1.3, .35, 1) var(--t-icon) both, hn-icon-out .55s ease-in calc(var(--t-fall) + .25s) forwards;
}
.hn-icon img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22.5%; box-shadow: 0 .5em 1.4em rgb(60 20 35 / .45), 0 0 0 1px rgb(255 255 255 / .35) inset; }
.hn-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgb(255 214 226 / .85), rgb(194 69 107 / .25) 45%, transparent 70%); opacity: 0; animation: hn-pulse 1.5s ease-in-out calc(var(--t-icon) + .3s) 2 both; }
.hn-shine { position: absolute; inset: 0; border-radius: 22.5%; overflow: hidden; }
.hn-shine::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; background: linear-gradient(105deg, transparent 20%, rgb(255 255 255 / .85) 50%, transparent 80%); transform: translateX(-130%) skewX(-12deg); animation: hn-sweep 1.1s ease-in-out calc(var(--t-icon) + .5s) 2 both; mix-blend-mode: soft-light; }
.hn-icon i { position: absolute; left: 50%; top: 50%; width: 1em; height: 1em; font-size: calc(var(--su) * 1.7); margin: -.5em; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; filter: drop-shadow(0 0 .25em #ffd3df); transform: rotate(var(--a)) translateY(calc(var(--is) * -.62)); animation: hn-twinkle 1.2s ease-in-out calc(var(--t-icon) + .6s + var(--sd)) 2 both; }
@keyframes hn-icon-in { 0% { opacity: 0; transform: scale(.3) rotate(-14deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes hn-icon-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); visibility: hidden; } }
@keyframes hn-sweep { from { transform: translateX(-130%) skewX(-12deg); } to { transform: translateX(330%) skewX(-12deg); } }
@keyframes hn-pulse { 0%, 100% { opacity: .15; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes hn-twinkle { 0%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--is) * -.62)) scale(.3); } 50% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--is) * -.62)) scale(1); } }

/* ---- Phones held upright: the text sits on top and the picture slides down under the buttons ---- */
@media (max-width: 700px) {
  #hero, .hn-stage { --su: calc(100vw / 90); --cbh: var(--cb-px, calc(var(--tt) * var(--su) + 68 * var(--su))); --H: calc(var(--cbh) + 21 * var(--su) + var(--pw) * var(--su) / var(--pr)); --s: max(120px, calc(var(--S) * var(--su))); }
  #hero, .hn-stage { --sdx: calc(var(--slx) * var(--su)); --sdy: calc(var(--cbh) + 11 * var(--su) + var(--pw) * var(--su) / var(--pr) / 2 - var(--H) / 2); }
  #hero > .copy { left: var(--gutter); top: calc(var(--tt) * var(--su)); transform: none; width: calc(100% - var(--gutter) * 2); max-width: none; grid-template-columns: 1fr; }
  .hn:not(.is-m) { display: none; }
  .hn { left: calc(var(--mx) - var(--w) / 2); top: calc(var(--my) - var(--w) / 2); }
  .hn-icon { --is: calc(var(--su) * 24); }
}
/* Intro finished (or already seen this session): stay on the calm end state, never replay */
html.hero-done .hn, html.hero-done .hn-icon, html.hero-done #hero .hl .sp, html.hero-done .hn-paper img.hp-sad { display: none; }
html.hero-done .hn-paper { animation: none; transform: translate(var(--sdx), var(--sdy)) rotate(.6deg); }
html.hero-done .hn-paper img.hp-happy { animation: none; }
html.hero-done #hero > .copy h1, html.hero-done #hero > .copy > p, html.hero-done #hero > .copy .store-links { animation: none; }
html.hero-done #hero .hl .w { animation: none; background: none; -webkit-text-fill-color: currentColor; color: inherit; }
/* Reduced motion: skip straight to the calm end state. */
@media (prefers-reduced-motion: reduce) {
  .hn, .hn-icon { display: none; } .hn-paper { animation: none; transform: translate(var(--sdx), var(--sdy)) rotate(.6deg); }
  #hero > .copy h1, #hero > .copy > p, #hero > .copy .store-links { animation: none; }
  #hero .hl .w { animation: none; background: none; -webkit-text-fill-color: currentColor; color: inherit; }
  #hero .hl .sp, .hn-paper img.hp-sad { display: none; }
}