/* ==========================================================================
   Riki & Raian — a paper garden, from afternoon to evening
   ========================================================================== */
:root {
  --off: #FAF6EE; --white: #FFFDF8; --cream: #F4ECDD;
  --linen: #E9DFCC; --sand: #D6C6A8; --creme: #F5EADD; --aqua: #CFE0EC; --aqua-d: #86A7C0;
  --beige: #E9DFCC; --beige-d: #D6C6A8; --beige-dd: #B9A584;
  --blue: #CFE0EC; --blue-l: #E3EEF5; --blue-d: #A8C3D8; --blue-dd: #86A7C0;
  --sage: #B7C4A4; --sage-l: #CFD9BF; --sage-d: #93A67F; --sage-dd: #728763;
  --butter: #F6E7A8; --butter-d: #E8CF7E; --gold: #CDAE6A; --gold-d: #A88A4E;
  --blush: #EBC9C3; --blush-l: #F5E1DC; --blush-d: #D9A9A1;
  --rose: #E2A8A3; --rose-l: #F1CFC9; --rose-d: #C98580;   /* warm rose of the reference decor */
  --ink: #4A4036; --ink-soft: #6F6355;
  --paper-a: rgba(255, 253, 248, .92);
  --veil: rgba(250, 246, 238, .9);

  --accent: #9A7A46;          /* warm gold-brown for small text: replaces every green label */
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --label: "Jost", "Avenir Next", "Helvetica Neue", sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --arabic: "Amiri", "Geeza Pro", serif;

  --shadow: 0 1px 1px rgba(91, 74, 56, .08), 0 8px 20px -8px rgba(91, 74, 56, .22), 0 26px 44px -28px rgba(91, 74, 56, .3);
  --gutter: clamp(16px, 4vw, 40px);
  --r: 22px; --r-s: 14px;
  --tex: url("../assets/fx/crumple-overlay.webp") 0 0 / 512px 512px;
  --grain-old: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .24 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* a single warm gold glint that drifts across the lettering */
  --foil-base: #4A4036;
  --foil: linear-gradient(100deg, var(--foil-base) 0%, var(--foil-base) 36%, #B08E52 44%, #E6CF94 50%, #B08E52 56%, var(--foil-base) 64%, var(--foil-base) 100%);
  color-scheme: light;
}

/* ------------------------------------------------ evening (lights out) */
:root.night {
  --off: #121728; --white: #1B2236; --cream: #232B42;
  --beige: #2B3450; --beige-d: rgba(224, 197, 132, .32); --beige-dd: #8E8673;
  --sage-dd: #C3D1AE; --sage-d: #A7B993; --sage: #6F7E62;
  --gold: #E3C888; --gold-d: #D4B574; --accent: #E3C888;
  --ink: #F4ECDD; --ink-soft: #B9B2A4;
  --paper-a: rgba(27, 34, 54, .94);
  --veil: rgba(18, 23, 40, .92);
  --foil-base: #F4ECDD;
  --shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 8px 20px -8px rgba(0, 0, 0, .5), 0 26px 44px -28px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color 1.4s ease, color 1.4s ease, border-color 1.4s ease, box-shadow 1.4s ease, filter 1.6s ease, opacity 1.6s ease !important;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--off);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; height: 100%; }
main { position: relative; z-index: 1; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
img { display: block; width: 100%; height: auto; }
[data-svg] svg { display: block; width: 100%; height: auto; overflow: visible; }
.fill img { height: 100%; object-fit: cover; object-position: 50% 100%; }
.ground img { object-fit: fill; }
.mirror { transform: scaleX(-1); }
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
/* sections well off screen are not painted (layout is kept, so every position on the page stays true) */

.eyebrow { font-family: var(--label); font-size: .68rem; letter-spacing: .36em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.divider { width: min(280px, 70%); margin: 1.4rem auto 0; }

/* -------------------------------------------------------------- foil */
.foil {
  background: var(--foil);
  background-size: 320% 100%;
  background-position: var(--fx, 50%) 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* -------------------------------------------------------------- paper */
.paper {
  position: relative;
  background: var(--tex), var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.paper::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid var(--beige-d); border-radius: calc(var(--r) - 8px);
  pointer-events: none;
}
.night .paper { box-shadow: 0 0 0 1px rgba(227, 200, 136, .14), var(--shadow); }

/* ============================================================ THE WORLD */
.world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--off); }
.sky { position: absolute; inset: 0; }
.sky { background: var(--tex); }
.sky--dawn  { background-color: #F5EADD; }
.sky--day   { background-color: #DFE9EE; opacity: 0; }
.sky--gold  { background-color: #F4E7C9; opacity: 0; }
.sky--night { background-color: #161C30; opacity: 0; }
.night .sky--night { opacity: 1; }


.orb { position: absolute; left: 0; top: 0; width: clamp(70px, 11vmin, 128px); aspect-ratio: 1; will-change: transform; }
.sun, .moon { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.6s ease; overflow: visible; }
.sun { animation: spin 60s steps(60) infinite; }
@keyframes spin { to { rotate: 360deg; } }
.moon { opacity: 0; }
.night .sun { opacity: 0; }
.night .moon { opacity: 1; }

.stars { position: absolute; inset: 0 0 30% 0; opacity: 0; transition: opacity 2.4s ease .6s; }
.night .stars { opacity: 1; }
.star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #FFF6DE; }
.star-g { position: absolute; inset: 0; will-change: opacity; }
.night .star-g { animation: twinkle 3.6s steps(4, end) infinite; }
.night .star-g--1 { animation-duration: 4.8s; animation-delay: -1.7s; }
.night .star-g--2 { animation-duration: 6.1s; animation-delay: -3.2s; }
@keyframes twinkle { 50% { opacity: .25; } }

/* the moment the lights change: a circle of the new mood opens from her lampshade */
.ink-disc { position: fixed; z-index: 9000; width: 100px; height: 100px; border-radius: 50%; pointer-events: none;
  background: var(--tex), #161C30; transform: translate(-50%,-50%) scale(0); will-change: transform, opacity; }
.eye-float { position: fixed; z-index: 9001; pointer-events: none; }
.eye-float svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ink-disc--day { background: var(--tex), #FAF6EE; }
.theme-snap *, .theme-snap *::before, .theme-snap *::after { transition: none !important; }

/* =============================================================== LOADER */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-content: center; justify-items: center; gap: .9rem;
  background: var(--tex), var(--off);
  transition: opacity .7s ease, visibility .7s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__stage { position: relative; width: min(46vw, 210px); }
.loader__cat { position: relative; transform-origin: 50% 100%; animation: ld-hop 1.04s steps(1, end) infinite; }
.loader__shadow { position: absolute; left: 12%; right: 12%; bottom: -4px; height: 12px; border-radius: 50%; background: rgba(91, 74, 56, .14); animation: ld-shadow 1.04s steps(1, end) infinite; }
@keyframes ld-hop {
  0% { transform: none; } 12.5% { transform: scale(1.04, .93); } 25% { transform: translateY(-16%) scale(.96, 1.06) rotate(-3deg); }
  37.5% { transform: translateY(-24%) rotate(2deg); } 50% { transform: translateY(-12%) scale(.98, 1.03) rotate(-1deg); }
  62.5% { transform: scale(1.06, .9); } 75% { transform: translate(1px, 0) rotate(.6deg); } 87.5% { transform: translate(-1px, 0) rotate(-.4deg); }
}
@keyframes ld-shadow { 0%, 62.5%, 75%, 87.5% { transform: none; opacity: 1; } 25%, 50% { transform: scale(.8); opacity: .7; } 37.5% { transform: scale(.66); opacity: .5; } }
.loader__paws { display: flex; gap: 14px; margin-top: .2rem; }
.loader__paws i { width: 16px; height: 16px; fill: var(--beige-dd); opacity: 0; animation: ld-paw 2.6s steps(1, end) infinite; animation-delay: calc(var(--n) * .26s); rotate: calc(var(--n) * 7deg - 14deg); }
.loader__paws i:nth-child(odd) { translate: 0 -5px; }
.loader__paws svg { width: 100%; height: 100%; display: block; }
@keyframes ld-paw { 0% { opacity: 0; } 8% { opacity: 1; } 70% { opacity: .3; } 85% { opacity: 0; } }
.loader__text { font-style: italic; font-size: 1.15rem; color: var(--ink-soft); text-align: center; padding: 0 var(--gutter); }
.loader__dots i { font-style: normal; animation: dot 1.2s infinite; }
.loader__dots i:nth-child(2) { animation-delay: .2s; }
.loader__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }

/* ============================================================== OPENING */
.opening { display: none; }
.js .opening {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--tex), rgba(250, 246, 238, .9);
  transition: background-color .7s ease;
  padding: var(--gutter);
  overflow: hidden;
}
.opening__sprig { position: absolute; width: clamp(120px, 26vw, 240px); }
.opening__sprig--tl { top: -6px; left: -6px; }
.opening__sprig--br { bottom: -6px; right: -6px; transform: rotate(180deg); }
.opening__inner { text-align: center; display: grid; justify-items: center; gap: 1.4rem; perspective: 1000px; }
.opening__hint { font-style: italic; font-size: 1.2rem; color: var(--ink-soft); animation: breathe-text 2.6s ease-in-out infinite; }
.opening__sub { margin-top: -1.2rem; font-family: var(--label); font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--beige-dd); }
@keyframes breathe-text { 50% { opacity: .45; } }
.opening__sound { display: flex; align-items: center; gap: .7rem; max-width: 330px; margin-top: .2rem; padding: .55rem 1rem .55rem .8rem;
  border-radius: 16px; background: var(--paper-a); box-shadow: 0 6px 14px -8px rgba(91, 74, 56, .4); text-align: left; color: var(--ink-soft); font-size: .92rem; line-height: 1.3; font-style: italic; }
.opening__sound b { display: block; font-family: var(--label); font-style: normal; font-weight: 500; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); margin-bottom: .1rem; }
.opening__sound svg { flex: none; width: 34px; height: 26px; color: var(--gold-d); }
.opening__sound svg path[class] { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; animation: vol 1.8s steps(1, end) infinite; }
.opening__sound .w2 { animation-delay: .2s; } .opening__sound .w3 { animation-delay: .4s; }
@keyframes vol { 0%, 15% { opacity: .15; } 30%, 80% { opacity: 1; } }
/* after the card is out, the letter becomes the page's first sheet and scrolls away natively */
.js .opening.is-sheet {
  position: absolute; top: 0; left: 0; right: 0; bottom: auto; z-index: 110;
  height: 100vh; height: 100svh; pointer-events: none; overflow: clip visible;
  --cut-c: #FAF6EE;
}
.opening.is-sheet .cut { z-index: 1; }
.js .opening.is-ready { background-color: #FAF6EE; }
.opening.is-ready .opening__hint::after { content: ""; display: block; width: 9px; height: 9px; margin: .5rem auto 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; animation: cue-bob 1.6s ease-in-out infinite; }
@keyframes cue-bob { 50% { translate: 0 5px; } }

.envelope { position: relative; width: min(84vw, 420px); aspect-ratio: 420 / 290; perspective: 1400px; cursor: pointer; }
.env-back { position: absolute; inset: 0; background: #DCCCAE; border-radius: 12px; box-shadow: var(--shadow); }
.env-card {
  position: absolute; left: 5%; right: 5%; top: 5%; height: 90%; z-index: 2;
  background: var(--tex), #FFFDF8; border-radius: 10px;
  display: grid; place-content: start center; padding-top: 9%; gap: .1rem;
  box-shadow: 0 2px 8px rgba(91, 74, 56, .15);
}
.env-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid #D6C6A8; border-radius: 6px; }
.env-card__kicker { font-family: var(--label); font-size: .54rem; letter-spacing: .3em; text-transform: uppercase; color: #9A7A46; }
.env-card__names { font-family: var(--script); font-size: clamp(2.3rem, 9vw, 3.1rem); line-height: 1.2; padding: 0 .2em; color: #4A4036; }
.env-card__date { font-family: var(--label); font-size: .6rem; letter-spacing: .32em; color: #6F6355; }
.env-front { position: absolute; inset: 0; z-index: 3; }
.env-front img, .flap-face img, .flap-liner img { height: 100%; }
.env-flap { position: absolute; left: 0; top: 0; width: 100%; height: 62%; z-index: 4; transform-origin: 50% 0; transform-style: preserve-3d; }
.flap-face, .flap-liner { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-liner { transform: rotateX(180deg); }
.seal {
  position: absolute; z-index: 5; left: 50%; top: 59%; width: 27%; aspect-ratio: 1;
  translate: -50% -50%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
  animation: seal-hint 2.6s ease-in-out infinite;
}
/* personal invitations: the guest's name, handwritten on the envelope front below the seal */
.env-to { position: absolute; z-index: 4; left: 4%; right: 4%; bottom: 3.5%; height: 18%; pointer-events: none;
  font-family: var(--script); font-size: clamp(1rem, 4.7vw, 1.65rem); line-height: 1; color: #6E5B3E; text-align: center; white-space: nowrap;
  display: flex; align-items: baseline; justify-content: center; padding-top: 4%; }
.env-to:empty, .invite-card__dear:empty { display: none; }
.env-to small { font-family: var(--display); font-style: italic; font-size: .62em; color: var(--accent); margin-right: .35em; }
.invite-card__dear { font-family: var(--display); font-style: italic; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.55rem); margin: 0 auto .8rem; color: var(--ink); }
.invite-card__dear em { font-family: var(--script); font-style: normal; font-size: 1.35em; color: #8A6E44; padding: 0 .08em; }
.seal:focus-visible { outline: 2px dashed var(--accent); outline-offset: 6px; }
@keyframes seal-hint { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
/* the arm is ~8x taller than it is wide, so it always reaches beyond the top of the screen */
.paw { position: absolute; z-index: 9; width: 19%; left: 40.5%; top: 0; aspect-ratio: 120 / 1000; pointer-events: none; visibility: hidden; }
.paw img { height: 100%; }

/* ============================================================ MUSIC BTN */
.music {
  position: fixed; z-index: 150;
  right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem .55rem .75rem;
  border: 0; border-radius: 999px; background: var(--white); color: var(--ink);
  font: 500 .66rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase;
  box-shadow: var(--shadow); cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s;
}
.music.is-visible { opacity: 1; visibility: visible; }
.music__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.music__bars i { width: 3px; height: 100%; background: var(--sage-d); border-radius: 2px; transform-origin: bottom; animation: bar 1s ease-in-out infinite; }
.music__bars i:nth-child(2) { animation-delay: -.3s; background: var(--gold); }
.music__bars i:nth-child(3) { animation-delay: -.6s; background: var(--butter-d); }
.music__bars i:nth-child(4) { animation-delay: -.15s; background: var(--blue-dd); }
.music.is-paused .music__bars i { animation-play-state: paused; transform: scaleY(.25); }
@keyframes bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ============================================================ THE CATS */
.kitty {
  position: absolute; z-index: 6;
  padding: 0; border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.kitty:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 12px; }
.kitty__art { display: block; width: 100%; height: auto; overflow: visible; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.kitty__eyes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.kitty .eye { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5.5s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
.kitty:hover .kitty__art { transform: translateY(-3px); }
.kitty.is-poked .kitty__art { animation: hop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 40% { transform: translateY(-9%) scale(1.04); } }

/* every cat is drawn at the same size: --cat is roughly the height of a sitting cat */
:root { --cat: clamp(112px, 12vw, 156px); }
/* Head of Security (tuxedo) on the invitation */
.kitty--security { right: 6%; bottom: calc(100% - 3px); width: calc(var(--cat) * 1.87); z-index: 4; }
/* the Usher (calico loaf) in the aisle, facing the stage */
.usher { left: 50%; bottom: 7%; width: calc(var(--cat) * 1.0); translate: -50% 0; z-index: 5; transform-origin: 50% 100%; }
.usher .kitty { position: relative; display: block; width: 100%; }
/* the Timekeeper (orange & white) on the countdown */
.kitty--time { right: 3%; bottom: calc(100% - 8px); width: calc(var(--cat) * 2.75); max-width: 92%; z-index: 4; }
/* Nekko on the garden path, Myxi on the map, Neo at the farewell */
/* Nekko plays under a middle arch and travels with it */
.gate__arch, .gate__art { pointer-events: none; }
.arch-cat { position: absolute; left: 50%; bottom: 3.5%; width: 52%; translate: -50% 0; pointer-events: auto; }
.arch-cat .kitty { position: relative; display: block; width: 100%; }
.say.say--float { bottom: auto; top: 0; translate: -50% -100%; --say-o: 50%; transition: opacity .2s steps(2); }
.map-card { position: relative; }
.kitty--myxi { left: 5%; bottom: calc(100% - 3px); width: calc(var(--cat) * 1.87); z-index: 4; }
.neo-spot { position: relative; z-index: 2; width: var(--cat); margin: 2.4rem auto -.6rem; }
.kitty--neo { position: relative; display: block; width: 100%; }
.cd-sec.tick span { animation: tick .45s ease-out; }
@keyframes tick { 40% { transform: translateY(-4px) scale(1.06); color: var(--gold-d); } }
/* the Lighting Director (tortoiseshell) and her lamp */
.lamp-scene { position: relative; width: calc(var(--cat) * 2.3); }
.kitty--lamp { position: relative; display: block; width: 100%; }
.lamp-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.lamp-svg path { fill-rule: evenodd; }
.l-lamp { fill: #7A6246; } .l-shade { fill: #DCC07E; } .l-shadeHi { fill: #F2E2A8; } .l-coat { fill: #2E221B; }
.l-belly { fill: #9C6136; } .l-paws { fill: #C98A55; } .l-ears { fill: #D99A72; } .l-eye { fill: #FFFDF8; }
.lamp-floor { fill: rgba(91, 74, 56, .14); }
.lamp-svg .lp { fill: #241C17; }
.lamp-body, .lamp-floor { transition: opacity .25s ease; }
.kitty--lamp.is-dark .lamp-body, .kitty--lamp.is-dark .lamp-floor { opacity: 0; }
.kitty--lamp.is-dark .l-eye, .eye-float.is-dark .l-eye { fill: #FFF1C6; stroke: rgba(255, 241, 198, .22); stroke-width: 12; paint-order: stroke; }
/* lamplight cut from two sheets of tissue paper */
.lamp-glow { position: absolute; z-index: 0; left: -16%; top: 2%; width: 58%; aspect-ratio: 1; transition: opacity .15s steps(2); }
.lamp-glow i { position: absolute; inset: 0; border-radius: 50%; background: #FBEBB4; opacity: .5; }
.lamp-glow i + i { inset: 18%; background: #FFF3C8; opacity: .7; }
.kitty--lamp.is-dark .lamp-glow { opacity: 0; }

/* the stage she holds: scroll moves her, the page waits until the lights are out */
.lamp-stage { position: relative; z-index: 2; }
.lamp-stage__pin { position: relative; }
/* scroll room for the show; the scene stays put (native sticky: nothing to fight on a phone) */
.lamp-stage.is-scrub { height: 260vh; height: 260svh; }
.lamp-stage.is-scrub .lamp-stage__pin { position: sticky; top: 0; }
.lamp-stage__pin { height: 100vh; height: 100svh; display: grid; place-content: center; justify-items: center; gap: clamp(18px, 3.5vh, 30px); padding: 12vh var(--gutter) 0; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lamp-meter { width: 120px; height: 2px; border-radius: 2px; background: var(--beige-d); position: relative; overflow: hidden; }
.lamp-meter i { position: absolute; inset: 0; background: var(--gold-d); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
@keyframes meter { to { transform: scaleX(1); } }

/* ================================================================= HERO */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(28px, 6vh, 64px) var(--gutter) clamp(90px, 14vh, 140px);
  text-align: center;
  overflow: hidden;
}
.bismillah { position: relative; font-family: var(--arabic); font-size: clamp(1.6rem, 6.4vw, 2.5rem); line-height: 1.8; color: var(--gold-d); }
.bismillah-en { position: relative; max-width: 30ch; font-style: italic; font-size: clamp(.92rem, .85rem + .3vw, 1.05rem); color: var(--ink-soft); margin-bottom: clamp(10px, 2vh, 22px); }
.arch-stage { position: relative; width: min(108vw, 556px); perspective: 1100px; z-index: 2; margin: -4% 0 -3%; }
.arch-wrap { position: relative; will-change: transform; }
.arch-glow { position: absolute; inset: 19% 19.5% 5%; border-radius: 999px 999px 26px 26px; background: var(--tex), var(--white); opacity: .92; box-shadow: var(--shadow); }
.night .arch-glow { opacity: .9; }
.arch { position: relative; }
.arch__art { display: block; width: 100%; }
.arch__foot { position: absolute; inset: 0; pointer-events: none; }
.arch__foot img { display: block; width: 100%; }
.arch__strands { position: absolute; inset: 0; }
.arch__strands .strand { transform-box: fill-box; transform-origin: 50% 0; }
.no-anim .arch__strands .strand { animation: sway 5.5s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.arch__text {
  position: absolute; left: 25.2%; right: 25.2%; top: 37.8%; bottom: 8.2%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.names { display: flex; flex-direction: column; align-items: center; font-family: var(--script); font-weight: 400; font-size: clamp(3rem, 15vw, 4.7rem); line-height: 1.05; margin: .4rem 0 .8rem; }
.names > span { padding: 0 .15em; }
.names__amp { font-family: var(--display); font-style: italic; font-size: .42em; color: var(--accent); margin: .15em 0; }
.date-line { font-family: var(--label); font-size: clamp(.56rem, 2.4vw, .66rem); letter-spacing: .26em; white-space: nowrap; color: var(--ink-soft); font-weight: 500; }
.scroll-cue { position: absolute; bottom: clamp(18px, 4vh, 48px); left: 50%; translate: -50% 0; z-index: 6; padding: .45rem .9rem .35rem; border-radius: 14px; background: var(--tex), var(--white); box-shadow: var(--shadow); display: grid; justify-items: center; gap: 2px; font-family: var(--label); font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft); }
.scroll-cue svg { width: 14px; animation: paws 2.2s ease-in-out infinite; }
@keyframes paws { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }
/* a hair-thin progress line while the opening words write themselves */
.intro-progress { position: absolute; left: 50%; bottom: clamp(26px, 5vh, 60px); width: 90px; height: 2px; border-radius: 2px; margin-left: -45px; background: var(--beige-d); overflow: hidden; z-index: 3; }
.intro-progress i { position: absolute; inset: 0; background: var(--gold-d); transform-origin: 0 50%; transform: scaleX(0); }

/* ============================================================== INVITE */
.invite { position: relative; padding: calc(var(--cat) + 70px) var(--gutter) clamp(80px, 14vh, 140px); }
.invite-card { max-width: 600px; margin: 0 auto; padding: clamp(40px, 7vw, 60px) clamp(24px, 6vw, 60px) clamp(32px, 6vw, 48px); text-align: center; }
.corner { position: absolute; width: clamp(92px, 21vw, 140px); pointer-events: none; z-index: 3; }
.corner--tl { top: -14px; left: -14px; }
.corner--br { bottom: -14px; right: -14px; transform: rotate(180deg); }
.invite-card__lede { font-size: clamp(1.05rem, .98rem + .5vw, 1.25rem); line-height: 1.7; max-width: 34ch; margin: 0 auto 1.4rem; }
.invite-card__lede em { color: var(--accent); }
.person__name { font-family: var(--script); font-weight: 400; font-size: clamp(2.4rem, 9.4vw, 3.6rem); line-height: 1.2; }
.person__parents { margin-top: .4rem; font-size: .98rem; color: var(--ink-soft); line-height: 1.55; }
.person__parents strong { font-weight: 600; color: var(--ink); }
.invite-card__and { margin: 1rem 0 .6rem; font-family: var(--display); font-style: italic; color: var(--accent); font-size: 1.3rem; }

/* ================================================================ WALK */
.walk { position: relative; height: 340vh; }
.scene { position: sticky; top: 0; z-index: 7; height: 100vh; height: 100svh; overflow-x: clip; overflow-y: visible; }
.layer { position: absolute; will-change: transform; }
.cloud img { animation: drift 26s ease-in-out infinite alternate; }
.cloud--a { top: 10%; left: 6%; width: clamp(120px, 22vw, 260px); }
.cloud--b { top: 22%; right: 26%; width: clamp(90px, 14vw, 170px); opacity: .9; }
@keyframes drift { to { transform: translateX(6vw); } }
.trees { left: 0; right: 0; bottom: 43%; height: 17%; }
.ground { left: 0; right: 0; bottom: 0; height: 43%; transform-origin: 50% 0; }
.stage { left: 0; right: 0; margin-inline: auto; bottom: 39%; width: min(84vw, 760px); transform-origin: 50% 100%; }
.pavilion { bottom: 10%; width: clamp(150px, 28vw, 400px); }
.pavilion--l { left: -3vw; }
.pavilion--r { right: -3vw; }
.chandelier { top: 0; width: clamp(64px, 11vw, 150px); z-index: 6; }
.chandelier--l { left: 20%; }
.chandelier--r { right: 20%; }
.chandelier img { transform-origin: 50% 0; }
.no-anim .chandelier img { animation: chand 6s ease-in-out infinite; }
@keyframes chand { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.bed { bottom: -3%; width: clamp(220px, 42vw, 680px); }
.bed--l { left: -6vw; }
.bed--r { right: -6vw; }
.palm { top: -3%; width: clamp(240px, 52vw, 640px); }
.palm--l { left: -6vw; transform-origin: 0 0; }
.palm--r { right: -6vw; transform-origin: 100% 0; }
.palm img { transform-origin: 0 0; animation: frond 8s ease-in-out infinite; }
.palm--r img { animation-delay: -4s; }
@keyframes frond { 50% { transform: rotate(1.8deg); } }
@media (max-aspect-ratio: 4/5) {
  .stage { width: 112vw; bottom: 45%; }
  .trees { bottom: 47%; height: 13%; }
  .ground { height: 46%; }
  .pavilion { width: 48vw; bottom: 9%; }
  .pavilion--l { left: -20vw; }
  .pavilion--r { right: -20vw; }
  .bed { width: 78vw; }
  .bed--l { left: -18vw; }
  .bed--r { right: -18vw; }
  .palm { width: 70vw; }
  .chandelier { width: 22vw; }
  .chandelier--l { left: 6%; }
  .chandelier--r { right: 6%; }
  .cloud--b { top: 30%; right: 12%; }
  .usher { width: 30vw; bottom: 12%; }
}
.captions { position: absolute; left: 0; right: 0; top: 13%; z-index: 30; display: grid; place-items: center; pointer-events: none; perspective: 800px; }
.caption {
  grid-area: 1 / 1; position: relative;
  padding: .8rem 1.7rem .9rem; text-align: center;
  background: var(--tex), var(--paper-a); border-radius: var(--r-s); box-shadow: var(--shadow);
  font-family: var(--display); font-size: clamp(1.45rem, 1.1rem + 1.9vw, 2.4rem); line-height: 1.2; font-weight: 500;
  opacity: 0; max-width: calc(100vw - 2 * var(--gutter));
}
.caption sup { font-size: .5em; }
.caption__small { display: block; font-family: var(--label); font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: .35rem; }

/* ============================================================= DETAILS */
.details, .closing { position: relative; padding: clamp(64px, 12vh, 130px) var(--gutter); }
.section-head { text-align: center; margin-bottom: clamp(16px, 3vh, 30px); position: relative; z-index: 2; }
.section-title { font-family: var(--display); font-weight: 500; font-style: italic; font-size: clamp(2.4rem, 1.7rem + 3.4vw, 3.9rem); line-height: 1.15; margin-top: .4rem; }
.dcards { max-width: 900px; margin: 0 auto; display: grid; gap: clamp(18px, 3vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); position: relative; z-index: 2; }
.dcard { padding: 28px 20px 26px; text-align: center; }
.dcard__icon { width: 38px; height: 38px; margin: 0 auto 8px; display: block; }
.dcard__label { font-family: var(--label); font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.dcard__main { font-style: italic; color: var(--ink-soft); margin-top: .2rem; line-height: 1.3; }
.dcard__big { font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem, 1.45rem + 1.3vw, 2.35rem); line-height: 1.2; padding: 0 .1em; }
.dcard__sub { color: var(--ink-soft); }
.dcard__link { position: relative; z-index: 3; display: inline-block; margin-top: .4rem; color: var(--accent); font-family: var(--label); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(28px, 5vh, 44px) auto 0; position: relative; z-index: 2; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .7rem 1.4rem;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--off);
  font: 500 .7rem/1 var(--label); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: transform .25s, background .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { background: var(--paper-a); color: var(--ink); border-color: var(--beige-dd); }
.btn--ghost:hover { background: var(--cream); }
.btn:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }

.countdown-wrap { max-width: 600px; margin: calc(var(--cat) + 72px) auto 0; padding: clamp(26px, 4vw, 40px); text-align: center; z-index: 2; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: .7rem 0; position: relative; z-index: 3; }
.countdown div { background: var(--off); border-radius: 12px; padding: .6rem .2rem .5rem; box-shadow: inset 0 0 0 1px var(--beige); }
.countdown span { display: block; font-family: var(--display); font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.countdown small { font-family: var(--label); font-size: .55rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.countdown-note { font-style: italic; color: var(--ink-soft); font-size: .98rem; position: relative; z-index: 3; }

/* ============================================================= CLOSING */
.closing { overflow-x: clip; text-align: center; padding-top: clamp(110px, 16vh, 170px); padding-bottom: clamp(160px, 30vh, 280px); }
.closing__title { font-family: var(--script); font-weight: 400; font-size: clamp(2.6rem, 1.7rem + 4.4vw, 4.4rem); line-height: 1.15; max-width: 16ch; margin: 0 auto; position: relative; z-index: 2; }
.closing__dua { font-family: var(--arabic); font-size: clamp(1.3rem, 1rem + 1.6vw, 1.9rem); color: var(--accent); margin-top: 1.6rem; line-height: 1.9; position: relative; z-index: 2; }
.closing__dua-en { font-style: italic; color: var(--ink-soft); max-width: 40ch; margin: .3rem auto 0; position: relative; z-index: 2; }
.sign-wrap { position: relative; margin: 2.2rem auto 0; }
.closing__sign { font-style: italic; color: var(--ink-soft); }
.closing__sign span { display: block; font-family: var(--label); font-style: normal; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; font-size: .7rem; color: var(--ink); margin-top: .4rem; }
.credits { margin: 2.4rem auto 0; max-width: 40ch; font-family: var(--label); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); line-height: 2.2; position: relative; z-index: 2; }
.credits__lead { display: block; font-family: var(--script); font-size: 1.9rem; letter-spacing: 0; text-transform: none; color: var(--accent); }

/* ======================================================= REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .walk { height: auto; }
  .scene { position: relative; height: 100vh; }
  .captions { gap: 10px; }
  .caption { grid-area: auto; opacity: 1; }
}
.no-anim .walk { height: auto; }
.no-anim .scene { position: relative; }
.no-anim .captions { gap: 10px; }
.no-anim .caption { grid-area: auto; opacity: 1; }

/* ============================================================ THE GAME */
/* a cat you haven't met yet carries a tiny gold glint: a hint, not a label */
.kitty::after {
  content: ""; position: absolute; right: 8%; top: 4%; width: 14px; height: 14px; pointer-events: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: var(--gold); animation: glint 2.4s ease-in-out infinite; transition: opacity .4s;
}
.kitty--usher::after, .kitty--neo::after { right: 30%; top: -6%; }
.kitty--lamp::after { right: 30%; top: 4%; z-index: 2; }
.kitty.found::after { opacity: 0; animation: none; }
@keyframes glint { 0%, 100% { transform: scale(.4) rotate(0deg); opacity: .25; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

.hud { display: none !important; }
.hud-old {
  position: fixed; z-index: 150; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .45rem; padding: .55rem .95rem .55rem .75rem;
  border: 0; border-radius: 999px; background: var(--white); color: var(--ink); box-shadow: var(--shadow); cursor: pointer;
  font: 500 .66rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase;
  opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s, transform .3s;
}
.hud.is-visible { opacity: 1; visibility: visible; }
.hud:hover { transform: translateY(-2px); }
.hud:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
.hud__paw { width: 16px; height: 16px; fill: var(--gold); }
.hud__count { letter-spacing: .08em; color: var(--ink-soft); }
.hud__count b { color: var(--ink); font-size: .95rem; }
.hud.bump { animation: bump .6s cubic-bezier(.3, 1.8, .5, 1); }
.hud.done .hud__paw { fill: var(--accent); }
@keyframes bump { 35% { transform: scale(1.18); } }

.toast {
  position: fixed; z-index: 160; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px);
  width: min(92vw, 380px); display: grid; grid-template-columns: 64px 1fr; gap: .85rem; align-items: center;
  padding: .85rem 1rem; border-radius: 18px; background: var(--tex), var(--white); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, 16px);
  transition: opacity .35s, visibility .35s, transform .45s cubic-bezier(.2, .9, .3, 1.3);
  pointer-events: none;
}
.toast.no-pic { grid-template-columns: 1fr; text-align: center; }
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast__pic { width: 64px; height: 52px; display: grid; place-items: center; }
.toast__pic img { max-height: 52px; width: auto; max-width: 64px; }
.toast__kicker { font-family: var(--label); font-size: .56rem; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.toast__role { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.35rem; line-height: 1.25; margin: .1rem 0; }
.toast__line { font-style: italic; color: var(--ink-soft); font-size: .98rem; line-height: 1.3; }

.chapter {
  position: fixed; z-index: 140; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translate(-50%, -10px);
  display: flex; align-items: center; gap: .7rem; white-space: nowrap;
  font-family: var(--label); font-size: .58rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
  padding: .45rem 1rem; border-radius: 999px; background: var(--paper-a); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s, transform .5s; pointer-events: none;
}
.chapter::before, .chapter::after { content: ""; width: 18px; height: 1px; background: var(--gold); }
.chapter.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.roster { border: 0; padding: 0; background: none; max-width: min(94vw, 460px); width: 100%; color: var(--ink); margin: auto; overflow: visible; }
.roster::backdrop { background: rgba(40, 34, 28, .45); }
.roster[open] .roster__card { animation: rise .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.roster__card { padding: 32px clamp(18px, 5vw, 32px) 24px; text-align: center; max-height: 86vh; overflow: auto; }
.roster__close { position: absolute; z-index: 3; right: 14px; top: 10px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.7rem; color: var(--ink-soft); cursor: pointer; }
.roster__title { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 6vw, 2.1rem); line-height: 1.25; margin-top: .4rem; }
.roster__sub { font-style: italic; color: var(--ink-soft); margin: .2rem 0 1rem; font-size: 1rem; }
.roster__list { list-style: none; padding: 0; display: grid; gap: 8px; text-align: left; position: relative; z-index: 3; }
.slot { display: grid; grid-template-columns: 64px 1fr; gap: .8rem; align-items: center; padding: .5rem .7rem; border-radius: 14px; background: var(--off); box-shadow: inset 0 0 0 1px var(--beige); }
.slot__pic { width: 64px; height: 48px; display: grid; place-items: center; }
.slot__pic img { max-height: 48px; width: auto; max-width: 64px; filter: brightness(0) opacity(.16); transition: filter .6s; }
.night .slot__pic img { filter: brightness(0) invert(1) opacity(.2); }
.slot.found .slot__pic img { filter: none; }
.slot__role { display: block; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.25; }
.slot__duty { display: block; font-family: var(--label); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.slot__hint { display: block; font-style: italic; color: var(--ink-soft); font-size: .95rem; line-height: 1.3; }
.slot:not(.found) .slot__role, .slot:not(.found) .slot__duty, .slot.found .slot__hint { display: none; }

.burst { position: fixed; z-index: 170; left: 0; top: 0; width: 11px; height: 8px; border-radius: 80% 0 80% 0; pointer-events: none; }

/* ============================================================ THE GARDEN GATE */
.gate { position: relative; height: 280vh; }
.gate__scene { position: sticky; top: 0; z-index: 7; height: 100vh; height: 100svh; overflow-x: clip; overflow-y: visible; }
.gate__glow { position: absolute; --gd: min(94vw, max(44vmin, 380px)); left: calc(50% - var(--gd) / 2); top: calc(56% - var(--gd) / 2); width: var(--gd); aspect-ratio: 1; border-radius: 50%; background: var(--tex), var(--cream); box-shadow: var(--shadow); }
.night .gate__glow { opacity: .8; }
.gate__art { display: block; width: 100%; }
.gate__arch { position: absolute; z-index: 1; left: 50%; top: 54%; width: min(78vw, 470px); translate: -50% -50%; will-change: transform, opacity; transform-origin: 50% 54%; }
.gate__date { position: absolute; z-index: 1; left: 50%; top: 56%; translate: -50% -50%; text-align: center; width: min(86vw, 440px); will-change: transform, opacity; }
.gate__day { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); margin-top: .3rem; color: var(--ink-soft); }
.gate__big { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 22px); font-family: var(--display); font-weight: 500; font-size: clamp(3rem, 2rem + 6vw, 5.6rem); line-height: 1; letter-spacing: .02em; margin: .2rem 0 .5rem; }
.gate__big i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.gate__time { font-family: var(--label); font-size: .64rem; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); }
.gate__side { position: absolute; z-index: 2; top: -4%; width: clamp(220px, 44vw, 560px); will-change: transform; }
.gate__side--l { left: -8vw; transform-origin: 0 0; }
.gate__side--r { right: -8vw; transform-origin: 100% 0; }
.gate__bed { position: absolute; z-index: 2; bottom: -4%; width: clamp(220px, 40vw, 620px); will-change: transform; }
.gate__bed--l { left: -8vw; }
.gate__bed--r { right: -8vw; }
/* the garden floor: a lawn that runs to a hedge on the horizon, with a cream runner up the middle;
   stripes, lanterns and petals ride on it at their own depth, so the ground moves as you walk */
.gate__floor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; --hz: 56%; }
.gate__hedge { position: absolute; left: 50%; width: max(108%, 760px); translate: -50% 0; bottom: calc(100% - var(--hz) - 2px); }
.gate__hedge img { display: block; width: 100%; height: auto; }
.gate__lawn { position: absolute; left: 0; top: var(--hz); width: 100%; height: calc(100% - var(--hz)); }
.gate__bands { position: absolute; left: 0; right: 0; bottom: 0; top: var(--hz); overflow: hidden; background: #CFD9BF; }
.gate__bands i { position: absolute; left: 0; top: 0; width: 100%; height: 100px; transform-origin: 0 0; background: #C3CFB2; will-change: transform; }
.night .gate__bands i { background: #18223A; }
.night .gate__bands { background: #1C2741; }
.gate__lawn .g-run { fill: #F1CFC9; } .gate__lawn .g-edge { fill: #FBF4EE; }
.night .gate__lawn .g-run { fill: #2E3854; } .night .gate__lawn .g-edge { fill: #3A4462; }
.gate__props i { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; transform-origin: 50% 100%; }
.gate__props img { display: block; width: 100%; }
.gate__props .lan { width: 54px; } .gate__props .pet { width: 26px; }
.no-anim .gate { height: auto; }
.no-anim .gate__scene { position: relative; }
.no-anim .gate__arch:not([style*="--i:0"]) { display: none; }


/* ============================================================ CUT-PAPER WORLD */
:root { --scene-top: #DCE8EF; --scene-bot: #EEF2EE; --gate-top: #F6EEDB; --gate-bot: #F4EDDF; --stage-bg: #EFE6D5; --stage-hi: #FBF4E4; }
:root.night { --scene-top: #141A2D; --scene-bot: #1A2238; --gate-top: #141B30; --gate-bot: #161D33; --stage-bg: #0E1325; --stage-hi: #161D36; }
.land { position: absolute; left: -4%; right: -4%; bottom: 0; will-change: transform; }
.land img { width: 100%; height: max(var(--h), 28.4vw); object-fit: cover; object-position: 50% 100%; }
.land--1 { --h: clamp(220px, 44vh, 520px); }
.land--2 { --h: clamp(180px, 35vh, 420px); }
.land--3 { --h: clamp(140px, 27vh, 330px); }
.land--4 { --h: clamp(100px, 18vh, 230px); }
.fern { position: absolute; bottom: -3%; width: clamp(150px, 24vw, 340px); will-change: transform; }
.fern--l { left: -3%; }
.fern--r { right: -3%; }
.cloudy { position: absolute; will-change: transform; opacity: .9; }
.cloudy--a { top: 11%; left: 8%; width: clamp(140px, 20vw, 280px); }
.cloudy--b { top: 21%; right: 9%; width: clamp(100px, 13vw, 190px); }
.cloudy img { transition: filter 1.2s ease; }
/* night: each sheet swaps to its own hand-picked indigo, so depth survives the dark */
.land img.nt, .fern img.nt { position: absolute; left: 0; bottom: 0; opacity: 0; transition: opacity 1s ease; }
.fern img.nt { width: 100%; }
.mirror { position: relative; }
.land img:not(.nt), .fern img:not(.nt) { transition: opacity 1s ease; }
.night .land img.nt, .night .fern img.nt { opacity: 1; }
.night .land img:not(.nt), .night .fern img:not(.nt) { opacity: 0; }
.night .cloudy img { filter: brightness(.42) sepia(.7) hue-rotate(190deg) saturate(1.8); opacity: .55; }

/* falling petals: crisp and small far away, big and out of focus right in front of you */
.petals-back { position: absolute; inset: 0; }
.petals-front { position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; }
.pt { position: absolute; left: 0; top: 0; will-change: transform; }
.pt img { display: block; width: 100%; }
.petals-front .pt { opacity: 1; }
.night .pt { opacity: .5; }

/* where one scene meets the next: a hand-cut paper edge with its shadow, never a blur */
/* a deckled paper edge; its shadow lives only above the cut, so there is never a seam line */
.cut { position: absolute; left: 0; right: 0; height: 48px; z-index: 6; pointer-events: none; }
.cut::before, .cut::after { content: ""; position: absolute; inset: 0; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 1600px 100%; mask-size: 1600px 100%; }
.cut::before { background: rgba(60, 46, 32, .3); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 48%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22b%22 x=%22-5%25%22 y=%22-50%25%22 width=%22110%25%22 height=%22200%25%22%3E%3CfeGaussianBlur stdDeviation=%223.2%22/%3E%3C/filter%3E%3Cg filter=%22url%28%23b%29%22%3E%3Cpath d=%22M-1600 23.4 -1592 24.4 -1584 25.7 -1576 25.1 -1568 24.1 -1560 23.5 -1552 23.5 -1544 22.8 -1536 23.0 -1528 22.5 -1520 23.4 -1512 22.8 -1504 21.8 -1496 20.5 -1488 19.5 -1480 20.3 -1472 20.4 -1464 21.3 -1456 22.6 -1448 22.6 -1440 23.3 -1432 23.8 -1424 23.6 -1416 23.6 -1408 23.9 -1400 23.3 -1392 25.6 -1384 26.9 -1376 27.3 -1368 27.1 -1360 26.2 -1352 24.2 -1344 24.5 -1336 23.7 -1328 23.0 -1320 22.7 -1312 23.7 -1304 22.5 -1296 21.8 -1288 19.9 -1280 17.5 -1272 16.0 -1264 15.8 -1256 15.7 -1248 15.8 -1240 16.5 -1232 17.4 -1224 15.5 -1216 14.7 -1208 15.1 -1200 14.5 -1192 15.6 -1184 16.8 -1176 17.9 -1168 19.9 -1160 18.6 -1152 18.5 -1144 17.5 -1136 16.3 -1128 16.1 -1120 16.4 -1112 17.7 -1104 17.2 -1096 17.4 -1088 17.0 -1080 14.0 -1072 12.2 -1064 11.2 -1056 11.7 -1048 11.6 -1040 11.5 -1032 12.2 -1024 11.9 -1016 12.0 -1008 10.5 -1000 11.1 -992 11.6 -984 12.7 -976 13.8 -968 16.0 -960 15.8 -952 17.1 -944 18.5 -936 17.9 -928 17.2 -920 18.6 -912 19.0 -904 20.6 -896 20.8 -888 21.1 -880 21.2 -872 19.7 -864 18.9 -856 19.0 -848 17.6 -840 17.3 -832 18.0 -824 18.8 -816 20.0 -808 18.7 -800 17.7 -792 16.6 -784 18.0 -776 17.7 -768 18.7 -760 20.1 -752 21.5 -744 22.6 -736 23.7 -728 22.6 -720 22.4 -712 23.7 -704 24.3 -696 25.7 -688 28.4 -680 27.6 -672 28.1 -664 27.0 -656 26.8 -648 24.8 -640 23.8 -632 24.1 -624 23.8 -616 24.6 -608 23.8 -600 23.8 -592 22.1 -584 20.0 -576 18.2 -568 18.4 -560 18.9 -552 19.7 -544 20.5 -536 21.8 -528 20.1 -520 19.3 -512 20.4 -504 19.8 -496 21.3 -488 21.4 -480 23.5 -472 23.8 -464 24.0 -456 23.0 -448 21.4 -440 19.5 -432 19.1 -424 20.2 -416 20.5 -408 20.6 -400 19.0 -392 18.3 -384 16.7 -376 14.6 -368 13.5 -360 12.3 -352 12.7 -344 13.2 -336 12.9 -328 14.0 -320 13.6 -312 11.2 -304 12.2 -296 12.2 -288 12.5 -280 12.8 -272 15.9 -264 15.7 -256 17.7 -248 16.9 -240 15.3 -232 15.1 -224 15.9 -216 16.4 -208 17.7 -200 18.8 -192 17.6 -184 16.6 -176 17.0 -168 14.0 -160 14.4 -152 12.7 -144 14.2 -136 14.9 -128 15.6 -120 15.2 -112 15.3 -104 13.4 -96 13.7 -88 13.2 -80 15.1 -72 16.5 -64 17.8 -56 19.5 -48 19.5 -40 19.8 -32 20.8 -24 20.7 -16 21.9 -8 22.6 0 23.4L0 48L-1600 48Z%22/%3E%3Cpath d=%22M0 23.4 8 24.4 16 25.7 24 25.1 32 24.1 40 23.5 48 23.5 56 22.8 64 23.0 72 22.5 80 23.4 88 22.8 96 21.8 104 20.5 112 19.5 120 20.3 128 20.4 136 21.3 144 22.6 152 22.6 160 23.3 168 23.8 176 23.6 184 23.6 192 23.9 200 23.3 208 25.6 216 26.9 224 27.3 232 27.1 240 26.2 248 24.2 256 24.5 264 23.7 272 23.0 280 22.7 288 23.7 296 22.5 304 21.8 312 19.9 320 17.5 328 16.0 336 15.8 344 15.7 352 15.8 360 16.5 368 17.4 376 15.5 384 14.7 392 15.1 400 14.5 408 15.6 416 16.8 424 17.9 432 19.9 440 18.6 448 18.5 456 17.5 464 16.3 472 16.1 480 16.4 488 17.7 496 17.2 504 17.4 512 17.0 520 14.0 528 12.2 536 11.2 544 11.7 552 11.6 560 11.5 568 12.2 576 11.9 584 12.0 592 10.5 600 11.1 608 11.6 616 12.7 624 13.8 632 16.0 640 15.8 648 17.1 656 18.5 664 17.9 672 17.2 680 18.6 688 19.0 696 20.6 704 20.8 712 21.1 720 21.2 728 19.7 736 18.9 744 19.0 752 17.6 760 17.3 768 18.0 776 18.8 784 20.0 792 18.7 800 17.7 808 16.6 816 18.0 824 17.7 832 18.7 840 20.1 848 21.5 856 22.6 864 23.7 872 22.6 880 22.4 888 23.7 896 24.3 904 25.7 912 28.4 920 27.6 928 28.1 936 27.0 944 26.8 952 24.8 960 23.8 968 24.1 976 23.8 984 24.6 992 23.8 1000 23.8 1008 22.1 1016 20.0 1024 18.2 1032 18.4 1040 18.9 1048 19.7 1056 20.5 1064 21.8 1072 20.1 1080 19.3 1088 20.4 1096 19.8 1104 21.3 1112 21.4 1120 23.5 1128 23.8 1136 24.0 1144 23.0 1152 21.4 1160 19.5 1168 19.1 1176 20.2 1184 20.5 1192 20.6 1200 19.0 1208 18.3 1216 16.7 1224 14.6 1232 13.5 1240 12.3 1248 12.7 1256 13.2 1264 12.9 1272 14.0 1280 13.6 1288 11.2 1296 12.2 1304 12.2 1312 12.5 1320 12.8 1328 15.9 1336 15.7 1344 17.7 1352 16.9 1360 15.3 1368 15.1 1376 15.9 1384 16.4 1392 17.7 1400 18.8 1408 17.6 1416 16.6 1424 17.0 1432 14.0 1440 14.4 1448 12.7 1456 14.2 1464 14.9 1472 15.6 1480 15.2 1488 15.3 1496 13.4 1504 13.7 1512 13.2 1520 15.1 1528 16.5 1536 17.8 1544 19.5 1552 19.5 1560 19.8 1568 20.8 1576 20.7 1584 21.9 1592 22.6 1600 23.4L1600 48L0 48Z%22/%3E%3Cpath d=%22M1600 23.4 1608 24.4 1616 25.7 1624 25.1 1632 24.1 1640 23.5 1648 23.5 1656 22.8 1664 23.0 1672 22.5 1680 23.4 1688 22.8 1696 21.8 1704 20.5 1712 19.5 1720 20.3 1728 20.4 1736 21.3 1744 22.6 1752 22.6 1760 23.3 1768 23.8 1776 23.6 1784 23.6 1792 23.9 1800 23.3 1808 25.6 1816 26.9 1824 27.3 1832 27.1 1840 26.2 1848 24.2 1856 24.5 1864 23.7 1872 23.0 1880 22.7 1888 23.7 1896 22.5 1904 21.8 1912 19.9 1920 17.5 1928 16.0 1936 15.8 1944 15.7 1952 15.8 1960 16.5 1968 17.4 1976 15.5 1984 14.7 1992 15.1 2000 14.5 2008 15.6 2016 16.8 2024 17.9 2032 19.9 2040 18.6 2048 18.5 2056 17.5 2064 16.3 2072 16.1 2080 16.4 2088 17.7 2096 17.2 2104 17.4 2112 17.0 2120 14.0 2128 12.2 2136 11.2 2144 11.7 2152 11.6 2160 11.5 2168 12.2 2176 11.9 2184 12.0 2192 10.5 2200 11.1 2208 11.6 2216 12.7 2224 13.8 2232 16.0 2240 15.8 2248 17.1 2256 18.5 2264 17.9 2272 17.2 2280 18.6 2288 19.0 2296 20.6 2304 20.8 2312 21.1 2320 21.2 2328 19.7 2336 18.9 2344 19.0 2352 17.6 2360 17.3 2368 18.0 2376 18.8 2384 20.0 2392 18.7 2400 17.7 2408 16.6 2416 18.0 2424 17.7 2432 18.7 2440 20.1 2448 21.5 2456 22.6 2464 23.7 2472 22.6 2480 22.4 2488 23.7 2496 24.3 2504 25.7 2512 28.4 2520 27.6 2528 28.1 2536 27.0 2544 26.8 2552 24.8 2560 23.8 2568 24.1 2576 23.8 2584 24.6 2592 23.8 2600 23.8 2608 22.1 2616 20.0 2624 18.2 2632 18.4 2640 18.9 2648 19.7 2656 20.5 2664 21.8 2672 20.1 2680 19.3 2688 20.4 2696 19.8 2704 21.3 2712 21.4 2720 23.5 2728 23.8 2736 24.0 2744 23.0 2752 21.4 2760 19.5 2768 19.1 2776 20.2 2784 20.5 2792 20.6 2800 19.0 2808 18.3 2816 16.7 2824 14.6 2832 13.5 2840 12.3 2848 12.7 2856 13.2 2864 12.9 2872 14.0 2880 13.6 2888 11.2 2896 12.2 2904 12.2 2912 12.5 2920 12.8 2928 15.9 2936 15.7 2944 17.7 2952 16.9 2960 15.3 2968 15.1 2976 15.9 2984 16.4 2992 17.7 3000 18.8 3008 17.6 3016 16.6 3024 17.0 3032 14.0 3040 14.4 3048 12.7 3056 14.2 3064 14.9 3072 15.6 3080 15.2 3088 15.3 3096 13.4 3104 13.7 3112 13.2 3120 15.1 3128 16.5 3136 17.8 3144 19.5 3152 19.5 3160 19.8 3168 20.8 3176 20.7 3184 21.9 3192 22.6 3200 23.4L3200 48L1600 48Z%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 48%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22b%22 x=%22-5%25%22 y=%22-50%25%22 width=%22110%25%22 height=%22200%25%22%3E%3CfeGaussianBlur stdDeviation=%223.2%22/%3E%3C/filter%3E%3Cg filter=%22url%28%23b%29%22%3E%3Cpath d=%22M-1600 23.4 -1592 24.4 -1584 25.7 -1576 25.1 -1568 24.1 -1560 23.5 -1552 23.5 -1544 22.8 -1536 23.0 -1528 22.5 -1520 23.4 -1512 22.8 -1504 21.8 -1496 20.5 -1488 19.5 -1480 20.3 -1472 20.4 -1464 21.3 -1456 22.6 -1448 22.6 -1440 23.3 -1432 23.8 -1424 23.6 -1416 23.6 -1408 23.9 -1400 23.3 -1392 25.6 -1384 26.9 -1376 27.3 -1368 27.1 -1360 26.2 -1352 24.2 -1344 24.5 -1336 23.7 -1328 23.0 -1320 22.7 -1312 23.7 -1304 22.5 -1296 21.8 -1288 19.9 -1280 17.5 -1272 16.0 -1264 15.8 -1256 15.7 -1248 15.8 -1240 16.5 -1232 17.4 -1224 15.5 -1216 14.7 -1208 15.1 -1200 14.5 -1192 15.6 -1184 16.8 -1176 17.9 -1168 19.9 -1160 18.6 -1152 18.5 -1144 17.5 -1136 16.3 -1128 16.1 -1120 16.4 -1112 17.7 -1104 17.2 -1096 17.4 -1088 17.0 -1080 14.0 -1072 12.2 -1064 11.2 -1056 11.7 -1048 11.6 -1040 11.5 -1032 12.2 -1024 11.9 -1016 12.0 -1008 10.5 -1000 11.1 -992 11.6 -984 12.7 -976 13.8 -968 16.0 -960 15.8 -952 17.1 -944 18.5 -936 17.9 -928 17.2 -920 18.6 -912 19.0 -904 20.6 -896 20.8 -888 21.1 -880 21.2 -872 19.7 -864 18.9 -856 19.0 -848 17.6 -840 17.3 -832 18.0 -824 18.8 -816 20.0 -808 18.7 -800 17.7 -792 16.6 -784 18.0 -776 17.7 -768 18.7 -760 20.1 -752 21.5 -744 22.6 -736 23.7 -728 22.6 -720 22.4 -712 23.7 -704 24.3 -696 25.7 -688 28.4 -680 27.6 -672 28.1 -664 27.0 -656 26.8 -648 24.8 -640 23.8 -632 24.1 -624 23.8 -616 24.6 -608 23.8 -600 23.8 -592 22.1 -584 20.0 -576 18.2 -568 18.4 -560 18.9 -552 19.7 -544 20.5 -536 21.8 -528 20.1 -520 19.3 -512 20.4 -504 19.8 -496 21.3 -488 21.4 -480 23.5 -472 23.8 -464 24.0 -456 23.0 -448 21.4 -440 19.5 -432 19.1 -424 20.2 -416 20.5 -408 20.6 -400 19.0 -392 18.3 -384 16.7 -376 14.6 -368 13.5 -360 12.3 -352 12.7 -344 13.2 -336 12.9 -328 14.0 -320 13.6 -312 11.2 -304 12.2 -296 12.2 -288 12.5 -280 12.8 -272 15.9 -264 15.7 -256 17.7 -248 16.9 -240 15.3 -232 15.1 -224 15.9 -216 16.4 -208 17.7 -200 18.8 -192 17.6 -184 16.6 -176 17.0 -168 14.0 -160 14.4 -152 12.7 -144 14.2 -136 14.9 -128 15.6 -120 15.2 -112 15.3 -104 13.4 -96 13.7 -88 13.2 -80 15.1 -72 16.5 -64 17.8 -56 19.5 -48 19.5 -40 19.8 -32 20.8 -24 20.7 -16 21.9 -8 22.6 0 23.4L0 48L-1600 48Z%22/%3E%3Cpath d=%22M0 23.4 8 24.4 16 25.7 24 25.1 32 24.1 40 23.5 48 23.5 56 22.8 64 23.0 72 22.5 80 23.4 88 22.8 96 21.8 104 20.5 112 19.5 120 20.3 128 20.4 136 21.3 144 22.6 152 22.6 160 23.3 168 23.8 176 23.6 184 23.6 192 23.9 200 23.3 208 25.6 216 26.9 224 27.3 232 27.1 240 26.2 248 24.2 256 24.5 264 23.7 272 23.0 280 22.7 288 23.7 296 22.5 304 21.8 312 19.9 320 17.5 328 16.0 336 15.8 344 15.7 352 15.8 360 16.5 368 17.4 376 15.5 384 14.7 392 15.1 400 14.5 408 15.6 416 16.8 424 17.9 432 19.9 440 18.6 448 18.5 456 17.5 464 16.3 472 16.1 480 16.4 488 17.7 496 17.2 504 17.4 512 17.0 520 14.0 528 12.2 536 11.2 544 11.7 552 11.6 560 11.5 568 12.2 576 11.9 584 12.0 592 10.5 600 11.1 608 11.6 616 12.7 624 13.8 632 16.0 640 15.8 648 17.1 656 18.5 664 17.9 672 17.2 680 18.6 688 19.0 696 20.6 704 20.8 712 21.1 720 21.2 728 19.7 736 18.9 744 19.0 752 17.6 760 17.3 768 18.0 776 18.8 784 20.0 792 18.7 800 17.7 808 16.6 816 18.0 824 17.7 832 18.7 840 20.1 848 21.5 856 22.6 864 23.7 872 22.6 880 22.4 888 23.7 896 24.3 904 25.7 912 28.4 920 27.6 928 28.1 936 27.0 944 26.8 952 24.8 960 23.8 968 24.1 976 23.8 984 24.6 992 23.8 1000 23.8 1008 22.1 1016 20.0 1024 18.2 1032 18.4 1040 18.9 1048 19.7 1056 20.5 1064 21.8 1072 20.1 1080 19.3 1088 20.4 1096 19.8 1104 21.3 1112 21.4 1120 23.5 1128 23.8 1136 24.0 1144 23.0 1152 21.4 1160 19.5 1168 19.1 1176 20.2 1184 20.5 1192 20.6 1200 19.0 1208 18.3 1216 16.7 1224 14.6 1232 13.5 1240 12.3 1248 12.7 1256 13.2 1264 12.9 1272 14.0 1280 13.6 1288 11.2 1296 12.2 1304 12.2 1312 12.5 1320 12.8 1328 15.9 1336 15.7 1344 17.7 1352 16.9 1360 15.3 1368 15.1 1376 15.9 1384 16.4 1392 17.7 1400 18.8 1408 17.6 1416 16.6 1424 17.0 1432 14.0 1440 14.4 1448 12.7 1456 14.2 1464 14.9 1472 15.6 1480 15.2 1488 15.3 1496 13.4 1504 13.7 1512 13.2 1520 15.1 1528 16.5 1536 17.8 1544 19.5 1552 19.5 1560 19.8 1568 20.8 1576 20.7 1584 21.9 1592 22.6 1600 23.4L1600 48L0 48Z%22/%3E%3Cpath d=%22M1600 23.4 1608 24.4 1616 25.7 1624 25.1 1632 24.1 1640 23.5 1648 23.5 1656 22.8 1664 23.0 1672 22.5 1680 23.4 1688 22.8 1696 21.8 1704 20.5 1712 19.5 1720 20.3 1728 20.4 1736 21.3 1744 22.6 1752 22.6 1760 23.3 1768 23.8 1776 23.6 1784 23.6 1792 23.9 1800 23.3 1808 25.6 1816 26.9 1824 27.3 1832 27.1 1840 26.2 1848 24.2 1856 24.5 1864 23.7 1872 23.0 1880 22.7 1888 23.7 1896 22.5 1904 21.8 1912 19.9 1920 17.5 1928 16.0 1936 15.8 1944 15.7 1952 15.8 1960 16.5 1968 17.4 1976 15.5 1984 14.7 1992 15.1 2000 14.5 2008 15.6 2016 16.8 2024 17.9 2032 19.9 2040 18.6 2048 18.5 2056 17.5 2064 16.3 2072 16.1 2080 16.4 2088 17.7 2096 17.2 2104 17.4 2112 17.0 2120 14.0 2128 12.2 2136 11.2 2144 11.7 2152 11.6 2160 11.5 2168 12.2 2176 11.9 2184 12.0 2192 10.5 2200 11.1 2208 11.6 2216 12.7 2224 13.8 2232 16.0 2240 15.8 2248 17.1 2256 18.5 2264 17.9 2272 17.2 2280 18.6 2288 19.0 2296 20.6 2304 20.8 2312 21.1 2320 21.2 2328 19.7 2336 18.9 2344 19.0 2352 17.6 2360 17.3 2368 18.0 2376 18.8 2384 20.0 2392 18.7 2400 17.7 2408 16.6 2416 18.0 2424 17.7 2432 18.7 2440 20.1 2448 21.5 2456 22.6 2464 23.7 2472 22.6 2480 22.4 2488 23.7 2496 24.3 2504 25.7 2512 28.4 2520 27.6 2528 28.1 2536 27.0 2544 26.8 2552 24.8 2560 23.8 2568 24.1 2576 23.8 2584 24.6 2592 23.8 2600 23.8 2608 22.1 2616 20.0 2624 18.2 2632 18.4 2640 18.9 2648 19.7 2656 20.5 2664 21.8 2672 20.1 2680 19.3 2688 20.4 2696 19.8 2704 21.3 2712 21.4 2720 23.5 2728 23.8 2736 24.0 2744 23.0 2752 21.4 2760 19.5 2768 19.1 2776 20.2 2784 20.5 2792 20.6 2800 19.0 2808 18.3 2816 16.7 2824 14.6 2832 13.5 2840 12.3 2848 12.7 2856 13.2 2864 12.9 2872 14.0 2880 13.6 2888 11.2 2896 12.2 2904 12.2 2912 12.5 2920 12.8 2928 15.9 2936 15.7 2944 17.7 2952 16.9 2960 15.3 2968 15.1 2976 15.9 2984 16.4 2992 17.7 3000 18.8 3008 17.6 3016 16.6 3024 17.0 3032 14.0 3040 14.4 3048 12.7 3056 14.2 3064 14.9 3072 15.6 3080 15.2 3088 15.3 3096 13.4 3104 13.7 3112 13.2 3120 15.1 3128 16.5 3136 17.8 3144 19.5 3152 19.5 3160 19.8 3168 20.8 3176 20.7 3184 21.9 3192 22.6 3200 23.4L3200 48L1600 48Z%22/%3E%3C/g%3E%3C/svg%3E"); }
.cut::after { background: var(--tex), var(--cut-c); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 48%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 26.4 8 27.4 16 28.7 24 28.1 32 27.1 40 26.5 48 26.5 56 25.8 64 26.0 72 25.5 80 26.4 88 25.8 96 24.8 104 23.5 112 22.5 120 23.3 128 23.4 136 24.3 144 25.6 152 25.6 160 26.3 168 26.8 176 26.6 184 26.6 192 26.9 200 26.3 208 28.6 216 29.9 224 30.3 232 30.1 240 29.2 248 27.2 256 27.5 264 26.7 272 26.0 280 25.7 288 26.7 296 25.5 304 24.8 312 22.9 320 20.5 328 19.0 336 18.8 344 18.7 352 18.8 360 19.5 368 20.4 376 18.5 384 17.7 392 18.1 400 17.5 408 18.6 416 19.8 424 20.9 432 22.9 440 21.6 448 21.5 456 20.5 464 19.3 472 19.1 480 19.4 488 20.7 496 20.2 504 20.4 512 20.0 520 17.0 528 15.2 536 14.2 544 14.7 552 14.6 560 14.5 568 15.2 576 14.9 584 15.0 592 13.5 600 14.1 608 14.6 616 15.7 624 16.8 632 19.0 640 18.8 648 20.1 656 21.5 664 20.9 672 20.2 680 21.6 688 22.0 696 23.6 704 23.8 712 24.1 720 24.2 728 22.7 736 21.9 744 22.0 752 20.6 760 20.3 768 21.0 776 21.8 784 23.0 792 21.7 800 20.7 808 19.6 816 21.0 824 20.7 832 21.7 840 23.1 848 24.5 856 25.6 864 26.7 872 25.6 880 25.4 888 26.7 896 27.3 904 28.7 912 31.4 920 30.6 928 31.1 936 30.0 944 29.8 952 27.8 960 26.8 968 27.1 976 26.8 984 27.6 992 26.8 1000 26.8 1008 25.1 1016 23.0 1024 21.2 1032 21.4 1040 21.9 1048 22.7 1056 23.5 1064 24.8 1072 23.1 1080 22.3 1088 23.4 1096 22.8 1104 24.3 1112 24.4 1120 26.5 1128 26.8 1136 27.0 1144 26.0 1152 24.4 1160 22.5 1168 22.1 1176 23.2 1184 23.5 1192 23.6 1200 22.0 1208 21.3 1216 19.7 1224 17.6 1232 16.5 1240 15.3 1248 15.7 1256 16.2 1264 15.9 1272 17.0 1280 16.6 1288 14.2 1296 15.2 1304 15.2 1312 15.5 1320 15.8 1328 18.9 1336 18.7 1344 20.7 1352 19.9 1360 18.3 1368 18.1 1376 18.9 1384 19.4 1392 20.7 1400 21.8 1408 20.6 1416 19.6 1424 20.0 1432 17.0 1440 17.4 1448 15.7 1456 17.2 1464 17.9 1472 18.6 1480 18.2 1488 18.3 1496 16.4 1504 16.7 1512 16.2 1520 18.1 1528 19.5 1536 20.8 1544 22.5 1552 22.5 1560 22.8 1568 23.8 1576 23.7 1584 24.9 1592 25.6 1600 26.4L1600 48L0 48Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 48%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 26.4 8 27.4 16 28.7 24 28.1 32 27.1 40 26.5 48 26.5 56 25.8 64 26.0 72 25.5 80 26.4 88 25.8 96 24.8 104 23.5 112 22.5 120 23.3 128 23.4 136 24.3 144 25.6 152 25.6 160 26.3 168 26.8 176 26.6 184 26.6 192 26.9 200 26.3 208 28.6 216 29.9 224 30.3 232 30.1 240 29.2 248 27.2 256 27.5 264 26.7 272 26.0 280 25.7 288 26.7 296 25.5 304 24.8 312 22.9 320 20.5 328 19.0 336 18.8 344 18.7 352 18.8 360 19.5 368 20.4 376 18.5 384 17.7 392 18.1 400 17.5 408 18.6 416 19.8 424 20.9 432 22.9 440 21.6 448 21.5 456 20.5 464 19.3 472 19.1 480 19.4 488 20.7 496 20.2 504 20.4 512 20.0 520 17.0 528 15.2 536 14.2 544 14.7 552 14.6 560 14.5 568 15.2 576 14.9 584 15.0 592 13.5 600 14.1 608 14.6 616 15.7 624 16.8 632 19.0 640 18.8 648 20.1 656 21.5 664 20.9 672 20.2 680 21.6 688 22.0 696 23.6 704 23.8 712 24.1 720 24.2 728 22.7 736 21.9 744 22.0 752 20.6 760 20.3 768 21.0 776 21.8 784 23.0 792 21.7 800 20.7 808 19.6 816 21.0 824 20.7 832 21.7 840 23.1 848 24.5 856 25.6 864 26.7 872 25.6 880 25.4 888 26.7 896 27.3 904 28.7 912 31.4 920 30.6 928 31.1 936 30.0 944 29.8 952 27.8 960 26.8 968 27.1 976 26.8 984 27.6 992 26.8 1000 26.8 1008 25.1 1016 23.0 1024 21.2 1032 21.4 1040 21.9 1048 22.7 1056 23.5 1064 24.8 1072 23.1 1080 22.3 1088 23.4 1096 22.8 1104 24.3 1112 24.4 1120 26.5 1128 26.8 1136 27.0 1144 26.0 1152 24.4 1160 22.5 1168 22.1 1176 23.2 1184 23.5 1192 23.6 1200 22.0 1208 21.3 1216 19.7 1224 17.6 1232 16.5 1240 15.3 1248 15.7 1256 16.2 1264 15.9 1272 17.0 1280 16.6 1288 14.2 1296 15.2 1304 15.2 1312 15.5 1320 15.8 1328 18.9 1336 18.7 1344 20.7 1352 19.9 1360 18.3 1368 18.1 1376 18.9 1384 19.4 1392 20.7 1400 21.8 1408 20.6 1416 19.6 1424 20.0 1432 17.0 1440 17.4 1448 15.7 1456 17.2 1464 17.9 1472 18.6 1480 18.2 1488 18.3 1496 16.4 1504 16.7 1512 16.2 1520 18.1 1528 19.5 1536 20.8 1544 22.5 1552 22.5 1560 22.8 1568 23.8 1576 23.7 1584 24.9 1592 25.6 1600 26.4L1600 48L0 48Z%22/%3E%3C/svg%3E"); }
.cut--top { top: -46px; }
.cut--bottom { bottom: -46px; transform: scaleY(-1); }
.night .cut::before { background: rgba(0, 0, 0, .55); }
.walk { z-index: 2; --cut-c: var(--scene-top); }
.scene { background: var(--tex), var(--scene-top); }
.gate { z-index: 3; --cut-c: var(--gate-top); }
.gate .cut--bottom { --cut-c: var(--gate-top); }
.gate__scene { background: var(--tex), var(--gate-top); }
.details { z-index: 1; }
.closing { z-index: 1; }

.night .scene .layer img, .night .gate__scene img { filter: brightness(.55) sepia(.25) hue-rotate(190deg) saturate(1.2); }

/* ============================================================ THE MAP */
.map-card { max-width: 820px; margin: calc(var(--cat) + 96px) auto 0; padding: 14px; }
.map svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.map-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 8px 4px; font-style: italic; color: var(--ink-soft); position: relative; z-index: 3; }
.map-label { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 21px; fill: #4A4036; }
.map-n, .map-you { font-family: var(--label); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; fill: #6F6355; }
.map-pin__ring { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.map.is-live .map-pin__ring { animation: ring 2.4s ease-out infinite 1.2s; }
@keyframes ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.night .map svg { filter: brightness(.8) saturate(.85); }

/* ============================================================ STOP-MOTION PAPER */
/* Edges are hand-cut and still; the stop-motion comes from pieces nudged on "fours" (about 3 frames
   a second) and from the arches, which flip between three drawn versions of their own edges. */
.fx .orb svg { filter: url(#pa0); }
.fx .say { filter: url(#pc0); }
/* the paper of a card is its own layer, cut once; the words and cats on it never re-run the filter */
.paper, .caption, .toast { isolation: isolate; }
.fx :is(.paper, .caption, .toast) { background: none !important; box-shadow: none !important; }
.fx :is(.paper, .caption, .toast)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--tex), var(--white); box-shadow: var(--shadow); filter: url(#pc0); will-change: transform;
}
.fx .caption::after { background: var(--tex), var(--paper-a); }
.fx .night .paper::after, .night.fx .paper::after { box-shadow: 0 0 0 1px rgba(227, 200, 136, .14), var(--shadow); }
.holo { will-change: transform; }

@keyframes sm-a { 0% { translate: 0 0; rotate: 0deg; } 25% { translate: .3px -.25px; rotate: .07deg; } 50% { translate: -.25px .2px; rotate: -.06deg; } 75% { translate: .15px .3px; rotate: .04deg; } }
@keyframes sm-b { 0% { translate: .2px .15px; rotate: -.05deg; } 25% { translate: -.25px -.2px; rotate: .06deg; } 50% { translate: .1px -.3px; rotate: .03deg; } 75% { translate: -.2px .1px; rotate: -.07deg; } }
.sm-on :is(.land, .fern, .cloudy, .layer:not(.usher), .kitty__art, .lamp-scene, .arch, .corner, .gate__side, .gate__bed, .gate__art, .opening__sprig, .caption, .paw img, .arch__foot) {
  animation: sm-a 1.2s steps(1, end) infinite;
}
.sm-on :is(.land--2, .land--4, .fern--r, .cloudy--b, .layer:nth-child(even), .corner--br, .gate__bed, .gate__arch:nth-child(odd) .gate__art, .arch__foot) { animation-name: sm-b; }

/* ============================================================ SPEECH BUBBLES */
.say {
  position: absolute; z-index: 8; bottom: calc(100% + 12px); left: var(--say-x, 50%); width: max-content; max-width: min(230px, 62vw);
  padding: .55rem .9rem .6rem; border-radius: 18px; background: var(--tex), var(--white); box-shadow: var(--shadow);
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.12rem; line-height: 1.25; color: var(--ink); text-align: center;
  translate: -50% 0; transform-origin: var(--say-o, 50%) 120%; scale: 0; pointer-events: none; white-space: normal;
}
.say::after { content: ""; position: absolute; bottom: -7px; left: var(--say-o, 50%); width: 16px; height: 16px; translate: -50% 0; rotate: 45deg; background: var(--white); border-radius: 0 0 4px 0; }
.say em { color: var(--accent); }
.say.is-on { scale: 1; animation: say-in .36s steps(1, end); }
.say.is-off { scale: 0; animation: say-out .24s steps(1, end); }
@keyframes say-in { 0% { scale: .25; } 33% { scale: 1.14; rotate: -2deg; } 66% { scale: .95; rotate: 1deg; } 100% { scale: 1; } }
@keyframes say-out { 0% { scale: 1; } 50% { scale: 1.08; } 100% { scale: .3; } }
.kitty--security .say { --say-x: 34%; --say-o: 68%; bottom: calc(100% + 12px); }
.kitty--usher .say { bottom: calc(100% + 14px); }
.kitty--time .say { --say-x: 40%; --say-o: 66%; bottom: calc(100% + 10px); }
.kitty--lamp .say { --say-x: 62%; bottom: calc(100% + 12px); }
.kitty--myxi .say { --say-x: 50%; --say-o: 60%; }
.kitty--nekko .say { --say-x: 30%; --say-o: 50%; bottom: calc(100% + 10px); }
.kitty--neo .say { bottom: calc(100% + 14px); }
/* every bubble is signed by the cat who said it */
.say__name { display: block; margin: -.05rem 0 .15rem; font-family: var(--label); font-style: normal; font-weight: 500; font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.toast { cursor: pointer; }

/* ============================================================ DRESS CODE
   two paper dress forms re-dyed by fabric tags hanging from little gold pins */
.attire { --wear: #A8B89E; max-width: 820px; margin: clamp(36px, 6vh, 56px) auto 0; padding: clamp(24px, 4vw, 40px) clamp(14px, 4vw, 40px); text-align: center; position: relative; z-index: 2; }
.attire__title { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.2; margin-top: .3rem; }
.attire__lede { font-style: italic; color: var(--ink-soft); margin-top: .3rem; }
.attire__stage { display: flex; justify-content: center; gap: clamp(18px, 8vw, 90px); margin: clamp(14px, 3vh, 26px) 0 .4rem; }
.attire__fig { margin: 0; display: grid; justify-items: center; gap: .5rem; }
.attire__svg { width: clamp(104px, 28vw, 150px); height: auto; overflow: visible; filter: drop-shadow(0 6px 8px rgba(91, 74, 56, .16)); }
.attire__svg .wear { fill: var(--wear); stroke: rgba(74, 64, 54, .38); stroke-width: 1.1; stroke-linejoin: round; transition: fill .7s ease; }
.attire__svg .wear-line { stroke: rgba(74, 64, 54, .16); stroke-width: 1; }
.attire__svg .form { stroke: var(--beige-dd); }
.attire__svg .form-knob { fill: var(--beige-dd); }
.attire__svg .gold { fill: #CDAE6A; }
.attire__svg .gold-band { fill: #CDAE6A; opacity: .9; }
.attire__fig.is-swish .attire__svg { animation: swish .7s steps(6, end); transform-origin: 50% 8%; }
@keyframes swish { 30% { rotate: -3deg; } 65% { rotate: 2deg; } }
.attire__fig figcaption b { display: block; font-family: var(--label); font-weight: 500; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.attire__svg .g-a, .attire__svg .g-b { transition: opacity .45s steps(4, end); }
.attire__svg .g-b, .attire__fig[data-g="b"] .g-a { opacity: 0; }
.attire__fig[data-g="b"] .g-b { opacity: 1; }
.attire__svg .veil { fill-opacity: .78; }
.pick { display: inline-flex; margin-top: .35rem; padding: 3px; border-radius: 999px; background: rgba(214, 198, 168, .28); box-shadow: inset 0 0 0 1px rgba(185, 165, 132, .35); }
.pick button { border: 0; background: none; padding: .32rem .7rem; border-radius: 999px; cursor: pointer; font-family: var(--display); font-style: italic; font-size: 1.02rem; line-height: 1; color: var(--ink-soft); white-space: nowrap; transition: background-color .3s, color .3s; }
.pick button[aria-pressed="true"] { background: var(--tex), #FFFDF8; color: var(--ink); box-shadow: 0 2px 6px -2px rgba(91, 74, 56, .35); }
@media (max-width: 420px) { .pick button { padding: .3rem .5rem; font-size: .92rem; } .attire__stage { gap: 10px; } }
.attire__now { font-style: italic; color: var(--ink-soft); margin-top: .4rem; }
.attire__now em { font-family: var(--display); font-weight: 600; color: var(--ink); }
.tags { list-style: none; padding: 0; margin: 1rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(6px, 2vw, 16px); max-width: 640px; }
.tag { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .6rem; width: clamp(54px, 11vw, 70px); padding: 16px 0 0; border: 0; background: none; cursor: pointer; color: var(--ink-soft); transform-origin: 50% 2px; }
.tag::before { content: ""; position: absolute; top: 0; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #CDAE6A; box-shadow: 0 1px 1px rgba(91, 74, 56, .3); }
.tag::after { content: ""; position: absolute; top: 5px; left: 50%; width: 1px; height: 12px; background: rgba(154, 122, 70, .7); }
.tag__chip { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 5px 5px 16px 16px; background: var(--tex), var(--c); box-shadow: inset 0 0 0 1px rgba(74, 64, 54, .16), 0 6px 12px -6px rgba(91, 74, 56, .45); transition: transform .35s ease; }
.tag__chip::before { content: ""; position: absolute; top: 7px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--paper-a, #FBF7EF); box-shadow: inset 0 1px 1px rgba(74, 64, 54, .3); }
.tag__chip::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 18%; height: 1px; border-top: 1px dashed rgba(74, 64, 54, .22); }
.tag__name { justify-self: center; font-family: var(--label); font-weight: 500; font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.tag:hover .tag__chip { transform: translateY(2px); }
.tag[aria-pressed="true"] { color: var(--ink); }
.tag[aria-pressed="true"] .tag__chip { transform: translateY(3px) scale(1.04); box-shadow: inset 0 0 0 1px rgba(74, 64, 54, .2), 0 0 0 2px var(--paper-a, #FBF7EF), 0 0 0 3.5px #CDAE6A, 0 10px 16px -8px rgba(91, 74, 56, .5); }
.tag.is-swing { animation: tag-swing 1s steps(8, end); }
@keyframes tag-swing { 20% { rotate: 9deg; } 45% { rotate: -6deg; } 70% { rotate: 3deg; } 90% { rotate: -1deg; } }
@media (max-width: 560px) { .tags { max-width: 300px; } .tag { width: 58px; } }
@media (prefers-reduced-motion: reduce) { .tag.is-swing, .attire__fig.is-swish .attire__svg { animation: none; } }