/* =========================================================================
   GLOBAL RESET & VARIABLES
   ========================================================================= */
:root {
  --paper-0: #fff5f7;
  --paper-1: #fde2e8;
  --paper-2: #fcc2d0;
  --rose-deep: #6a041d;
  --rose: #a80f43;
  --rose-lift: #d4235c;
  --wine: #4a0014;
  --gold-1: #ffcf6a;
  --gold-2: #e8a23d;
  --ink: #591d28;
  --ink-soft: #8c4a58;
  --cream: #fffaf5;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --section-transition: 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: #12060c;
  color: #3a1a1a;
  font-family: "Cormorant Garamond", Georgia, serif;
  transition: background 0.6s ease;
}

/* Birthday Card is now Section 1 → warm cream background */
body[data-active-section="1"] {
  background: #FBF6F0;
}

/* Archery is now Section 2 → dark cinematic background */
body[data-active-section="2"] {
  background: #12060c;
}

/* Gift Box is now Section 3 → warm parchment background */
body[data-active-section="3"] {
  background: #f8f0dc;
}

/* Scrapbook is now Section 5 → deep burgundy background */
body[data-active-section="5"] {
  background: #3d0711;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

button {
  font-family: inherit;
}

/* =========================================================================
   APPLICATION SECTIONS SYSTEM
   ========================================================================= */
.app-section {
  display: none;
  opacity: 0;
  width: 100%;
  min-height: 100vh;
  position: relative;
  transition: opacity var(--section-transition), transform var(--section-transition);
  transform: translateY(12px) scale(0.99);
}

.app-section.active {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* The birthday-card section uses flexbox for centering.
   .app-section.active sets display:block which would override it,
   so we restore flex here with higher specificity. */
.app-section.s3-section.active {
  display: flex;
}

/* Section 4 (I Love You Surprise) also uses flex layout. */
.app-section.s4-section.active {
  display: flex;
}


/* =========================================================================
   PAGE 4 : SECTION 1 ARCHERY & BLOOMING TREE STYLING
   ========================================================================= */
.page4-section {
  background: #12060c;
  overflow: hidden;
  height: 100vh;
  position: relative;
}

.scene {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.tree {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.hero {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 88% at 50% 24%, #fff5f8 0%, var(--paper-0) 38%, var(--paper-1) 74%, var(--paper-2) 100%);
}

.hero__bg:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(78vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 150, 180, 0.55), rgba(220, 120, 150, 0.16) 46%, transparent 70%);
  filter: blur(6px);
}

.hero__motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mote {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 220, 0.9), rgba(255, 170, 195, 0.15) 55%, transparent 72%);
  will-change: transform, opacity;
}

.hero__eyebrow {
  position: absolute;
  top: 13%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(15px, 3.6vw, 26px);
  letter-spacing: 0.06em;
  color: #9e3655;
  text-shadow: 0 1px 10px rgba(255, 240, 245, 0.9);
  opacity: 0;
}

.targetWrap {
  position: absolute;
  top: 33%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.target {
  position: relative;
  width: clamp(120px, 27vw, 208px);
  aspect-ratio: 100/92;
  will-change: transform;
  transform-origin: 50% 60%;
}

.target__heart {
  position: absolute;
  inset: 0;
  display: block;
}

.heart__glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 230%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 40, 100, 0.55), rgba(168, 15, 64, 0.18) 42%, transparent 68%);
  filter: blur(4px);
  pointer-events: none;
  will-change: transform, opacity;
}

.heart__svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 60%;
  filter: drop-shadow(0 10px 22px rgba(168, 15, 64, 0.34)) drop-shadow(0 3px 6px rgba(120, 10, 48, 0.3));
  will-change: transform;
}

.archery {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(100px, 18vw, 168px);
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  will-change: transform;
}

.archery:active {
  cursor: grabbing;
}

.archery:focus-visible {
  outline: none;
}

.archery:focus-visible .bow {
  filter: drop-shadow(0 0 0 3px rgba(255, 255, 255, 0.85)) drop-shadow(0 10px 18px rgba(120, 50, 20, 0.4));
}

.bow {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(90, 40, 15, 0.3));
  overflow: visible;
}

.aim {
  position: absolute;
  left: 50%;
  bottom: 32%;
  width: 2px;
  height: 190%;
  margin-left: -1px;
  transform-origin: bottom center;
  background: linear-gradient(0deg, rgba(230, 40, 100, 0.6) 0%, rgba(168, 15, 64, 0.22) 52%, transparent 78%);
  opacity: 0;
  pointer-events: none;
}

.arrow {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  bottom: 36%;
  width: 17.5%;
  height: auto;
  overflow: visible;
  will-change: transform;
  filter: drop-shadow(0 5px 7px rgba(90, 40, 15, 0.36));
}

.hero__hint {
  position: absolute;
  bottom: 8.5%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(13px, 3.1vw, 19px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a84d68;
  opacity: 0;
}

.flood {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, var(--rose-lift), var(--rose) 46%, var(--rose-deep) 100%);
  z-index: 5;
  opacity: 0;
  transform: scale(0.001);
  will-change: transform, opacity;
  pointer-events: none;
}

.field {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 8%, #d4235c 0%, var(--rose) 42%, var(--rose-deep) 78%, var(--wine) 100%);
  color: #fff;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.blob--1 {
  width: 58vmax;
  height: 58vmax;
  left: -18vmax;
  top: -16vmax;
  background: radial-gradient(circle, rgba(230, 50, 110, 0.9), transparent 62%);
}

.blob--2 {
  width: 46vmax;
  height: 46vmax;
  right: -14vmax;
  top: 22vmax;
  background: radial-gradient(circle, rgba(180, 20, 70, 0.75), transparent 64%);
}

.blob--3 {
  width: 52vmax;
  height: 52vmax;
  left: 24vmax;
  bottom: -22vmax;
  background: radial-gradient(circle, rgba(120, 10, 45, 0.8), transparent 66%);
}

.fgrid {
  position: absolute;
  inset: -6%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: clamp(38px, 7vw, 74px) clamp(38px, 7vw, 74px);
  will-change: transform;
}

.fvignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(128% 96% at 50% 44%, transparent 50%, rgba(50, 6, 18, 0.5) 100%);
}

.camera {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(4px, 1.2vh, 12px);
  padding: 0 6vw;
  text-align: center;
  will-change: transform;
}

.kEyebrow {
  font-family: Cormorant Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 3.6vw, 27px);
  letter-spacing: 0.08em;
  color: #ffd2dc;
  opacity: 0;
  transform: translateY(10px);
  margin-bottom: clamp(2px, 1vh, 10px);
}

.headline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  line-height: 0.92;
  filter: drop-shadow(0 6px 34px rgba(60, 8, 24, 0.34)) drop-shadow(0 2px 3px rgba(80, 10, 30, 0.42));
}

.hl__line {
  display: block;
}

.mask {
  display: inline-block;
  overflow: hidden;
  padding: 0.14em 0.06em;
  margin: -0.14em -0.06em;
}

.hl__word {
  display: inline-block;
  font-weight: 900;
  font-size: clamp(28px, 8vw, 100px);
  letter-spacing: -0.02em;
  color: #fff0f3;
}

.hl__ch {
  display: inline-block;
  will-change: transform;
}

.uline {
  width: clamp(150px, 40vw, 380px);
  height: auto;
  margin-top: clamp(4px, 1.4vh, 14px);
  color: var(--gold-1);
  filter: drop-shadow(0 2px 8px rgba(255, 180, 90, 0.5));
}

.kSub {
  margin-top: clamp(12px, 2.4vh, 26px);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(14px, 3.4vw, 24px);
  letter-spacing: 0.05em;
  color: #ffd8e2;
  opacity: 0;
  transform: translateY(10px);
}

.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 16vh;
  background: #12040b;
  z-index: 3;
  will-change: transform;
  pointer-events: none;
}

.bar--top { top: 0; }
.bar--bot { bottom: 0; }

.bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffd6e0 30%, #ff758fd9 55%, #c9184a00 74%);
  z-index: 8;
  opacity: 0;
  transform: scale(0.001);
  will-change: transform, opacity;
  pointer-events: none;
}

.wish {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translate(-50%);
  width: 90%;
  max-width: 500px;
  z-index: 6;
  pointer-events: none;
  color: var(--ink);
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wish.is-in {
  visibility: visible;
}

.wish:before {
  content: "";
  position: absolute;
  inset: -18% -24% -24% -16%;
  background: radial-gradient(84% 98% at 34% 52%, #fffaf3f0, #fffaf399 48%, #fffaf300 80%);
  z-index: -1;
  opacity: 0;
  transition: opacity 1s ease;
}

.wish.is-in:before {
  opacity: 1;
}

.wish__eyebrow {
  font-family: Cormorant Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(13px, 3.2vw, 24px);
  letter-spacing: 0.05em;
  color: #8c3652;
  text-shadow: 0 1px 2px #fff5f8, 0 0 8px rgba(255, 245, 248, 0.95);
  margin-bottom: 0.8em;
}

.wish__heroWrap {
  position: relative;
  display: inline-block;
}

.wish__heroWrap:before {
  content: "";
  position: absolute;
  inset: -26% -12% -22%;
  background: radial-gradient(60% 70% at 46% 52%, rgba(230, 40, 100, 0.45), rgba(168, 15, 64, 0.18) 52%, transparent 74%);
  filter: blur(14px);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

.wish__heroWrap:after {
  content: "✦";
  position: absolute;
  right: -1%;
  top: -14%;
  font-size: clamp(15px, 3.6vw, 32px);
  color: #ffe1a0;
  text-shadow: 0 0 12px rgba(255, 205, 120, 0.95);
  opacity: 0;
  pointer-events: none;
}

.wish__hero {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(40px, 9.6vw, 86px);
  line-height: 0.98;
  padding: 0.2em 0;
  margin: -0.22em 0 -0.14em;
  background: linear-gradient(180deg, #d4235c, #a80f43, #720026);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(255, 250, 252, 0.98)) drop-shadow(0 2px 6px rgba(110, 15, 45, 0.45));
  clip-path: inset(0 100% -28% -10%);
  transform-origin: 50% 60%;
}

.wish__rule {
  display: block;
  width: clamp(46px, 13vw, 110px);
  height: 2px;
  margin: 0.12em 0 0.48em;
  background: linear-gradient(90deg, var(--gold-2), rgba(232, 162, 61, 0));
  box-shadow: 0 0 8px #fff7f0e6;
  transform-origin: left center;
}

.wish__sub {
  font-family: Cormorant Garamond, Georgia, serif;
  font-weight: 600;
  font-size: clamp(12px, 2.9vw, 20px);
  letter-spacing: 0.03em;
  color: #632034;
  text-shadow: 0 1px 2px #fff5f8, 0 0 8px rgba(255, 245, 248, 0.98);
}

.wish__eyebrow, .wish__rule, .wish__sub {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(5px);
  transition: opacity 0.8s ease, transform 0.9s var(--ease-out), filter 0.8s ease;
}

.wish__rule {
  transform: translateY(12px) scaleX(0.3);
}

.wish.is-in .wish__eyebrow, .wish.is-in .wish__sub {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.wish.is-in .wish__rule {
  opacity: 1;
  transform: translateY(0) scaleX(1);
  transition-delay: 1.35s;
}

.wish.is-in .wish__sub {
  transition-delay: 1.55s;
}

.wish.is-in .wish__hero {
  animation: write 1.2s cubic-bezier(0.62, 0.04, 0.24, 1) 0.35s forwards, wishBreath 4s ease-in-out 1.9s infinite;
}

@keyframes wishBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes write {
  0% { clip-path: inset(0 100% -28% -10%); }
  to { clip-path: inset(0 -10% -28% -10%); }
}






/* =========================================================================
   PAGE 5 : SECTION 2 GIFT BOX, PASSKEY & ROMANTIC LETTER STYLING
   ========================================================================= */
.page5-section {
  background: #f8f0dc;
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #3a1a1a;
  position: relative;
  min-height: 100vh;
}

#gift-landing {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle at center, #f8f0dc 0%, #faecc8 50%, #f7e5c0 100%);
}

#gift-landing.hidden {
  display: none;
}

.gift-fade-veil {
  position: absolute;
  inset: 0;
  background-color: #faf0e6;
  opacity: 1;
  transition: opacity 900ms ease-out;
  pointer-events: none;
  z-index: 0;
}

#gift-landing.state-curtain .gift-fade-veil,
#gift-landing.state-bloom .gift-fade-veil {
  opacity: 0;
}

.gift-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.gift-click-wrap {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.4s ease;
}

#gift-landing.state-bloom .gift-click-wrap,
#gift-landing.state-curtain .gift-click-wrap {
  opacity: 0;
  pointer-events: none;
}

.gift-box-btn {
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  outline: none;
  animation: gift-bob 3s ease-in-out infinite;
}

@keyframes gift-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.gift-box-btn img {
  width: min(60vw, 320px);
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(128, 0, 0, 0.25));
  transition: transform 0.3s ease;
  display: block;
}

.gift-box-btn:hover img {
  transform: scale(1.06);
}

.gift-box-btn:active img {
  transform: scale(0.95);
}

.gift-caption {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.25rem);
  color: #800000;
  margin: 0;
}

.gift-hint {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #a0522d;
  margin: 0;
  opacity: 0.75;
}

.bloom-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  contain: layout paint style;
}

.bloom-flower {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  /* NOTE: do NOT use contain:paint here — it clips the element to its own
     bounding box and prevents the curtain-open translate from being visible.
     The parent .bloom-field already carries contain:layout paint style. */
  backface-visibility: hidden;
}

.bloom-flower.in {
  /* bloom-rain plays first, bloom-float starts only after it settles (--fdelay)
     so they never compete on the compositor simultaneously. */
  animation:
    bloom-rain var(--rdur) cubic-bezier(0.19, 0.75, 0.24, 1) var(--ldelay, 0s) both,
    bloom-float var(--dur) ease-in-out var(--fdelay, 0s) infinite;
}

.bloom-flower.curtain-open {
  animation: none;
  /* steep ease-in: starts slow, then rockets off-screen for a cinematic sweep */
  transition:
    transform 1.1s cubic-bezier(0.55, 0, 1, 0.45) var(--cdelay, 0s),
    opacity   1.0s cubic-bezier(0.6,  0, 1, 1)    var(--cdelay, 0s);
  transform: translate3d(calc(var(--fx) + var(--cx, 0px)), calc(var(--fy) + var(--cy, 0px)), 0)
    rotate(calc(var(--rot-end, 0deg) + var(--cx, 0px) * 0.02deg)) scale(0.88);
  opacity: 0;
}

@keyframes bloom-rain {
  0% {
    transform: translate3d(var(--fx), calc(var(--fy) - var(--fall)), 0)
      rotate(var(--rot-start, -30deg)) scale(0.88);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  55% {
    transform: translate3d(calc(var(--fx) + var(--sway1, 20px)), calc(var(--fy) - var(--fall) * 0.4), 0)
      rotate(calc(var(--rot-start, -30deg) * 0.3)) scale(0.98);
  }
  100% {
    transform: translate3d(var(--fx), var(--fy), 0)
      rotate(var(--rot-end, 0deg)) scale(1);
    opacity: 1;
  }
}

@keyframes bloom-float {
  /* Simplified: only moves Y. No redundant translate3d + rotate re-calculation.
     The element is already at rest position from bloom-rain fill:both. */
  0%, 100% { transform: translate3d(var(--fx), var(--fy), 0) rotate(var(--rot-end, 0deg)); }
  50%       { transform: translate3d(var(--fx), calc(var(--fy) - 8px), 0) rotate(var(--rot-end, 0deg)); }
}


/* --- PAGE 2 & PAGE 3 OF SECTION 2 --- */
#page2, #page3 {
  display: none;
  min-height: 100vh;
  position: relative;
  background: #f8f0dc;
}

#page2.shown, #page3.shown {
  display: block;
  animation: p2-appear 0.8s ease-out forwards;
}

@keyframes p2-appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.page2-tint {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, #fdf8ee 0%, #f8f0dc 60%, #f0e2c4 100%);
  pointer-events: none;
  z-index: 0;
}

.page2-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.p5-hero h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: #800000;
  margin-bottom: 0.5rem;
}

.p5-hero .p5-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: #7a3e3e;
  margin-bottom: 2rem;
}

.centre-wrap {
  width: 100%;
  max-width: 440px;
  margin: 0 auto 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(128, 0, 0, 0.15), 0 0 0 8px rgba(255, 255, 255, 0.6);
}

.centre-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #a0522d;
  font-size: 1.2rem;
  margin: 1.5rem 0 3rem;
}

.flourish .heart {
  font-size: 1.6rem;
  color: #800000;
}

.smile-section {
  width: 100%;
  margin: 2rem 0 3rem;
}

.smile-card {
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(128, 0, 0, 0.12);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: 0 12px 36px rgba(128, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.smile-card.in {
  opacity: 1;
  transform: translateY(0);
}

.smile-card p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.3rem, 3.4vw, 1.85rem);
  line-height: 1.6;
  color: #4a1e1e;
  margin: 0;
}

.hl-smile { color: #d46a11; font-weight: 600; font-style: italic; }
.hl-peace { color: #2e7d32; font-weight: 600; font-style: italic; }
.hl-love  { color: #c2185b; font-weight: 600; font-style: italic; }
.hl-home  { color: #6a1b9a; font-weight: 600; font-style: italic; }

.smile-card .deco {
  position: absolute;
  color: rgba(128, 0, 0, 0.18);
  font-size: 1.4rem;
}
.smile-card .d1 { top: 12px; left: 16px; }
.smile-card .d2 { top: 12px; right: 16px; }
.smile-card .d3 { bottom: 12px; left: 16px; }
.smile-card .d4 { bottom: 12px; right: 16px; }

/* --- PHOTO GRID & ROMANTIC LETTER SECTION --- */
.photo-grid-section {
  width: 100%;
  margin: 3rem 0 4rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 85vw), 1fr));
  gap: 24px;
  width: 100%;
  justify-items: center;
}

.photo-card {
  background: #ffffff;
  padding: 12px 12px 36px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  transform: translateY(40px) rotate(var(--rot, 0deg));
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  max-width: 260px;
}

.photo-card.in {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg));
}

.photo-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  background: #fdf5e6;
  border-radius: 2px;
}

.letter-section {
  width: 100%;
  margin: 2rem 0 4rem;
}

.letter-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(128, 0, 0, 0.12);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  box-shadow: 0 16px 48px rgba(128, 0, 0, 0.08);
  text-align: left;
}

.letter-card p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.4rem, 3.2vw, 1.85rem);
  line-height: 1.8;
  color: #3e1a1a;
  margin: 0;
}

.letter-card .word {
  opacity: 0;
  display: inline-block;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.letter-card .word.in {
  opacity: 1;
  transform: translateY(0);
}

.heart-divider {
  margin: 3rem 0;
  font-size: 2rem;
  color: #800000;
}

#footer-section h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: #800000;
  margin-bottom: 0.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

#footer-section p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: #7a3e3e;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease 0.2s;
}

#footer-section h2.in, #footer-section p.in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   SECTION TRANSITION MODAL / DIALOGUE STYLES
   ========================================================================= */
.transition-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}

.transition-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.transition-modal-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(28, 6, 18, 0.8) 0%, rgba(8, 2, 6, 0.93) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Floating Heart Orb (above card) ── */
.trans-orb {
  position: relative;
  z-index: 1;
  margin-bottom: -34px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  transform: translateY(-20px) scale(0.6);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
              opacity 0.4s ease 0.1s;
}

.transition-modal.is-open .trans-orb {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.trans-orb__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 35, 92, 0.35);
  animation: orbRingPulse 2.5s ease-in-out infinite;
}
.trans-orb__ring--1 { width: 72px; height: 72px; animation-delay: 0s; }
.trans-orb__ring--2 { width: 92px; height: 92px; border-color: rgba(212, 35, 92, 0.16); animation-delay: 0.65s; }

.trans-orb__core {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff5f8 0%, #fde8ef 40%, #f9c8d6 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 8px 28px rgba(212, 35, 92, 0.52),
    0 2px 8px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: orbHeartBeat 2s ease-in-out infinite;
}

.trans-orb__heart {
  width: 30px;
  height: 27px;
  filter: drop-shadow(0 2px 6px rgba(168, 15, 64, 0.55));
}

@keyframes orbRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%       { transform: scale(1.13); opacity: 1; }
}

@keyframes orbHeartBeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.16); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.09); }
  56%      { transform: scale(1); }
}

/* ── Modal Card ── */
.transition-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(254, 246, 249, 0.95) 52%,
    rgba(249, 236, 242, 0.92) 100%
  );
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 28px;
  padding: 3rem 2.2rem 2.4rem;
  text-align: center;
  box-shadow:
    0 32px 72px rgba(100, 15, 44, 0.32),
    0 8px 24px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(32px) scale(0.9);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
  overflow: hidden;
}

.transition-modal.is-open .transition-modal-card {
  transform: translateY(0) scale(1);
}

/* Rose accent top strip */
.transition-modal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, transparent 0%, #d4235c 20%, #ff6699 50%, #d4235c 80%, transparent 100%);
  border-radius: 28px 28px 0 0;
}

/* Corner petal dots */
.trans-modal-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 28px; }
.trans-petal { position: absolute; border-radius: 50% 0 50% 0; opacity: 0.11; }
.trans-petal--1 { width: 10px; height: 10px; top: 14px; left: 18px;  background: #d4235c; transform: rotate(-20deg); }
.trans-petal--2 { width: 7px;  height: 7px;  top: 16px; right: 52px; background: #e8a23d; transform: rotate(40deg); border-radius: 50%; }
.trans-petal--3 { width: 7px;  height: 7px;  bottom: 20px; left: 22px; background: #e8a23d; transform: rotate(60deg); border-radius: 50%; }
.trans-petal--4 { width: 10px; height: 10px; bottom: 20px; right: 18px; background: #d4235c; transform: rotate(20deg); }

/* Ambient glow */
.trans-modal-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 220px;
  background: radial-gradient(circle, rgba(212, 35, 92, 0.2), transparent 68%);
  filter: blur(36px);
  pointer-events: none;
}

/* ── Close Button (SVG X, rotates on hover) ── */
.trans-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(128, 0, 0, 0.05);
  border: 1px solid rgba(168, 15, 64, 0.12);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a4a5e;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease, border-color 0.2s ease;
  z-index: 2;
}

.trans-modal-close:hover {
  background: rgba(212, 35, 92, 0.11);
  border-color: rgba(212, 35, 92, 0.26);
  color: #800020;
  transform: rotate(90deg) scale(1.08);
}

/* ── SVG Badge Row ── */
.trans-modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 0.6rem;
}

.trans-icon-star {
  color: #e8a23d;
  animation: transTwinkle 2.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 1px 4px rgba(232, 162, 61, 0.65));
}

.trans-icon-heart-sm {
  color: #d4235c;
  animation: transHeartPulse 1.9s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(212, 35, 92, 0.5));
}

@keyframes transTwinkle {
  0%   { transform: scale(0.78) rotate(-14deg); opacity: 0.62; }
  100% { transform: scale(1.28) rotate(14deg); opacity: 1; }
}

@keyframes transHeartPulse {
  0%, 100% { transform: scale(1); }
  42%      { transform: scale(1.24); }
  62%      { transform: scale(0.95); }
}

/* ── Title ── */
.trans-modal-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b06080;
  margin: 0 0 0.55rem;
}

/* ── Ornamental Rule ── */
.trans-modal-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 1rem;
}

.trans-rule-line {
  display: block;
  height: 1px;
  width: 52px;
  background: linear-gradient(90deg, transparent, rgba(212, 35, 92, 0.32), transparent);
}

/* ── Main Message ── */
.trans-modal-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.4rem, 4.2vw, 1.95rem);
  font-weight: 700;
  line-height: 1.3;
  color: #2c0d18;
  margin: 0 0 1.9rem;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.88);
}

/* ── Continue Button ── */
.trans-modal-continue-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 28px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(130deg, #e0306a 0%, #a80f43 55%, #780022 100%);
  color: #ffffff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 10px 28px rgba(212, 35, 92, 0.46),
    0 2px 8px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              background 0.3s ease;
}

/* Shimmer sweep effect */
.trans-btn-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 66%
  );
  background-size: 220% 100%;
  background-position: -120% 0;
  animation: btnShimmer 2.8s ease-in-out infinite 1.4s;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes btnShimmer {
  0%   { background-position: -120% 0; opacity: 0; }
  8%   { opacity: 1; }
  65%  { background-position: 220% 0; opacity: 1; }
  75%  { opacity: 0; }
  100% { background-position: 220% 0; opacity: 0; }
}

.trans-btn-label { position: relative; z-index: 1; }

.trans-modal-continue-btn > svg {
  position: relative;
  z-index: 1;
  transition: transform 0.28s ease;
}

.trans-modal-continue-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 16px 38px rgba(212, 35, 92, 0.56),
    0 4px 12px rgba(0, 0, 0, 0.18);
  background: linear-gradient(130deg, #eb3d74 0%, #bc1650 55%, #880030 100%);
}

.trans-modal-continue-btn:hover > svg { transform: translateX(5px); }

.trans-modal-continue-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 6px 18px rgba(212, 35, 92, 0.34);
}

/* =========================================================================
   RESPONSIVE DESIGN
   ========================================================================= */
@media (max-width: 640px) {
  .letter-card {
    padding: 2rem 1.5rem;
  }
  .transition-modal-card {
    padding: 2.5rem 1.6rem 2rem;
    border-radius: 22px;
  }
  .trans-orb { width: 68px; height: 68px; margin-bottom: -28px; }
  .trans-orb__core { width: 48px; height: 48px; }
  .trans-orb__heart { width: 26px; height: 23px; }
  .trans-orb__ring--1 { width: 62px; height: 62px; }
  .trans-orb__ring--2 { width: 78px; height: 78px; }
}


/* =========================================================================
   SECTION 3 : BIRTHDAY CARD — INTERACTIVE STATE MACHINE
   ========================================================================= */

/* Body theme when section 1 (birthday card) is active — already set above */


/* ── Section wrapper ──────────────────────────────────────────────────── */
.s3-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #FBF6F0;
}

/* ── Corner Blobs ─────────────────────────────────────────────────────── */
.s3-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.s3-blob--tl {
  width: 600px;
  height: 680px;
  top: -220px;
  left: -220px;
  background: radial-gradient(ellipse at 30% 40%, #801B3E 0%, #6E1534 60%, transparent 100%);
  border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%;
  filter: blur(4px);
  opacity: 0.92;
}

.s3-blob--br {
  width: 560px;
  height: 640px;
  bottom: -220px;
  right: -220px;
  background: radial-gradient(ellipse at 65% 65%, #801B3E 0%, #6E1534 55%, transparent 100%);
  border-radius: 55% 45% 38% 62% / 52% 60% 40% 48%;
  filter: blur(4px);
  opacity: 0.88;
}

/* ── Grid-Paper Card ──────────────────────────────────────────────────── */
.s3-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  min-height: 100vh;
  background: #FFFDF9;
  background-image:
    linear-gradient(to right, #EBD6DB 1px, transparent 1px),
    linear-gradient(to bottom, #EBD6DB 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Screens ─────────────────────────────────────────────── */
.s3-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;       /* fills full card height so content is centred */
  padding: 4rem 3rem;
  gap: 0.8rem;
  animation: s3FadeIn 0.42s cubic-bezier(.22,1,.36,1) both;
}

.s3-screen--hidden {
  display: none;
}

@keyframes s3FadeIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Cat Sticker ────────────────────────────────────────────── */
.s3-cat-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
}

.s3-cat-img {
  width: clamp(200px, 28vmin, 320px);
  height: auto;
  border-radius: 0;
  object-fit: unset;
  border: none;
  box-shadow: none;
  background: transparent;
  animation: s3CatBounce 3s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}

.s3-cat-img:hover {
  transform: scale(1.06) rotate(-3deg);
}

.s3-cat-img--angry {
  animation: s3CatShake 0.6s ease-in-out infinite;
}

.s3-cat-img--happy {
  animation: s3CatHappy 2.4s ease-in-out infinite;
}

@keyframes s3CatBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-16px); }
}

@keyframes s3CatShake {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-7deg); }
  40%      { transform: rotate(7deg); }
  60%      { transform: rotate(-5deg); }
  80%      { transform: rotate(5deg); }
}

@keyframes s3CatHappy {
  0%, 100% { transform: translateY(0) scale(1); }
  25%      { transform: translateY(-10px) scale(1.03) rotate(3deg); }
  75%      { transform: translateY(-6px) scale(1.02) rotate(-2deg); }
}

/* ── Typography ───────────────────────────────────────────── */
.s3-title {
  font-family: 'Shrikhand', 'Paytone One', 'Alfa Slab One', serif;
  font-size: clamp(3.5rem, 13vw, 7rem);
  color: #541228;
  text-align: center;
  line-height: 1;
  margin: 0.5rem 0 0.8rem;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 24px rgba(84, 18, 40, 0.15);
}

.s3-title--sm {
  font-size: clamp(2.8rem, 10vw, 5.5rem);
}

.s3-cursive {
  font-family: 'Caveat', 'Dancing Script', cursive;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 600;
  color: #541228;
  text-align: center;
  line-height: 1.4;
  margin: 0.2rem 0;
}

.s3-cursive--sub {
  color: #8C2D4A;
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  margin-bottom: 0.8rem;
}

.s3-cursive--big {
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 700;
  color: #541228;
  margin: 0.8rem 0 1.4rem;
}

/* ── Button Row ────────────────────────────────────────────── */
.s3-btn-row {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.s3-btn {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  letter-spacing: 0.06em;
  color: #fff;
  background: #8C2D4A;
  border: 2.5px solid #6E1534;
  border-radius: 9999px;
  padding: 16px 52px;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(.2,.7,.2,1), box-shadow 0.22s ease, background 0.22s ease;
  box-shadow: 0 6px 24px rgba(140, 45, 74, 0.32);
}

.s3-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.s3-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 28px rgba(140, 45, 74, 0.4);
  background: #A33557;
}

.s3-btn:hover::after { opacity: 1; }

.s3-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(140, 45, 74, 0.22);
}

.s3-btn--outline {
  background: transparent;
  color: #8C2D4A;
  border-color: #8C2D4A;
  box-shadow: none;
}

.s3-btn--outline:hover {
  background: rgba(140, 45, 74, 0.07);
  box-shadow: 0 4px 14px rgba(140, 45, 74, 0.15);
  color: #6E1534;
}

.s3-btn--glow {
  background: linear-gradient(135deg, #A33557 0%, #6E1534 100%);
  border-color: #6E1534;
  box-shadow:
    0 0 0 0 rgba(140, 45, 74, 0),
    0 6px 22px rgba(140, 45, 74, 0.38);
  animation: s3BtnPulse 2.2s ease-in-out infinite;
}

@keyframes s3BtnPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(140, 45, 74, 0.5), 0 6px 22px rgba(140, 45, 74, 0.38);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(140, 45, 74, 0), 0 8px 30px rgba(140, 45, 74, 0.5);
  }
}

/* ── Confetti Canvas ──────────────────────────────────────────────────── */
.s3-confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.s3-confetti-canvas.active {
  opacity: 1;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .s3-card {
    /* full-screen on mobile too — no rounding */
    border-radius: 0;
  }
  .s3-screen {
    padding: 2rem 1.4rem 2rem;
  }
  .s3-cat-img {
    width: 128px;
    height: auto;
  }
  .s3-blob--tl {
    width: 260px;
    height: 320px;
    top: -100px;
    left: -100px;
  }
  .s3-blob--br {
    width: 240px;
    height: 290px;
    bottom: -100px;
    right: -100px;
  }
}


/* =========================================================================
   SECTION 4 : I LOVE YOU → SURPRISE GIFT → VIRTUAL HUG
   Body theme + Section wrapper + Inner Screens A / B / C
   ========================================================================= */

/* Body theme colour for section 4 */
body[data-active-section="4"] {
  background: #7d184d;
}

/* ── Section wrapper ──────────────────────────────────────────────────── */
.s4-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.s4-section.active {
  display: flex;
}

/* ── Inner screen base ────────────────────────────────────────────────── */
.s4-screen {
  position: absolute;
  inset: 0;
  min-height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(16px) scale(0.98);
  display: flex;
  flex-direction: column;
}

.s4-screen--active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.s4-screen--exit {
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
}


/* =========================================================================
   SCREEN A : "I ❤️ LOVE YOU ❤️" — Berry magenta background
   ========================================================================= */
#s4-screen-a {
  background: radial-gradient(ellipse at 50% 38%, #c9316c 0%, #b82e74 38%, #7d184d 100%);
  justify-content: flex-start;
  align-items: center;
  padding: 0 1.5rem 2rem;
  gap: 0;
}

/* ── Floating hearts ambient ────────────────────────────────────────── */
.s4-hearts-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.s4-fheart {
  position: absolute;
  bottom: -40px;
  left: var(--x, 50%);
  font-size: calc(1.6rem * var(--sz, 1));
  animation: s4FloatHeart 7s ease-in infinite;
  animation-delay: var(--d, 0s);
  opacity: 0;
}

@keyframes s4FloatHeart {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.8; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) rotate(25deg); opacity: 0; }
}

/* ── Polaroid String Gallery ──────────────────────────────────────────── */
.s4-gallery {
  position: relative;
  width: 100%;
  max-width: 860px;
  height: 280px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2.4rem;
  padding-top: 2.8rem;
  z-index: 2;
  flex-shrink: 0;
}

/* Horizontal string wire */
.s4-string {
  position: absolute;
  top: 28px;
  left: 2%;
  right: 2%;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.1) 0%,
    rgba(255,255,255,0.55) 20%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0.55) 80%,
    rgba(255,255,255,0.1) 100%);
  border-radius: 2px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.25);
  z-index: 1;
}

/* Polaroid card */
.s4-polaroid {
  position: relative;
  background: #fff;
  padding: 10px 10px 32px;
  border-radius: 3px;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.28),
    0 2px 6px rgba(0,0,0,0.18);
  transform: rotate(var(--rot, 0deg));
  transform-origin: top center;
  cursor: default;
  /* Hang-in animation */
  animation: s4HangIn 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
  animation-delay: var(--hang-delay, 0s);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
  z-index: 3;
  flex-shrink: 0;
}

.s4-polaroid:hover {
  box-shadow:
    0 10px 32px rgba(0,0,0,0.36),
    0 4px 12px rgba(0,0,0,0.24);
  animation: s4Swing 1.6s ease-in-out infinite;
}

@keyframes s4HangIn {
  from { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(-60px) scale(0.85); }
  to   { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(0) scale(1); }
}

@keyframes s4Swing {
  0%,100% { transform: rotate(var(--rot, 0deg)); }
  25%     { transform: rotate(calc(var(--rot, 0deg) + 4deg)); }
  75%     { transform: rotate(calc(var(--rot, 0deg) - 4deg)); }
}

/* Wooden clip at top */
.s4-clip {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 22px;
  background: linear-gradient(135deg, #8B6914 0%, #c49a3c 45%, #8B6914 100%);
  border-radius: 3px 3px 4px 4px;
  border: 1.5px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  z-index: 5;
}

.s4-clip::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 10px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

/* Photo placeholder inside polaroid */
.s4-photo {
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: #f0e8dd;
  border-radius: 2px;
}

.s4-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.s4-polaroid:hover .s4-photo img {
  transform: scale(1.05);
}

/* Heart sticker bottom-right */
.s4-heart-sticker {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 1.1rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
  animation: s4HeartPulse 2s ease-in-out infinite;
}

@keyframes s4HeartPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}

/* ── Centre Typography ────────────────────────────────────────────────── */
.s4-hero-text {
  text-align: center;
  z-index: 2;
  padding: 1.4rem 1rem 0.8rem;
  flex-shrink: 0;
}

.s4-headline {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow:
    0 2px 18px rgba(201,24,74,0.6),
    0 0 40px rgba(255,75,130,0.35);
  line-height: 1.1;
  margin-bottom: 0.8rem;
  /* Glow pulse */
  animation: s4GlowPulse 3s ease-in-out infinite;
}

@keyframes s4GlowPulse {
  0%,100% { text-shadow: 0 2px 18px rgba(201,24,74,0.6), 0 0 40px rgba(255,75,130,0.35); }
  50%     { text-shadow: 0 2px 28px rgba(201,24,74,0.9), 0 0 60px rgba(255,75,130,0.6); }
}

/* Typewriter paragraph */
.s4-typewriter {
  font-family: 'Patrick Hand', 'Caveat', cursive;
  font-size: clamp(1.05rem, 2.8vw, 1.55rem);
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.03em;
  min-height: 2em;
  /* Blinking cursor via border-right */
  border-right: 2.5px solid rgba(255,255,255,0.85);
  padding-right: 3px;
  display: inline-block;
  animation: s4Blink 0.75s step-end infinite;
  white-space: nowrap;
}

@keyframes s4Blink {
  0%,100% { border-color: rgba(255,255,255,0.85); }
  50%     { border-color: transparent; }
}

.s4-typewriter.done {
  animation: none;
  border-color: transparent;
}

/* ── Bottom Row ──────────────────────────────────────────────────────── */
.s4-bottom-row {
  width: 100%;
  max-width: 860px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0.5rem 1.5rem 1.5rem;
  z-index: 2;
  margin-top: auto;
  flex-shrink: 0;
}

/* Birthday Cake SVG */
.s4-cake-wrap {
  flex-shrink: 0;
}

.s4-cake-svg {
  width: clamp(90px, 14vw, 140px);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.25));
}

/* Candle flame flicker */
.s4-flame {
  transform-origin: center bottom;
  animation: s4FlameFlicker 1.2s ease-in-out infinite alternate;
}

@keyframes s4FlameFlicker {
  0%   { transform: scaleY(1) scaleX(1) rotate(-2deg); opacity: 1; }
  50%  { transform: scaleY(1.18) scaleX(0.88) rotate(3deg); opacity: 0.9; }
  100% { transform: scaleY(0.9) scaleX(1.06) rotate(-3deg); opacity: 1; }
}

/* Gift trigger button */
.s4-gift-trigger {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  outline: none;
  flex-shrink: 0;
  /* Bouncy pointer animation */
  animation: s4GiftBounce 1.8s ease-in-out infinite;
}

@keyframes s4GiftBounce {
  0%,100% { transform: translateY(0); }
  45%     { transform: translateY(-10px); }
  65%     { transform: translateY(-6px); }
}

.s4-gift-trigger:focus-visible {
  outline: 3px solid rgba(255,255,255,0.6);
  border-radius: 8px;
}

/* Outer glow ring */
.s4-gift-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,143,163,0.4) 0%, transparent 70%);
  animation: s4GlowRing 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes s4GlowRing {
  0%,100% { transform: scale(1); opacity: 0.7; }
  50%     { transform: scale(1.18); opacity: 1; }
}

.s4-gift-icon svg {
  width: clamp(70px, 12vw, 110px);
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(201,24,74,0.55));
  display: block;
}

.s4-gift-label {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-size: clamp(0.85rem, 2.2vw, 1.1rem);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  letter-spacing: 0.04em;
  display: block;
}


/* =========================================================================
   SCREENS B & C : Notebook paper tone + Maroon wave
   ========================================================================= */
#s4-screen-b,
#s4-screen-c {
  background: #faf5ef;
  overflow: hidden;
}

/* Notebook grid overlay */
.s4-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#ebdcd0 1px, transparent 1px),
    linear-gradient(90deg, #ebdcd0 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* Left maroon fluid wave blob */
.s4-wave-blob {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(80px, 14vw, 180px);
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.s4-wave-blob svg {
  width: 100%;
  height: 100%;
}

/* ── Shared header for B & C ────────────────────────────────────────── */
.s4-b-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 2.2rem 1.5rem 1rem;
  text-align: center;
}

.s4-b-title {
  font-family: 'Patrick Hand', 'Caveat', cursive;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #5a1430;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.s4-doodle-heart {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  animation: s4HeartPulse 2s ease-in-out infinite;
}


/* ── Screen B: Centre Gift Box ─────────────────────────────────────── */
.s4-center-gift {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 0.5rem 1rem;
}

/* Big gift button */
.s4-big-gift-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2rem 1.5rem;
  outline: none;
  /* Gentle float */
  animation: s4BigGiftFloat 2.8s ease-in-out infinite;
}

@keyframes s4BigGiftFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-14px) rotate(1deg); }
}

.s4-big-gift-btn:focus-visible {
  outline: 3px solid #c9184a;
  border-radius: 10px;
}

.s4-big-gift-pulse {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233,30,99,0.22) 0%, transparent 70%);
  animation: s4GlowRing 2.5s ease-in-out infinite;
  pointer-events: none;
}

.s4-big-gift-svg {
  width: clamp(160px, 26vw, 260px);
  height: auto;
  filter:
    drop-shadow(0 6px 24px rgba(201,24,74,0.45))
    drop-shadow(0 2px 8px rgba(0,0,0,0.2));
  display: block;
}

/* Tap hint arrow */
.s4-tap-hint {
  position: absolute;
  right: -1rem;
  bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.s4-tap-arrow {
  width: 72px;
  height: 52px;
}

.s4-tap-text {
  font-family: 'Caveat', 'Patrick Hand', cursive;
  font-size: 1.05rem;
  color: #c9184a;
  font-weight: 700;
  margin-left: 0.5rem;
}

/* Bottom-right party puppy */
.s4-puppy-wrap {
  position: absolute;
  right: 2rem;
  bottom: 0;
  z-index: 2;
}

.s4-puppy-svg {
  width: clamp(90px, 14vw, 150px);
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
  animation: s4PuppyBob 2.2s ease-in-out infinite;
}

@keyframes s4PuppyBob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-8px) rotate(2deg); }
}


/* ── Screen C: Virtual Hug ──────────────────────────────────────────── */
#s4-screen-c {
  display: flex;
  flex-direction: column;
}

.s4-hug-center {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem 1rem;
}

.s4-hug-illustration {
  animation: s4HugSway 3s ease-in-out infinite;
}

@keyframes s4HugSway {
  0%,100% { transform: scale(1) translateY(0); }
  50%     { transform: scale(1.03) translateY(-6px); }
}

/* Hug GIF */
.s4-hug-gif {
  width: clamp(200px, 40vw, 380px);
  height: auto;
  display: block;
  border-radius: 16px;
  filter: drop-shadow(0 8px 28px rgba(201,24,74,0.22));
  -webkit-user-drag: none;
  user-select: none;
}

/* Floating hearts above bears */
.s4-bear-heart {
  animation: s4BearHeartFloat 2.4s ease-in-out infinite;
}

@keyframes s4BearHeartFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

.s4-hug-caption {
  font-family: 'Patrick Hand', 'Caveat', cursive;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: #7d184d;
  font-weight: 700;
  text-align: center;
  margin-top: 1rem;
  letter-spacing: 0.02em;
}

/* Bouquet + balloon bottom-right */
.s4-bouquet-wrap {
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  z-index: 2;
}

.s4-bouquet-svg {
  width: clamp(90px, 14vw, 160px);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.18));
  animation: s4BouquetSway 3.5s ease-in-out infinite;
}

@keyframes s4BouquetSway {
  0%,100% { transform: rotate(-3deg) translateY(0); }
  50%     { transform: rotate(3deg) translateY(-6px); }
}


/* =========================================================================
   SECTION 4 RESPONSIVE TWEAKS
   ========================================================================= */
@media (max-width: 680px) {
  .s4-gallery {
    gap: 0.9rem;
    height: 210px;
    padding-top: 2rem;
  }

  .s4-photo {
    width: 140px;
    height: 140px;
  }

  .s4-polaroid {
    padding: 7px 7px 24px;
  }

  .s4-bottom-row {
    padding: 0.5rem 1rem 1rem;
  }

  .s4-puppy-wrap {
    right: 0.5rem;
  }

  .s4-tap-hint {
    display: none;
  }
}

@media (max-width: 420px) {
  .s4-gallery {
    gap: 0.4rem;
    height: 180px;
  }

  .s4-photo {
    width: 100px;
    height: 100px;
  }

  .s4-polaroid {
    padding: 5px 5px 18px;
  }
}


/* =========================================================================
   SECTION 5 : VINTAGE SCRAPBOOK BIRTHDAY CAROUSEL
   ========================================================================= */

/* ── Section shell ── */
.s5-section {
  background: radial-gradient(ellipse at 30% 20%, #5a0e1c 0%, #3d0711 45%, #2a0009 100%);
  /* Fine woven canvas texture via repeating gradient */
  background-image:
    radial-gradient(ellipse at 30% 20%, #5a0e1c 0%, #3d0711 45%, #2a0009 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.018) 2px,
      rgba(255,255,255,0.018) 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.012) 2px,
      rgba(255,255,255,0.012) 3px
    );
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.app-section.s5-section.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Twinkle stars ── */
.s5-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.s5-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: #fff;
  animation: s5Twinkle 2.4s var(--d) ease-in-out infinite alternate;
}

@keyframes s5Twinkle {
  0%   { opacity: 0.08; transform: scale(0.6); }
  50%  { opacity: 0.9;  transform: scale(1.4); }
  100% { opacity: 0.2;  transform: scale(0.8); }
}

/* ── Navigation arrows ── */
.s5-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(251,245,232,0.35);
  background: rgba(61,7,17,0.72);
  backdrop-filter: blur(8px);
  color: #fbf5e8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
}
.s5-nav:hover:not(:disabled) {
  background: rgba(139,21,34,0.85);
  border-color: rgba(251,245,232,0.6);
  transform: translateY(-50%) scale(1.1);
}
.s5-nav:disabled {
  opacity: 0.25;
  cursor: default;
}
.s5-nav--prev { left: 16px; }
.s5-nav--next { right: 16px; }

/* ── Carousel Bottom Controls (Progress Bar + Dots + Auto-Scroll Toggle) ── */
.s5-carousel-controls {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 25;
  background: rgba(42, 0, 9, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 16px;
  border-radius: 30px;
  border: 1px solid rgba(251, 245, 232, 0.22);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.s5-progress-bar-track {
  width: 54px;
  height: 4px;
  background: rgba(251, 245, 232, 0.18);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.s5-progress-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #c9956a, #fbf5e8);
  border-radius: 4px;
  transition: width 0.08s linear;
}

.s5-dots {
  display: flex;
  gap: 9px;
  align-items: center;
}

.s5-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(251,245,232,0.5);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  padding: 0;
}
.s5-dot--active {
  background: #fbf5e8;
  border-color: #fbf5e8;
  transform: scale(1.3);
}
.s5-dot:hover:not(.s5-dot--active) {
  background: rgba(251,245,232,0.4);
}

.s5-autoplay-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(251, 245, 232, 0.12);
  border: 1px solid rgba(251, 245, 232, 0.25);
  color: #fbf5e8;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  user-select: none;
}
.s5-autoplay-toggle:hover {
  background: rgba(201, 149, 106, 0.3);
  border-color: rgba(251, 245, 232, 0.5);
  transform: scale(1.04);
}
.s5-autoplay-toggle.is-paused {
  background: rgba(139, 21, 34, 0.55);
  border-color: rgba(245, 210, 160, 0.4);
  color: #f5d2a0;
}

/* ── Track (slide container) ── */
.s5-track-wrap {
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  padding: 0 76px;
  cursor: grab;
}
.s5-track-wrap.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.s5-track {
  display: flex;
  width: 100%;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ── Panel shell ── */
.s5-panel {
  flex: 0 0 100%;
  width: 100%;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 60px;
}

/* ── Panel inner wrapper (two-column default) ── */
.s5-panel-inner {
  display: flex;
  gap: 52px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  animation: s5PanelIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes s5PanelIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PANEL 1 : COVER SLIDE
   ========================================================================== */
.s5-cover-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fbf5e8;
}

.s5-cover-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: #c9956a;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.s5-cover-happy {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fbf5e8;
  text-transform: uppercase;
  line-height: 1;
}

.s5-cover-birthday {
  font-family: 'Pinyon Script', cursive;
  font-size: 7rem;
  color: #f5d2a0;
  line-height: 1;
  margin: -4px 0;
  text-shadow: 0 2px 28px rgba(139,21,34,0.6);
}

.s5-cover-beloved {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  color: #d4a8a0;
  text-transform: uppercase;
  margin-top: 4px;
}

.s5-cover-flourish {
  margin: 10px 0 14px;
}

.s5-cover-verse {
  font-family: 'Courier Prime', monospace;
  font-size: 1rem;
  font-style: italic;
  color: rgba(251,245,232,0.65);
  line-height: 1.75;
  max-width: 300px;
}

/* ── Right: postcard ── */
.s5-cover-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.s5-postcard {
  position: relative;
  width: 320px;
  min-height: 430px;
  background: #fbf5e8;
  border-radius: 4px;
  box-shadow: 6px 8px 36px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(139,21,34,0.12);
  transform: rotate(3deg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: visible;
}

.s5-postcard-lines {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 10px;
}
.s5-postcard-lines span {
  display: block;
  height: 1px;
  background: rgba(139,100,60,0.25);
  width: 100%;
}

.s5-postcard-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: rgba(100,60,30,0.5);
  text-align: center;
  text-transform: uppercase;
  margin-top: -4px;
}

/* Postage stamp photo */
.s5-stamp-frame {
  position: relative;
  align-self: flex-end;
  margin-top: auto;
}

.s5-stamp-perfs {
  position: absolute;
  inset: -7px;
  border: 7px solid #fbf5e8;
  box-shadow:
    0 0 0 1px #c8b99a,
    -7px -7px 0 0 #fbf5e8, -14px -7px 0 0 #fbf5e8, -21px -7px 0 0 #fbf5e8, -28px -7px 0 0 #fbf5e8,
    7px -7px 0 0 #fbf5e8, 14px -7px 0 0 #fbf5e8, 21px -7px 0 0 #fbf5e8, 28px -7px 0 0 #fbf5e8,
    -7px 7px 0 0 #fbf5e8, -14px 7px 0 0 #fbf5e8, -21px 7px 0 0 #fbf5e8, -28px 7px 0 0 #fbf5e8,
    7px 7px 0 0 #fbf5e8, 14px 7px 0 0 #fbf5e8, 21px 7px 0 0 #fbf5e8, 28px 7px 0 0 #fbf5e8;
  background: linear-gradient(45deg, #e8ddd0, #f5eedf);
  border-radius: 1px;
  z-index: 0;
}

.s5-stamp-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 190px;
  height: 190px;
  object-fit: cover;
  filter: sepia(0.2) contrast(1.05);
}

/* Wax seal */
.s5-wax-seal {
  position: absolute;
  bottom: -20px;
  right: -22px;
  z-index: 5;
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
  animation: s5WaxWobble 3s ease-in-out infinite alternate;
}
@keyframes s5WaxWobble {
  from { transform: rotate(-4deg) scale(1); }
  to   { transform: rotate(2deg) scale(1.04); }
}

.s5-cover-ribbon {
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  letter-spacing: 0.15em;
  color: rgba(201,149,106,0.75);
  text-align: center;
  text-transform: uppercase;
  margin-top: 4px;
}


/* ==========================================================================
   PANEL 2 : CLIPBOARD
   ========================================================================== */
.s5-panel-inner--clipboard {
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.s5-clipboard {
  position: relative;
  background: #e8ddd0;
  border-radius: 6px 6px 4px 4px;
  box-shadow: 0 10px 44px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(139,100,60,0.2);
  width: 460px;
  padding: 60px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Metal clip at top */
.s5-clip-metal {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 2;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}

.s5-clip-bar {
  width: 90px;
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(180deg, #c8a856 0%, #8a6a28 50%, #c8a856 100%);
}
.s5-clip-bar--back {
  margin-bottom: -4px;
  background: linear-gradient(180deg, #a88030 0%, #6a4a10 50%, #a88030 100%);
}
.s5-clip-spring {
  width: 56px;
  height: 18px;
  border: 4px solid #b89040;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: transparent;
}

.s5-clipboard-paper {
  background: #faf7f0;
  border-radius: 2px;
  padding: 18px 16px 24px;
  box-shadow: inset 0 0 0 1px rgba(139,100,60,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.s5-clipboard-header,
.s5-clipboard-footer {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: rgba(100,60,30,0.55);
  text-transform: uppercase;
}

/* Film strip 2×2 grid */
.s5-filmstrip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.s5-film-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #1a1a1a;
  padding: 6px 4px 4px;
  border-radius: 2px;
  gap: 3px;
}

.s5-film-perf {
  display: flex;
  gap: 5px;
  width: 100%;
  justify-content: center;
}
.s5-film-perf span {
  display: block;
  width: 8px;
  height: 5px;
  background: #3a3a3a;
  border-radius: 1px;
}

.s5-film-photo {
  width: 170px;
  height: 140px;
  overflow: hidden;
}
.s5-film-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.25) contrast(1.08);
  display: block;
}

.s5-film-label {
  font-family: 'Courier Prime', monospace;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em;
}

/* Porcelain plate */
.s5-porcelain-plate {
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
  opacity: 0.92;
  animation: s5PlateFloat 4s ease-in-out infinite alternate;
}
@keyframes s5PlateFloat {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-8px) rotate(2deg); }
}


/* ==========================================================================
   PANEL 3 : LOVE LETTER & POLAROIDS
   ========================================================================== */
.s5-panel-inner--letter {
  align-items: flex-start;
  gap: 28px;
}

/* Aged letter sheet */
.s5-letter-sheet {
  flex: 1;
  min-width: 300px;
  max-width: 420px;
  background: linear-gradient(160deg, #fdf6e3, #f8eecf 60%, #f0e3ba);
  border-radius: 2px;
  padding: 30px 28px 36px;
  box-shadow: 4px 6px 30px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(139,100,60,0.18);
  position: relative;
  border-left: 2px solid rgba(180,120,60,0.35);
  background-image:
    linear-gradient(160deg, #fdf6e3, #f8eecf 60%, #f0e3ba),
    repeating-linear-gradient(
      transparent 0,
      transparent 30px,
      rgba(139,100,60,0.13) 30px,
      rgba(139,100,60,0.13) 31px
    );
  background-size: 100% 100%, 100% 31px;
  background-position: 0 0;
  min-height: 460px;
}

.s5-letter-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.s5-letter-date {
  font-family: 'Courier Prime', monospace;
  font-size: 0.85rem;
  color: rgba(100,60,20,0.65);
  font-style: italic;
  flex: 0 0 auto;
}
.s5-letter-rule {
  flex: 1;
  height: 1px;
  background: rgba(139,100,60,0.25);
}

.s5-letter-salutation {
  font-family: 'Pinyon Script', cursive;
  font-size: 2.4rem;
  color: #5a2a0a;
  margin-bottom: 14px;
  line-height: 1;
}

.s5-letter-body {
  font-family: 'Courier Prime', monospace;
  font-size: 0.9rem;
  line-height: 1.85;
  color: #4a2a10;
  margin-bottom: 10px;
}

.s5-letter-sign {
  font-family: 'Courier Prime', monospace;
  font-size: 0.9rem;
  color: #4a2a10;
  margin-top: 16px;
  line-height: 1.7;
}
.s5-letter-name {
  font-family: 'Pinyon Script', cursive;
  font-size: 1.9rem;
  color: #8b1522;
  display: block;
}

/* Pressed flower corner accent */
.s5-pressed-flower {
  position: absolute;
  bottom: 14px;
  left: 16px;
  opacity: 0.82;
  filter: blur(0.2px);
}

/* Polaroid stack */
.s5-polaroid-stack {
  flex: 0 0 auto;
  position: relative;
  width: 360px;
  height: 500px;
}

.s5-polaroid-frame {
  position: absolute;
  background: #fff;
  box-shadow: 4px 8px 28px rgba(0,0,0,0.45);
  padding: 14px 14px 52px;
  border-radius: 2px;
}
.s5-polaroid-frame--main {
  width: 300px;
  bottom: 0;
  left: 20px;
  transform: rotate(-3deg);
  z-index: 2;
}
.s5-polaroid-frame--back {
  width: 270px;
  top: 14px;
  right: 0;
  transform: rotate(6deg);
  z-index: 1;
  opacity: 0.85;
}

.s5-polaroid-img-wrap {
  overflow: hidden;
  border-radius: 1px;
}
.s5-polaroid-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: sepia(0.15) contrast(1.05);
}

.s5-polaroid-caption {
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  color: #3a2010;
  text-align: center;
  padding-top: 10px;
  line-height: 1.3;
}

/* Washi tape strip */
.s5-washi {
  position: absolute;
  width: 60px;
  height: 16px;
  background: rgba(var(--washi-col-raw, 212,166,200), 0.5);
  background-color: color-mix(in srgb, var(--washi-col, #d4a6c8) 55%, transparent);
  transform: rotate(var(--washi-angle, 0deg));
  z-index: 3;
  border-radius: 1px;
  opacity: 0.75;
}

/* Mini postage stamps */
.s5-stamp-mini {
  position: absolute;
  z-index: 4;
}
.s5-stamp-mini--1 {
  top: 40px;
  right: 12px;
  transform: rotate(8deg);
}
.s5-stamp-mini--2 {
  top: 100px;
  right: 8px;
  transform: rotate(-5deg);
}
.s5-stamp-mini-inner {
  width: 38px;
  height: 46px;
  background: #fdf6e3;
  border: 5px solid #fdf6e3;
  box-shadow: 0 0 0 1.5px #c8b99a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #8b1522;
  line-height: 1.2;
}
.s5-stamp-mini-inner span {
  font-family: 'Cinzel', serif;
  font-size: 0.38rem;
  letter-spacing: 0.1em;
  color: #5a2a0a;
  text-transform: uppercase;
}


/* ==========================================================================
   PANEL 4 : MUSIC PLAYER & LACE FRAME
   ========================================================================== */
.s5-panel-inner--music {
  align-items: center;
  gap: 36px;
  flex-wrap: nowrap;
}

/* Music player card */
.s5-music-card {
  flex: 0 0 auto;
  width: 400px;
  background: linear-gradient(160deg, #2a0a14, #1a0608);
  border-radius: 20px;
  box-shadow: 0 14px 52px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(139,21,34,0.35);
  overflow: hidden;
  position: relative;
}

.s5-music-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.015) 0,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 6px
    );
  pointer-events: none;
}

.s5-music-card-inner {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.s5-music-header {
  display: flex;
  justify-content: center;
}
.s5-music-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: #c9956a;
  text-transform: uppercase;
  background: rgba(201,149,106,0.1);
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(201,149,106,0.25);
}

.s5-music-title-block {
  text-align: center;
}
.s5-music-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: #fbf5e8;
  line-height: 1.1;
}
.s5-music-title span {
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #c9956a;
  display: block;
  margin-top: 4px;
}
.s5-music-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: rgba(251,245,232,0.4);
  margin-top: 6px;
  text-transform: uppercase;
}

.s5-music-camera {
  display: flex;
  justify-content: center;
}

/* Progress bar */
.s5-music-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.s5-music-time {
  font-family: 'Courier Prime', monospace;
  font-size: 0.78rem;
  color: rgba(251,245,232,0.5);
  flex: 0 0 auto;
  min-width: 34px;
}
.s5-music-bar {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  overflow: visible;
}
.s5-music-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8b1522, #c9956a);
  border-radius: 4px;
  transition: width 0.8s linear;
}
.s5-music-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fbf5e8;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
  transition: left 0.8s linear;
  pointer-events: none;
}

/* Playback controls */
.s5-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.s5-ctrl-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  color: #fbf5e8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.s5-ctrl-btn:hover {
  background: rgba(139,21,34,0.5);
  transform: scale(1.08);
}
.s5-ctrl-btn--play {
  width: 68px;
  height: 68px;
  background: linear-gradient(145deg, #8b1522, #5c0a0f);
  border: none;
  box-shadow: 0 6px 22px rgba(139,21,34,0.65);
}
.s5-ctrl-btn--play:hover {
  background: linear-gradient(145deg, #a01d2e, #8b1522);
  transform: scale(1.1);
}

/* Musical notes floating decoration */
.s5-music-notes {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.s5-note {
  font-size: 0.9rem;
  color: rgba(201,149,106,0.5);
  animation: s5NoteFloat 2.5s ease-in-out infinite alternate;
}
.s5-note--1 { animation-delay: 0s; }
.s5-note--2 { animation-delay: 0.8s; }
.s5-note--3 { animation-delay: 1.6s; }
@keyframes s5NoteFloat {
  from { opacity: 0.3; transform: translateY(0); }
  to   { opacity: 0.8; transform: translateY(-6px); }
}

/* Lace frame */
.s5-lace-frame-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.s5-lace-frame {
  position: relative;
  width: 330px;
  min-height: 440px;
  background: linear-gradient(160deg, #3d0711, #2a0009);
  border: 2px solid rgba(251,245,232,0.18);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6), inset 0 0 70px rgba(139,21,34,0.25);
  overflow: hidden;
  animation: s5FrameWobble 5s ease-in-out infinite alternate;
}
@keyframes s5FrameWobble {
  from { transform: rotate(-1.5deg); }
  to   { transform: rotate(1.5deg); }
}

.s5-lace-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.s5-frame-photo {
  position: relative;
  z-index: 1;
  padding: 16px;
}
.s5-frame-photo img {
  display: block;
  width: 260px;
  height: 320px;
  object-fit: cover;
  filter: sepia(0.18) contrast(1.05);
  border-radius: 1px;
}

.s5-frame-bow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.45));
}

.s5-frame-pin {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0c060, #8a6a10 60%, #4a3a08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 10;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .s5-panel-inner { max-width: 940px; gap: 36px; }
  .s5-clipboard { width: 390px; }
  .s5-film-photo { width: 145px; height: 118px; }
  .s5-music-card { width: 340px; }
  .s5-lace-frame { width: 280px; min-height: 380px; }
  .s5-frame-photo img { width: 220px; height: 270px; }
  .s5-polaroid-stack { width: 300px; height: 420px; }
  .s5-polaroid-frame--main { width: 255px; }
  .s5-polaroid-frame--back { width: 230px; }
  .s5-postcard { width: 270px; min-height: 370px; }
  .s5-stamp-img { width: 160px; height: 160px; }
}

@media (max-width: 780px) {
  .s5-track-wrap { padding: 0 48px; }
  .s5-nav--prev { left: 4px; }
  .s5-nav--next { right: 4px; }

  .s5-panel-inner {
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
    max-height: 78vh;
  }

  .s5-cover-birthday { font-size: 4.2rem; }
  .s5-postcard { width: 240px; min-height: 300px; }
  .s5-stamp-img { width: 140px; height: 140px; }

  .s5-clipboard { width: 320px; }
  .s5-film-photo { width: 118px; height: 96px; }
  .s5-porcelain-plate { display: none; }

  .s5-letter-sheet { min-height: auto; max-width: 100%; }
  .s5-polaroid-stack { width: 280px; height: 380px; }
  .s5-polaroid-frame--main { width: 240px; }
  .s5-polaroid-frame--back { width: 215px; }

  .s5-music-card { width: 100%; max-width: 340px; }
  .s5-lace-frame { width: 240px; min-height: 320px; }
  .s5-frame-photo img { width: 190px; height: 235px; }
}

@media (max-width: 480px) {
  .s5-cover-happy { font-size: 2rem; }
  .s5-cover-birthday { font-size: 3.2rem; }
  .s5-panel { padding: 16px 8px 60px; }
  .s5-clipboard { width: 90vw; }
  .s5-film-photo { width: 90px; height: 74px; }
  .s5-music-card { max-width: 95vw; }
  .s5-lace-frame { width: 90vw; max-width: 300px; }
  .s5-carousel-controls {
    bottom: 12px;
    gap: 8px;
    padding: 4px 10px;
  }
  .s5-progress-bar-track {
    width: 38px;
  }
  .s5-autoplay-text {
    font-size: 0.55rem;
  }
}