/* ============ Boyfriend's Day — shared styles ============ */
:root {
  --mail-red: #8e1b22;
  --maroon: #3a0710;
  --red: #a3162a;
  --wine: #6e0d18;
  --cream: #f6eddb;
  --beige: #ecdcb8;
  --ink: #2b2018;
  --script: 'Pinyon Script', cursive;
  --display: 'Bodoni Moda', 'Playfair Display', serif;
  --type: 'Courier Prime', 'Courier New', monospace;
  --serif: 'Old Standard TT', Georgia, serif;
  --hand: 'Homemade Apple', cursive;
  --comic: 'Bangers', Impact, sans-serif;
  --comic-text: 'Comic Neue', 'Comic Sans MS', sans-serif;
  --paper-tex: url(../assets/paper-textured.svg);
  --paper-crumple: url(../assets/paper-crumpled.svg);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--maroon);
  overflow-x: hidden;
  opacity: 0;
  transition: opacity .7s ease;
  -webkit-font-smoothing: antialiased;
}
body.ready { opacity: 1; }
body.leaving { opacity: 0; }
img { display: block; user-select: none; -webkit-user-drag: none; }

.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0 28px;
}

/* ---------- fixed-size collage stage, scaled to the screen by main.js ---------- */
.stage-fit { position: relative; flex: none; }
.stage {
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
  overflow: hidden;
}

/* absolutely placed sticker / element; rotate with --r */
.abs { position: absolute; transform: rotate(var(--r, 0deg)); }
.stk {
  position: absolute;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(1px 3px 3px rgba(40, 10, 5, .28));
  pointer-events: none;
}
.stk.flat { filter: none; }
.stk.outline {
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1px 4px 4px rgba(0,0,0,.3));
}
.pop { animation: pop .7s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes pop {
  from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.6); }
  to   { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1); }
}
.sway { animation: sway 5s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes sway {
  0%, 100% { transform: rotate(calc(var(--r, 0deg) - 3deg)); }
  50%      { transform: rotate(calc(var(--r, 0deg) + 3deg)); }
}

/* ---------- photo slots (your pictures go in /photos) ---------- */
.photo-slot {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1d1714;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot.bw img { filter: grayscale(1) contrast(1.05); }
.photo-slot.empty::after {
  content: '♡ add photo\A' attr(data-photo);
  white-space: pre;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font: 700 11px/1.5 var(--type);
  color: #e6d6b6;
  letter-spacing: .04em;
  background: repeating-linear-gradient(45deg, #2b231e 0 9px, #241d19 9px 18px);
}

/* ---------- paper & gingham ---------- */
.gingham {
  background-color: #f8efe2;
  background-image:
    linear-gradient(90deg, rgba(190, 30, 42, .55) 50%, transparent 50%),
    linear-gradient(rgba(190, 30, 42, .55) 50%, transparent 50%);
  background-size: 22px 22px;
}
.paper {
  background-color: #efe2c2;
  background-image: var(--paper-tex);
  background-blend-mode: multiply;
}
.tape {
  position: absolute;
  height: 26px;
  background: rgba(214, 196, 160, .82);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 100% 4%, 96% 50%, 100% 92%, 94% 100%, 0 96%, 3% 50%);
}

/* ---------- next button ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
  flex-wrap: wrap;
  padding: 0 16px;
}
.next-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 26px 13px 34px;
  background-color: #f1e3c4;
  background-image: var(--paper-tex);
  background-blend-mode: multiply;
  color: #5c0b16;
  font: 700 13px var(--type);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(110, 20, 30, .25);
  transform: rotate(-1.5deg);
  transition: transform .25s ease, box-shadow .25s ease;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.next-btn::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #5a1018;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
.next-btn .arrow { transition: transform .25s ease; font-size: 16px; }
.next-btn:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(110, 20, 30, .3); }
.next-btn:hover .arrow { transform: translateX(5px); }
.page-no {
  font: 400 12px var(--type);
  letter-spacing: .25em;
  color: rgba(246, 230, 205, .6);
}

/* =====================================================
   1. YOU'VE GOT MAIL
   ===================================================== */
.mail-page {
  background: radial-gradient(ellipse at 50% 35%, #a5242b 0%, #8c1b21 45%, #5b0e13 100%);
  color: #f8ead6;
}
.mail-page .page-shell { justify-content: flex-start; padding: 0; }
.mail-top {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 44px;
  padding: 18px 16px;
  font: 400 13px var(--type);
  letter-spacing: .04em;
  color: #f3e3c8;
}
.mail-top span:first-child { border-bottom: 1px solid rgba(243, 227, 200, .7); }
.mail {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 10px 16px 60px;
}
.mail-title { text-align: center; font-weight: 400; line-height: .8; }
.mail-title .script {
  display: block;
  font-family: var(--script);
  font-size: clamp(70px, 17vw, 118px);
  margin-left: -8%;
  text-shadow: 0 2px 10px rgba(60, 0, 5, .25);
}
.mail-title .caps {
  display: block;
  font-family: var(--display);
  font-size: clamp(48px, 12vw, 86px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(60, 0, 5, .25);
}

.envelope {
  position: relative;
  width: min(84vw, 380px);
  aspect-ratio: 1.45;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1000px;
  animation: float 4.5s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.envelope:focus-visible { outline: 2px dashed #f3e3c8; outline-offset: 10px; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}
.env-shadow {
  position: absolute;
  left: 8%; right: 8%; bottom: -26px;
  height: 22px;
  background: radial-gradient(ellipse, rgba(30, 0, 4, .45), transparent 70%);
}
.env-back, .env-letter, .env-flap-face {
  background-color: #ead9b3;
  background-image: var(--paper-tex);
  background-blend-mode: multiply;
}
.env-back { position: absolute; inset: 0; border-radius: 3px; box-shadow: 0 16px 30px rgba(40, 0, 5, .4); }
.env-letter {
  position: absolute;
  left: 6%; right: 6%; top: 6%;
  height: 86%;
  background-color: #fbf4e6;
  border-radius: 2px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 9%;
  color: var(--wine);
  transition: transform 1s cubic-bezier(.2, .8, .2, 1) .6s;
}
.env-letter .l1 { font-family: var(--script); font-size: clamp(26px, 7vw, 36px); }
.env-letter .l2 { font: 400 11px var(--type); letter-spacing: .3em; margin-top: 4px; text-transform: uppercase; }
.env-pocket { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.env-pocket svg { width: 100%; height: 100%; display: block; }
.env-flap {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 60%;
  z-index: 3;
  transform-origin: top center;
  transition: transform .75s ease-in-out .25s, z-index 0s linear .6s;
  filter: drop-shadow(0 3px 3px rgba(60, 20, 0, .2));
}
.env-flap-face {
  position: absolute;
  inset: 0;
  background-color: #efe0bd;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env-seal {
  position: absolute;
  left: 50%; top: 60%;
  width: 21%;
  z-index: 4;
  transform: translate(-50%, -52%);
  transition: transform .4s ease, opacity .4s ease;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}
.env-deco { position: absolute; z-index: 4; pointer-events: none; transition: opacity .4s; }
.envelope.open { animation: none; }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 0; }
.envelope.open .env-seal { transform: translate(-50%, -52%) scale(1.35); opacity: 0; }
.envelope.open .env-letter { transform: translateY(-62%); }
.envelope.open .env-deco { opacity: 0; }
.tap {
  font: 700 clamp(15px, 4.4vw, 19px) var(--type);
  letter-spacing: .1em;
  color: #f6e7cf;
  background: none;
  border: 0;
  cursor: pointer;
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .45; } }

/* =====================================================
   2. LETTER
   ===================================================== */
.letter-page { background: radial-gradient(ellipse at 50% 15%, #520c18, #2c050c 75%); }
.letter-page .page-shell { padding: 70px 0 40px; }
.letter-stack {
  position: relative;
  width: min(calc(100% - 64px), 430px);
  margin: 0 auto;
}
.letter-gingham {
  position: absolute;
  top: -30px; left: -30px;
  width: 92%;
  height: 74%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.love-strip {
  position: absolute;
  background-color: #efe3c6;
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(70, 50, 30, .2) 27px 28px);
  font: 400 13px/28px var(--hand);
  color: #2e2218;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
.strip-right { right: -46px; top: 42%; width: 74px; bottom: 30px; padding: 2px 8px; }
.strip-bottom { left: 22%; right: -40px; bottom: -30px; height: 40px; padding: 4px 10px; }
.letter {
  position: relative;
  padding: 46px 34px 110px 40px;
  font-size: 15px;
  line-height: 1.42;
  color: #1f1712;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  transform: rotate(-.4deg);
}
.letter h1 {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(34px, 9vw, 44px);
  line-height: 1;
  color: var(--wine);
  text-align: center;
  margin-bottom: 18px;
}
.letter p { margin-bottom: 14px; text-align: left; }
.letter .sign { font-family: var(--script); font-size: 26px; color: var(--wine); margin-top: 6px; }
.forever {
  position: absolute;
  right: 24px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  font: 400 19px var(--serif);
}
.forever span { background: #a58866; color: #1e140d; padding: 0 10px 2px; box-shadow: 1px 2px 3px rgba(0, 0, 0, .25); }
.forever span:first-child { margin-right: 26px; transform: rotate(-1deg); }
.forever span:last-child { transform: rotate(.6deg); }

/* =====================================================
   3. PHOTO COLLAGE  (stage 420 x 700)
   ===================================================== */
.collage-page { background: radial-gradient(ellipse at 50% 20%, #4b0b16, #2a050b 80%); }
.collage {
  background-color: #f2dcae;
  background-image: var(--paper-crumple);
  background-blend-mode: normal;
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.collage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(120, 80, 30, .12) 50%, transparent 50.4%),
    linear-gradient(transparent 32.8%, rgba(120, 80, 30, .1) 33.2%, transparent 33.6%),
    linear-gradient(transparent 66.2%, rgba(120, 80, 30, .1) 66.6%, transparent 67%),
    radial-gradient(ellipse at center, transparent 55%, rgba(110, 70, 20, .25) 100%);
}
.photo-mount {
  background-color: #e9dcc0;
  background-image: var(--paper-tex);
  background-blend-mode: multiply;
  padding: 16px 16px 26px;
  box-shadow: 0 8px 18px rgba(40, 20, 0, .35), inset 0 0 0 1px rgba(120, 90, 50, .3);
}
.photo-mount .photo-slot { outline: 1px solid rgba(110, 80, 40, .45); outline-offset: 5px; }
.gingham-wave { clip-path: polygon(0 0, 22% 0, 36% 5%, 46% 14%, 62% 20%, 78% 30%, 86% 44%, 90% 60%, 100% 72%, 100% 100%, 0 100%); }

/* =====================================================
   4. SCRAPBOOK  (stage 1200 x 760, stacked 600 x 1520)
   ===================================================== */
.scrap-page { background: radial-gradient(ellipse at 50% 30%, #4b0b16, #24040a 85%); }
.scrapbook {
  background-color: #efdfb6;
  background-image: var(--paper-tex);
  background-blend-mode: multiply;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 0 70px rgba(150, 110, 50, .25);
}
.spread-page { position: absolute; top: 0; width: 600px; height: 760px; }
.page-left { left: 0; }
.page-right { left: 600px; }
.stacked .page-right { left: 0; top: 760px; }
.spiral {
  position: absolute;
  left: 574px; top: 0;
  width: 52px; height: 760px;
  z-index: 50;
  background: url(../assets/spiral.svg) center top / 52px 34px repeat-y;
}
.stacked .spiral { left: 274px; top: 460px; height: 600px; transform: rotate(90deg); }
.old-letter {
  padding: 26px 20px;
  font: 400 10.5px/2.1 var(--hand);
  color: rgba(80, 52, 32, .62);
  background-color: #efe3c6;
  background-image: radial-gradient(circle at 80% 70%, rgba(150, 100, 40, .18), transparent 30%), radial-gradient(circle at 20% 20%, rgba(150, 100, 40, .12), transparent 25%), var(--paper-tex);
  background-blend-mode: multiply;
  box-shadow: 0 5px 12px rgba(60, 30, 0, .25);
}
.red-env {
  background: linear-gradient(160deg, #a51b28, #6d0b15);
  box-shadow: 0 6px 16px rgba(60, 0, 5, .35);
}
.red-env::before {
  content: '';
  position: absolute;
  inset: 0 0 45% 0;
  background: linear-gradient(180deg, #8c1420, #74101a);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3));
}
.photo-card { background: #f8f3ea; padding: 10px; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.photo-card.blank { background: #e6dccb; }
.postcard {
  padding: 22px 26px;
  background-color: #dfc99d;
  background-image: var(--paper-tex);
  background-blend-mode: multiply;
  box-shadow: 0 8px 18px rgba(60, 30, 0, .3), inset 0 0 45px rgba(120, 75, 25, .35);
}
.postcard h3 { font: 400 22px var(--type); letter-spacing: .32em; color: #4a3a2a; }
.pc-left { position: absolute; left: 26px; top: 70px; width: 215px; font: 400 12.5px/1.6 var(--serif); color: #4b3a2b; }
.pc-from { position: absolute; left: 26px; bottom: 26px; font: 400 11px var(--type); letter-spacing: .1em; color: #4b3a2b; }
.pc-from span { font-family: var(--script); font-size: 24px; color: var(--red); letter-spacing: 0; margin-left: 6px; }
.pc-divider { position: absolute; left: 254px; top: 70px; bottom: 30px; width: 1.5px; background: rgba(70, 50, 30, .5); }
.pc-addr { position: absolute; left: 276px; right: 26px; top: 128px; }
.pc-addr div { height: 36px; border-bottom: 1px solid rgba(70, 50, 30, .5); font: 400 24px/42px var(--script); color: var(--red); }
.dear-note {
  padding: 24px 28px;
  background-color: #f6efdf;
  background-image: repeating-linear-gradient(transparent 0 25px, rgba(165, 60, 60, .2) 25px 26px), var(--paper-tex);
  background-position: 0 70px, 0 0;
  background-blend-mode: normal, multiply;
  box-shadow: 0 8px 18px rgba(60, 30, 0, .25);
}
.dear-note h2 { font: 400 33px/1.15 var(--script); white-space: nowrap; color: var(--red); text-align: center; margin-bottom: 14px; border-bottom: 1px solid rgba(165, 60, 60, .35); padding-bottom: 8px; }
.dear-note p { font: 400 15px/26px var(--serif); color: #2d211a; }
.polaroid { background: #faf6ee; padding: 14px 14px 72px; box-shadow: 0 10px 22px rgba(0, 0, 0, .3); }
.polaroid .forever-tag {
  position: absolute;
  left: 50%; bottom: 20px;
  transform: translateX(-50%) rotate(-1deg);
  border: 1.5px solid #3a2a20;
  border-radius: 4px;
  padding: 0 16px 2px;
  font: 400 26px var(--script);
  color: #2a1d16;
  white-space: nowrap;
  background: #fffaf0;
}
.vinyl {
  border-radius: 50%;
  background:
    radial-gradient(circle, #e9dcc0 0 3%, #a3162a 3.5% 18%, #1a1517 18.5% 20%, transparent 20.5%),
    repeating-radial-gradient(circle, #151113 0 2px, #231d1f 2px 3px),
    #151113;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
}
.vinyl::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 10%, rgba(255, 255, 255, .12) 14%, transparent 18% 60%, rgba(255, 255, 255, .08) 64%, transparent 68%); }
.leather {
  background: radial-gradient(ellipse at 30% 30%, #9a1a26, #5e0911 75%);
  box-shadow: -4px 0 12px rgba(0, 0, 0, .3);
}
.script-love { font: 400 34px/.9 var(--script); color: var(--red); text-align: right; }
.script-love small { display: block; font-size: 22px; color: #5c3a2c; }

/* =====================================================
   5. OUR LITTLE THINGS (maroon mood board, stage 420 x 760)
   ===================================================== */
.board-page { background: #24040a; }
.board {
  background: radial-gradient(ellipse at 50% 40%, #6a0a0f, #540508 70%, #43040a);
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 220, 200, .06);
}
.film {
  background: #111;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
}
.film::before, .film::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 10px;
  background: repeating-linear-gradient(transparent 0 5px, #f2ece0 5px 13px, transparent 13px 18px);
}
.film::before { left: 4px; }
.film::after { right: 4px; }
.film .photo-slot { flex: 1; border-radius: 2px; background: #2a2622; }
.cam-screen { position: absolute; left: 9%; top: 36.5%; width: 47%; height: 51%; border-radius: 2px; overflow: hidden; }
.board-title { font: 400 44px/1 var(--script); color: #f3e2c4; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

/* =====================================================
   6. SPIDER-MAN  (stage 420 x 712)
   ===================================================== */
.spidey-page { background: #111; }
.comic {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .7);
}
.panels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-auto-rows: 118px;
  gap: 6px;
  padding: 6px;
  background: #fff;
  filter: grayscale(1);
}
.panel {
  position: relative;
  border: 2.5px solid #111;
  overflow: hidden;
  background:
    radial-gradient(circle, #1a1a1a 1.2px, transparent 1.6px) 0 0 / 6px 6px,
    #fff;
}
.panel.lines { background: repeating-conic-gradient(from 0deg at 50% 60%, #fff 0 4deg, #1a1a1a 4deg 5deg); }
.panel.dark  { background: radial-gradient(circle, #fff 1px, transparent 1.4px) 0 0 / 5px 5px, #2a2a2a; }
.panel.light { background: radial-gradient(circle, #888 .9px, transparent 1.2px) 0 0 / 5px 5px, #fafafa; }
.panel.wide { grid-column: span 2; }
.panel.tall { grid-row: span 2; }
.bubble {
  position: absolute;
  background: #fff;
  border: 2px solid #111;
  border-radius: 50% / 45%;
  padding: 7px 10px;
  font: 700 10px/1.15 var(--comic-text);
  text-transform: uppercase;
  text-align: center;
  color: #111;
}
.caption-box {
  position: absolute;
  background: #fff;
  border: 2px solid #111;
  padding: 4px 7px;
  font: 700 10px/1.2 var(--comic-text);
  text-transform: uppercase;
  color: #111;
}
.sfx {
  position: absolute;
  font: 400 34px/1 var(--comic);
  color: #fff;
  -webkit-text-stroke: 2px #111;
  letter-spacing: .03em;
  transform: rotate(-12deg);
}
.city {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background:
    linear-gradient(#111 0 0) 4% 100% / 14% 70% no-repeat,
    linear-gradient(#333 0 0) 20% 100% / 12% 90% no-repeat,
    linear-gradient(#111 0 0) 34% 100% / 16% 55% no-repeat,
    linear-gradient(#444 0 0) 52% 100% / 10% 100% no-repeat,
    linear-gradient(#111 0 0) 64% 100% / 15% 75% no-repeat,
    linear-gradient(#333 0 0) 81% 100% / 12% 60% no-repeat,
    linear-gradient(#111 0 0) 95% 100% / 10% 85% no-repeat;
}
.polaroid-sm { background: #fdfdfb; padding: 10px 10px 40px; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.vintage-photo { background: #efe5cf; padding: 8px; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.kraft {
  background: linear-gradient(135deg, #c8a274, #a98352);
  background-image: var(--paper-crumple), linear-gradient(135deg, #c8a274, #a98352);
  background-blend-mode: multiply;
}
.torn-black { background: #161616; clip-path: polygon(100% 0, 100% 100%, 0 100%, 8% 92%, 22% 80%, 30% 74%, 44% 62%, 56% 52%, 70% 38%, 82% 24%, 92% 10%); }
.torn-red {
  background: linear-gradient(160deg, #b51d2a, #7d0d17);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 6% 86%, 14% 82%, 20% 72%, 30% 66%, 36% 58%, 48% 52%, 56% 40%, 66% 34%, 72% 22%, 84% 16%, 90% 6%);
}
.torn-red::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f4f0ea;
  clip-path: polygon(90% 6%, 92% 3%, 86% 14%, 74% 20%, 68% 32%, 58% 38%, 50% 50%, 38% 56%, 32% 64%, 22% 70%, 16% 80%, 8% 84%, 2% 98%, 6% 86%, 14% 82%, 20% 72%, 30% 66%, 36% 58%, 48% 52%, 56% 40%, 66% 34%, 72% 22%, 84% 16%);
}
.iloveyou-tag { font: 400 15px var(--hand); color: #555; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
.hang-thread { position: absolute; width: 2px; background: #111; }


/* =====================================================
   Dual layouts: desktop (landscape stage) + phone (portrait stage)
   inline vars: --x --y --w --h --dr  |  phone: --mx --my --mw --mh --mr
   ===================================================== */
.lay {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--h, auto);
  --r: var(--dr, 0deg);
}
.stacked .lay {
  left: var(--mx, var(--x)); top: var(--my, var(--y));
  width: var(--mw, var(--w)); height: var(--mh, var(--h, auto));
  --r: var(--mr, var(--dr, 0deg));
}
.stacked .d-only { display: none; }
.stage:not(.stacked) .m-only { display: none; }
.stage.bleed { overflow: visible; }
body.bleed-page { overflow: hidden; height: 100vh; }

/* full-screen paper behind the photo collage */
.collage-page {
  background-color: #f2dcae;
  background-image: radial-gradient(ellipse at center, transparent 50%, rgba(110, 70, 20, .32) 100%), var(--paper-crumple);
}
.collage { background: none; border-radius: 0; box-shadow: none; }
.collage::before { display: none; }
.collage-page .page-no { color: rgba(90, 40, 20, .6); }

/* full-screen comic behind the spider-man page */
.spidey-page { background: #fff; }
.spidey-page .panels {
  position: fixed;
  inset: 0;
  z-index: 0;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
}
.spidey-page .page-shell { position: relative; z-index: 1; }
.comic { background: none; border-radius: 0; box-shadow: none; }
.fixed-web { position: fixed; left: 0; top: 0; width: clamp(150px, 20vmin, 260px); z-index: 1; pointer-events: none; }
.fixed-torn { position: fixed; right: 0; bottom: 0; width: clamp(200px, 40vw, 620px); height: clamp(170px, 48vh, 520px); z-index: 1; pointer-events: none; }
.fixed-torn .torn-black { position: absolute; inset: 0; }
.fixed-torn .torn-red { position: absolute; left: 16%; top: 42%; right: 0; bottom: 0; }

/* letter page: wider letter + stickers scattered on the desk */
.letter-stack { width: min(calc(100% - 64px), 600px); }
.letter { font-size: 16px; padding: 54px 52px 120px 56px; }
.desk { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.letter-page .page-shell { position: relative; z-index: 1; }
.desk img { position: absolute; transform: rotate(var(--r, 0deg)); filter: drop-shadow(2px 5px 6px rgba(0, 0, 0, .45)); }
@media (max-width: 1100px) { .desk { display: none; } }

/* =====================================================
   FAVOURITE PERSON page
   ===================================================== */
.fav-page {
  background-color: #f0dcb4;
  background-image: radial-gradient(ellipse at center, transparent 50%, rgba(110, 70, 20, .3) 100%), var(--paper-crumple);
}
.fav-page .page-no { color: rgba(90, 40, 20, .6); }
.lined {
  background-color: #f7f1e6;
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(90, 90, 110, .28) 33px 34px), var(--paper-tex);
  background-blend-mode: normal, multiply;
  box-shadow: 0 6px 16px rgba(60, 30, 0, .22);
  padding: 30px 30px;
  font: 400 21px/34px var(--hand);
  color: #a3192a;
  overflow: hidden;
}
.stacked .lined { font-size: 15px; line-height: 26px; background-image: repeating-linear-gradient(transparent 0 25px, rgba(90, 90, 110, .28) 25px 26px), var(--paper-tex); padding: 18px; }
.fav-label {
  font: 700 46px/.85 'Caveat Brush', var(--hand);
  color: #6b1712;
  text-shadow: 2px 0 0 #fbf2e4, -2px 0 0 #fbf2e4, 0 2px 0 #fbf2e4, 0 -2px 0 #fbf2e4, 2px 2px 0 #fbf2e4, -2px -2px 0 #fbf2e4, 3px 5px 6px rgba(0, 0, 0, .3);
  white-space: nowrap;
}
.fav-label span { display: block; margin-left: 40px; }
.stacked .fav-label { font-size: 30px; }
.stacked .fav-label span { margin-left: 26px; }
.booth {
  background: #f4f1ea;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}
.stacked .booth { padding: 8px; gap: 8px; }
.booth .photo-slot { flex: 1; }
.big-photo { box-shadow: 0 8px 20px rgba(0, 0, 0, .3); border: 6px solid #fbf8f1; }
.stacked .big-photo { border-width: 4px; }
.quote-strips { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.quote-strips span {
  font: 400 19px var(--serif);
  color: #2b1d16;
  background: #d9cfc0;
  padding: 0 8px 1px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
}
.quote-strips span:nth-child(2) { margin-left: 18px; transform: rotate(-1deg); }
.quote-strips span:nth-child(3) { margin-left: 6px; transform: rotate(1deg); }
.quote-strips span:nth-child(4) { margin-left: 30px; }
.stacked .quote-strips span { font-size: 13px; }

/* =====================================================
   SPIDEY WALL page (newsprint + polaroids)
   ===================================================== */
.wall-page { background: #e7d9bc; }
.newsprint {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #eadcbf;
  background-image: var(--paper-tex);
  background-blend-mode: multiply;
  column-width: 170px;
  column-gap: 18px;
  column-rule: 1px solid rgba(60, 40, 20, .2);
  padding: 14px;
  font: 400 11px/1.35 var(--serif);
  color: rgba(50, 35, 20, .42);
  text-align: justify;
}
.newsprint h4 { font: 700 26px/1 var(--serif); color: rgba(40, 25, 15, .55); margin: 6px 0 4px; text-transform: uppercase; letter-spacing: -.01em; }
.newsprint h5 { font: 700 14px/1.1 var(--serif); color: rgba(40, 25, 15, .5); margin: 6px 0 3px; font-style: italic; }
.newsprint p { margin-bottom: 6px; }
.wall-page .page-shell { position: relative; z-index: 1; }
.wall-page .fixed-web { z-index: 1; }
.sp-pol {
  background: #f3f2ee;
  padding: 12px 12px 50px;
  box-shadow: 0 10px 20px rgba(40, 20, 0, .35);
}
.stacked .sp-pol { padding: 9px 9px 36px; }
.sp-pol .heart { position: absolute; right: 10px; bottom: 6px; width: 21%; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.3)); }
.whaam { text-align: center; line-height: .9; }
.whaam b {
  display: block;
  font: 400 72px var(--comic);
  color: #f5d94a;
  -webkit-text-stroke: 3px #1a1a1a;
  letter-spacing: .02em;
  text-shadow: 5px 5px 0 #c3121f;
  transform: rotate(-6deg);
}
.whaam i { display: inline-block; font: 400 42px var(--script); font-style: normal; color: #a3162a; background: #f3ead6; padding: 0 14px 4px; margin-top: 8px; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.stacked .whaam b { font-size: 40px; -webkit-text-stroke: 2px #1a1a1a; text-shadow: 3px 3px 0 #c3121f; }
.stacked .whaam i { font-size: 24px; }
.lined-text { width: 200px; }
.stacked .lined-text { width: auto; }

/* =====================================================
   MOTION & VIBE — shared animation layer (driven by main.js)
   ===================================================== */
body { --float-c: #c3121f; --amb1: rgba(255, 170, 150, .16); --amb2: rgba(255, 90, 110, .12); }
.mail-page { --float-c: #f6dcc4; --amb1: rgba(255, 200, 170, .22); --amb2: rgba(255, 120, 120, .16); }
.letter-page, .scrap-page { --float-c: #e8919b; }
.collage-page, .fav-page { --float-c: #c3192c; --amb1: rgba(255, 245, 210, .45); --amb2: rgba(255, 190, 150, .2); }
.wall-page { --amb1: rgba(255, 240, 200, .4); }

/* slow wandering light behind everything */
body::before {
  content: '';
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%, var(--amb1), transparent 35%),
    radial-gradient(circle at 72% 68%, var(--amb2), transparent 38%);
  animation: ambient 14s ease-in-out infinite alternate;
}
@keyframes ambient {
  0%   { transform: translate(-6%, -4%) rotate(0deg) scale(1); }
  50%  { transform: translate(5%, 3%) rotate(8deg) scale(1.08); }
  100% { transform: translate(-3%, 6%) rotate(-6deg) scale(1); }
}
body.leaving { opacity: 1; }

/* page transition: a velvet circle closes in with a beating heart */
.veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #8e1b22, #3a0710 70%);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .8s cubic-bezier(.7, 0, .3, 1);
}
.veil.cover, body.leaving .veil { clip-path: circle(75% at 50% 50%); }
.veil-heart { color: #f6dcc4; font-size: 64px; animation: beat 1s ease-in-out infinite; text-shadow: 0 0 30px rgba(255, 180, 170, .7); }
@keyframes beat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(.95); }
  45% { transform: scale(1.15); }
}

/* particles: drifting hearts, twinkles, click bursts, cursor trail */
.sky { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.drift {
  position: absolute;
  bottom: -40px;
  color: var(--float-c);
  text-shadow: 0 0 10px rgba(255, 160, 160, .45);
  animation: drift 12s linear forwards;
}
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(var(--sway), -55vh) rotate(calc(var(--spin) / 2)); }
  90%  { opacity: 1; }
  100% { transform: translate(calc(var(--sway) * -.5), -115vh) rotate(var(--spin)); opacity: 0; }
}
.twinkle {
  position: absolute;
  color: #fff6d8;
  text-shadow: 0 0 8px #ffd9a8, 0 0 16px rgba(255, 200, 150, .8);
  animation: twinkle 2.2s ease-in-out forwards;
}
.collage-page .twinkle, .fav-page .twinkle, .wall-page .twinkle, .spidey-page .twinkle { color: #e0a32a; text-shadow: 0 0 6px rgba(255, 210, 120, .9); }
@keyframes twinkle {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(90deg); opacity: 1; }
}
.burst, .trail { position: absolute; margin: -.6em 0 0 -.4em; color: var(--float-c); }
.burst { animation: burst 1.1s cubic-bezier(.15, .8, .3, 1) forwards; text-shadow: 0 0 8px rgba(255, 140, 150, .6); }
.mail-page .burst { color: #ffe9d2; }
@keyframes burst {
  0%   { transform: translate(0, 0) scale(.3) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--bx), var(--by)) scale(1) rotate(var(--br)); opacity: 0; }
}
.trail { color: #ffc2cc; text-shadow: 0 0 4px #fff, 0 0 9px #ff6f8e, 0 0 16px rgba(255, 70, 110, .8); animation: trail 1.2s ease-out forwards; }
/* light paper pages: deeper pink so the glow still reads on cream */
.collage-page .trail, .fav-page .trail, .wall-page .trail, .spidey-page .trail, .songs-page .trail { color: #ff4d6d; text-shadow: 0 0 4px #fff, 0 0 9px #ff4d6d, 0 0 16px rgba(255, 40, 90, .7); }
@keyframes trail {
  from { transform: translateY(0) scale(1); opacity: 1; }
  60%  { opacity: .9; }
  to   { transform: translateY(30px) scale(.2) rotate(60deg); opacity: 0; }
}

/* --fy lets stickers float up and down on top of the mouse parallax */
@property --fy { syntax: '<length>'; inherits: false; initial-value: 0px; }
.lay { transform: rotate(var(--r, 0deg)); }
.fx { translate: 0 var(--fy); }
/* layers drift with the mouse / phone tilt at different depths (eased in main.js) */
.parallax {
  translate: calc(var(--pmx, 0) * var(--dp, 0) * 1px) calc(var(--pmy, 0) * var(--dp, 0) * 1px + var(--fy));
  transition: scale .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* photos: develop like a fresh polaroid, then a slow Ken Burns drift + a sheen of light */
.photo-slot img { animation: develop 2.8s ease-out backwards, kenburns 16s ease-in-out infinite alternate; transform-origin: 40% 40%; }
.photo-slot:nth-child(2n) img { animation-duration: 2.8s, 19s; animation-delay: 0s, -5s; transform-origin: 60% 55%; }
@keyframes develop { from { filter: brightness(2.2) sepia(.7) blur(6px) contrast(.6); } }
.photo-slot::before, .song::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 160% 0;
  animation: sheen 14s ease-in-out var(--sheen-del, 2s) infinite;
}
.song::after { border-radius: inherit; animation-delay: calc(var(--i, 0) * .6s + 2s); }
@keyframes sheen { 0% { background-position: 160% 0; } 28%, 100% { background-position: -60% 0; } }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-2%, -1.5%); }
}
.photo-mount:hover, .photo-card:not(.blank):hover, .polaroid:hover, .polaroid-sm:hover, .sp-pol:hover, .big-photo:hover, .booth:hover, .vintage-photo:hover {
  scale: 1.05;
  filter: brightness(1.06) saturate(1.1);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .42);
}

/* scrapbook pieces dropping onto the page one by one */
.drop { animation: drop .8s cubic-bezier(.2, 1.3, .4, 1) backwards; }
@keyframes drop {
  from { opacity: 0; transform: translateY(-70px) rotate(calc(var(--r, 0deg) - 10deg)) scale(1.12); }
}
.vinyl.drop { animation: drop .8s cubic-bezier(.2, 1.3, .4, 1) backwards, spin 5s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* next button: rises in, shimmers, arrow nudges */
.nav { animation: rise .9s cubic-bezier(.2, .9, .3, 1) 1.1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.next-btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: shine 3.4s ease-in-out 2s infinite;
}
@keyframes shine { 0% { left: -60%; } 40%, 100% { left: 120%; } }
.next-btn .arrow { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { translate: 0; } 50% { translate: 5px; } }
.next-btn:hover { transform: rotate(0deg) translateY(-3px) scale(1.05); }

/* ---------- 1. mail page ---------- */
.mail-top { animation: rise .8s ease .2s both; }
.mail-title .script { animation: inkin 1.4s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes inkin {
  from { opacity: 0; filter: blur(12px); transform: translateX(-40px) rotate(-6deg); letter-spacing: .2em; }
}
.ch {
  display: inline-block;
  animation: chdrop .8s cubic-bezier(.2, 1.6, .4, 1) both, glow 3s ease-in-out infinite;
  animation-delay: calc(.7s + var(--i) * .07s), calc(2s + var(--i) * .12s);
}
@keyframes chdrop { from { opacity: 0; transform: translateY(-60px) rotate(-20deg) scale(.4); } }
@keyframes glow {
  0%, 100% { text-shadow: 0 2px 10px rgba(60, 0, 5, .25); }
  50% { text-shadow: 0 0 18px rgba(255, 210, 190, .75), 0 0 40px rgba(255, 120, 120, .45); }
}
.envelope::before {
  content: '';
  position: absolute;
  inset: -18% -14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 210, 180, .38), transparent 65%);
  animation: halo 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes halo { 0%, 100% { opacity: .45; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
.envelope:not(.open):hover .env-flap { transform: rotateX(32deg); transition-delay: 0s; }
.envelope:not(.open):hover .env-letter { transform: translateY(-10%); transition-delay: .1s; }
.envelope:not(.open) .env-seal { animation: sealbeat 1.6s ease-in-out infinite; }
@keyframes sealbeat {
  0%, 100% { transform: translate(-50%, -52%) scale(1); }
  15% { transform: translate(-50%, -52%) scale(1.14); }
  30% { transform: translate(-50%, -52%) scale(.97); }
  45% { transform: translate(-50%, -52%) scale(1.08); }
}
.envelope.open .env-letter { transform: translateY(-62%) scale(1.04); box-shadow: 0 0 40px rgba(255, 220, 190, .7); }

/* ---------- letter page ---------- */
.letter-stack { animation: unfold 1.2s cubic-bezier(.2, .9, .25, 1) .2s both; }
@keyframes unfold { from { opacity: 0; transform: perspective(900px) translateY(60px) rotateX(25deg) scale(.94); } }
.reveal { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s ease; }
.reveal.in { opacity: 1; transform: none; filter: none; }
.forever span.reveal { transform: translateX(40px) rotate(4deg); }
.forever span.reveal.in:first-child { transform: rotate(-1deg); }
.forever span.reveal.in:last-child { transform: rotate(.6deg); }
.marquee.v { animation: mq-v 22s linear infinite; }
.marquee.h { display: inline-block; animation: mq-h 18s linear infinite; }
@keyframes mq-v { to { transform: translateY(-50%); } }
@keyframes mq-h { to { transform: translateX(-50%); } }

/* ---------- favourite page ---------- */
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.quote-strips span { animation: slidein .7s cubic-bezier(.2, 1.3, .4, 1) both; }
.quote-strips span:nth-child(1) { animation-delay: 1.2s; }
.quote-strips span:nth-child(2) { animation-delay: 1.4s; }
.quote-strips span:nth-child(3) { animation-delay: 1.6s; }
.quote-strips span:nth-child(4) { animation-delay: 1.8s; }
@keyframes slidein { from { opacity: 0; translate: -40px 0; } }

/* ---------- spider-man pages ---------- */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.fixed-torn { animation: tear 1s cubic-bezier(.2, 1, .3, 1) .3s both; }
@keyframes tear { from { transform: translate(40%, 40%); opacity: 0; } }
.panel.zap { animation: zap .6s ease-out; z-index: 2; }
@keyframes zap {
  0% { filter: brightness(1.25); scale: 1.02; }
  30% { filter: brightness(1.1); scale: 1.01; }
  100% { filter: none; scale: 1; }
}
.sfx { animation: sfx 3.2s ease-in-out infinite; }
.panel:nth-child(3n) .sfx { animation-delay: -.6s; }
.panel:nth-child(3n+1) .sfx { animation-delay: -1.2s; }
@keyframes sfx { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
.whaam b { animation: whaam 7s cubic-bezier(.3, 1.8, .5, 1) 1.4s infinite; }
@keyframes whaam {
  0%, 86%, 100% { scale: 1; translate: 0; }
  89% { scale: 1.1; translate: -2px 1px; }
  92% { scale: .98; translate: 2px -1px; }
  95% { scale: 1.04; translate: 0; }
}
.sp-pol .heart { animation: fx-beat 2.8s ease-in-out infinite; }
.sp-pol:nth-child(2n) .heart { animation-delay: -.7s; }

/* =====================================================
   SONGS THAT REMIND ME OF YOU (kiss-print wall + now-playing cards)
   ===================================================== */
.songs-page { background: #e6d8cf; --float-c: #b3122a; --amb1: rgba(255, 240, 225, .45); --amb2: rgba(190, 40, 60, .12); }
.songs-page .page-no { color: #5c0b16; background: rgba(246, 236, 222, .85); padding: 4px 10px; border-radius: 3px; }
.kiss-wall {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #e9ddd4;
}
.kiss-wall img { position: absolute; opacity: .62; mix-blend-mode: multiply; filter: saturate(.85) contrast(1.05); }
.kiss-wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 245, 238, .15) 30%, rgba(70, 10, 20, .35) 100%), var(--paper-tex);
  mix-blend-mode: multiply;
}
.songs-page .page-shell { position: relative; z-index: 1; }
.songs-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 700 76px/1 'Amatic SC', var(--hand);
  color: #fff;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(90, 10, 20, .35), 0 4px 18px rgba(60, 0, 10, .55);
}
.songs-title img { height: 62px; width: auto; filter: drop-shadow(1px 3px 3px rgba(40, 0, 5, .35)); animation: fx-beat 2.8s ease-in-out infinite; }
.songs-title img + img { height: 54px; animation-delay: -.4s; }
.stacked .songs-title { font-size: 30px; flex-wrap: wrap; padding: 0 10px; text-align: center; }
.stacked .songs-title img { height: 30px; }
.stacked .songs-title img + img { height: 26px; }
.song {
  border: 0;
  padding: 10px;
  background: var(--fc, #2a2a2c);
  box-shadow: 0 14px 28px rgba(50, 5, 10, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stacked .song { padding: 5px; }
.song img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transform: scale(1.06); }
.stacked .song img { border-radius: 7px; }
.song:hover, .song:focus-visible { scale: 1.08; z-index: 20; box-shadow: 0 26px 44px rgba(50, 5, 10, .55); outline: none; }


.song-zoom {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgba(30, 4, 10, .72);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
  cursor: zoom-out;
}
.song-zoom.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.song-zoom figure {
  width: min(78vw, 340px);
  padding: 12px 12px 16px;
  background: #1c1a1b;
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 120, 140, .25);
  transform: scale(.7) rotate(-6deg);
  transition: transform .5s cubic-bezier(.2, 1.4, .4, 1);
}
.song-zoom.show figure { transform: none; }
.song-zoom img { width: 100%; max-height: 64vh; object-fit: cover; border-radius: 16px; }
.song-zoom figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 12px 6px 0; color: #f6eee8; }
.song-zoom b { font: 700 16px var(--type); }
.song-zoom small { grid-column: 2; font: 400 12px var(--type); color: rgba(246, 238, 232, .6); }
.eq { grid-row: span 2; display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.eq i { width: 4px; height: 100%; border-radius: 2px; background: #e8405a; transform-origin: bottom; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; }
.eq i:nth-child(3) { animation-delay: -.6s; }
.eq i:nth-child(4) { animation-delay: -.45s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* =====================================================
   STICKER PERSONALITIES (classes added by main.js from the file name)
   each one runs after its entrance (pop / drop) has finished
   ===================================================== */
.fx { --fxa: fx-wiggle calc(5s * var(--fd, 1)) ease-in-out infinite; animation: var(--fxa); animation-delay: var(--fdel, 0s); }
.fx.pop:not(.entered) { animation: pop .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.fx.drop:not(.entered) { animation: drop .8s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.fx.entered { animation: var(--fxa); }

.fx-beat    { --fxa: fx-beat calc(1.4s * var(--fd, 1)) ease-in-out infinite; }
.fx-smooch  { --fxa: fx-smooch calc(3.2s * var(--fd, 1)) ease-in-out infinite; }
.fx-swing   { --fxa: fx-swing calc(2.6s * var(--fd, 1)) ease-in-out infinite; transform-origin: 50% 0; }
.fx-breeze  { --fxa: fx-breeze calc(3.6s * var(--fd, 1)) ease-in-out infinite; transform-origin: 50% 100%; }
.fx-star    { --fxa: fx-star calc(7s * var(--fd, 1)) linear infinite; }
.fx-squish  { --fxa: fx-squish calc(2.4s * var(--fd, 1)) ease-in-out infinite; transform-origin: 50% 100%; }
.fx-float, .fx-flash { --fxa: fx-float calc(4s * var(--fd, 1)) ease-in-out infinite; }
.fx-pin     { --fxa: fx-pin calc(4s * var(--fd, 1)) ease-in-out infinite; transform-origin: 50% 90%; }

@keyframes fx-wiggle {
  0%, 100% { rotate: 0deg; --fy: 0px; }
  25% { rotate: 1.2deg; --fy: -2px; }
  75% { rotate: -1.2deg; --fy: 1px; }
}
@keyframes fx-beat {
  0%, 60%, 100% { scale: 1; }
  12% { scale: 1.07; }
  24% { scale: .99; }
  36% { scale: 1.04; }
}
@keyframes fx-smooch {
  0%, 60%, 100% { scale: 1; rotate: 0deg; }
  15% { scale: 1.05; rotate: -2deg; }
  30% { scale: 1; rotate: 1deg; }
}
@keyframes fx-swing {
  0%, 100% { rotate: -3.5deg; }
  50% { rotate: 3.5deg; }
}
@keyframes fx-breeze {
  0%, 100% { rotate: -2deg; }
  50% { rotate: 2deg; }
}
@keyframes fx-star {
  0%, 100% { rotate: -6deg; filter: drop-shadow(1px 3px 3px rgba(40, 10, 5, .28)) drop-shadow(0 0 0 rgba(255, 210, 120, 0)); }
  50% { rotate: 6deg; filter: drop-shadow(1px 3px 3px rgba(40, 10, 5, .28)) drop-shadow(0 0 7px rgba(255, 210, 120, .7)); }
}
@keyframes fx-squish {
  0%, 70%, 100% { scale: 1 1; --fy: 0px; }
  15% { scale: 1.03 .97; --fy: 0px; }
  30% { scale: .98 1.03; --fy: -4px; }
  45% { scale: 1 1; --fy: 0px; }
}
@keyframes fx-float {
  0%, 100% { --fy: 0px; rotate: -.8deg; }
  50% { --fy: -5px; rotate: .8deg; }
}
@keyframes fx-pin {
  0%, 100% { rotate: -1.5deg; }
  50% { rotate: 1.5deg; }
}

/* hover / tap: jelly bounce */
.touchable { pointer-events: auto; cursor: pointer; }
.fx.boing { animation: boing .7s cubic-bezier(.3, 1.4, .5, 1) !important; }
@keyframes boing {
  0% { scale: 1; rotate: 0deg; }
  25% { scale: 1.12 .92; rotate: -3deg; }
  50% { scale: .95 1.07; rotate: 2deg; }
  75% { scale: 1.03 .98; rotate: -1deg; }
  100% { scale: 1; rotate: 0deg; }
}


/* glitter on the decorations */
.glint {
  position: absolute;
  margin: -.5em 0 0 -.4em;
  color: #fff6d6;
  text-shadow: 0 0 6px #ffd27a, 0 0 14px #ffb35c;
  animation: twinkle 1.3s ease-in-out forwards;
}

/* camera flash */
.cam-flash {
  position: absolute;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, rgba(255, 255, 255, .85) 38%, rgba(255, 250, 220, 0) 70%);
  animation: camflash .7s ease-out forwards;
}
@keyframes camflash {
  0% { transform: scale(0); opacity: 1; }
  30% { transform: scale(5); opacity: 1; }
  100% { transform: scale(8); opacity: 0; }
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 58;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease-out;
}
body.flashed::after { opacity: .18; transition: none; }

/* fairy lights */
.garland {
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  height: 110px;
  z-index: 55;
  pointer-events: none;
  transform-origin: 50% 0;
  animation: garland 5s ease-in-out infinite alternate, rise 1s ease .6s backwards;
}
.garland svg { position: absolute; left: 0; top: 0; overflow: visible; }
.bulb {
  position: absolute;
  width: 9px; height: 14px;
  margin: -1px 0 0 -4.5px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: var(--c);
  box-shadow: 0 0 6px 2px var(--c), 0 0 18px 5px var(--c);
  animation: bulb 4s ease-in-out infinite;
}
.bulb::before { content: ''; position: absolute; left: 2px; top: -3px; width: 5px; height: 4px; border-radius: 1px; background: #3b2a22; }
@keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: .35; box-shadow: 0 0 3px 1px var(--c); } }
@keyframes garland { from { transform: rotate(.5deg); } to { transform: rotate(-.5deg) translateY(3px); } }

/* comic sound-effect pops on the spider-man pages */
.comic-pop {
  position: absolute;
  padding: 26px 30px;
  font: 400 34px/1 var(--comic);
  letter-spacing: .03em;
  color: #111;
  clip-path: polygon(50% 0, 60% 18%, 79% 6%, 76% 27%, 98% 24%, 85% 42%, 100% 55%, 81% 63%, 92% 82%, 70% 77%, 66% 100%, 52% 83%, 36% 100%, 31% 79%, 9% 88%, 18% 66%, 0 57%, 16% 44%, 3% 25%, 24% 26%, 22% 5%, 40% 17%);
  filter: drop-shadow(3px 3px 0 #111);
  transform: rotate(var(--rot));
  animation: comicpop 1.5s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
@keyframes comicpop {
  0% { transform: rotate(calc(var(--rot) - 30deg)) scale(0); opacity: 1; }
  18% { transform: rotate(var(--rot)) scale(1.25); }
  30% { transform: rotate(var(--rot)) scale(1); }
  80% { opacity: 1; }
  100% { transform: rotate(var(--rot)) scale(.85); opacity: 0; }
}


/* p13 (spider-man page): keep the slow zoom centred on his face */
.photo-slot[data-photo$="p13"] img { transform-origin: 50% 12%; }

/* the never-ending ILYSM at the end of the letter (wraps instead of running off the page) */
.letter .ilysm {
  font-family: var(--hand);
  font-size: 1.15em;
  color: var(--red);
  word-break: break-all;
  letter-spacing: .04em;
}

/* =====================================================
   CALM MODE — every page except the first envelope page.
   Things move once (entrance, typewriter, reveal) or when touched (hover bounce, click hearts);
   nothing loops on its own except the fairy lights and the hanging spidey.
   ===================================================== */
.calm::before { animation: none; }
.calm .fx.entered, .calm .fx:not(.pop):not(.drop) { animation: none; }
.calm .photo-slot img { animation: develop 2.8s ease-out backwards; }
.calm .photo-slot::before, .calm .song::after { animation: none; display: none; }
.calm .vinyl.drop { animation: drop .8s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.calm .sfx, .calm .whaam b, .calm .sp-pol .heart, .calm .songs-title img { animation: none; }
.calm .next-btn::after { animation: none; display: none; }
.calm .next-btn .arrow { animation: none; }
.calm .garland { animation: rise 1s ease .6s backwards; }
.calm .bulb { animation-duration: 6s; }
.calm .marquee.v { animation-duration: 60s; }
.calm .marquee.h { animation-duration: 50s; }
.veil:not(.cover) .veil-heart { animation-play-state: paused; }
body.leaving .veil .veil-heart { animation-play-state: running; }

/* =====================================================
   MUSIC BUTTON (every page)
   ===================================================== */
.music-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 11px;
  border: 1px solid rgba(255, 230, 210, .35);
  border-radius: 999px;
  background: rgba(40, 6, 12, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #f6e7cf;
  font: 700 11px var(--type);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  -webkit-tap-highlight-color: transparent;
}
.music-btn:hover { background: rgba(60, 10, 18, .78); }
.music-btn:focus-visible { outline: 2px dashed #f6e7cf; outline-offset: 3px; }
.mb-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.mb-bars i { width: 3px; height: 4px; border-radius: 1px; background: currentColor; }
.music-btn.playing .mb-bars i { height: 100%; transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.music-btn.playing .mb-bars i:nth-child(2) { animation-delay: -.35s; }
.music-btn.playing .mb-bars i:nth-child(3) { animation-delay: -.7s; }
@media (max-width: 600px) {
  .music-btn { padding: 8px 10px; }
  .music-btn .mb-label { display: none; }
}