/* ===================================================================
   FOR MEERAB — paper-cutout birthday scroll story
   =================================================================== */

:root{
  --cream: #f6ecd9;
  --kraft: #e8d9bd;
  --kraft-dark: #cbb98d;
  --ink: #4a3b2a;
  --ink-soft: #6b5a44;
  --accent: #d97757;
  --accent-soft: #f2c9b0;
  --paper-shadow: rgba(74, 59, 42, 0.25);
  --font-display: 'Fredoka', ui-rounded, 'Segoe UI', sans-serif;
  --font-body: 'Quicksand', 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }
html{
  overflow-x: hidden;
}
body{
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  width: 100%;
}
body.locked{ overflow: hidden; height: 100vh; }
img{ -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* ---------- paper grain texture (reused) ---------- */
.paper-grain-bg{
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.05) 0, transparent 45%),
    radial-gradient(circle at 60% 20%, rgba(0,0,0,0.04) 0, transparent 35%);
}

/* ===================================================================
   SCENE 0 — PASSWORD GATE
   =================================================================== */
#gate{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--cream), var(--kraft) 70%);
  transition: opacity 0.9s ease, visibility 0.9s ease;
  padding: 24px;
  text-align: center;
}
#gate.gate-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.gate-grain{ position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.gate-grain::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.4) 0, transparent 30%),
    radial-gradient(circle at 85% 75%, rgba(74,59,42,0.06) 0, transparent 40%),
    radial-gradient(circle at 70% 15%, rgba(74,59,42,0.05) 0, transparent 30%),
    radial-gradient(circle at 30% 85%, rgba(74,59,42,0.05) 0, transparent 30%);
}

.envelope-wrap{ position: relative; z-index: 2; margin-bottom: 28px; perspective: 900px; }
.envelope{
  width: 240px; height: 165px; position: relative;
  animation: envelope-sway 4.5s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes envelope-sway{
  0%, 100%{ transform: rotate(-1.6deg); }
  50%{ transform: rotate(1.6deg); }
}
.envelope-body{
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(155deg, #ecdcc0, var(--kraft-dark));
  border-radius: 6px;
  box-shadow: 0 18px 30px -12px var(--paper-shadow), inset 0 0 0 1px rgba(74,59,42,0.15);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px;
}
.envelope-seal{
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent);
  color: #fff8ee; font-family: var(--font-display); font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transform: translateY(6px);
}
.envelope-flap{
  position: absolute; top: 0; left: 0; right: 0; height: 90px;
  background: linear-gradient(155deg, #f3e6cd, #decba3);
  clip-path: polygon(0 0, 100% 0, 50% 92%);
  transform-origin: top center;
  box-shadow: 0 2px 6px rgba(74,59,42,0.15);
}
.envelope-shadow{
  position: absolute; bottom: -16px; left: 10%; right: 10%; height: 14px;
  background: radial-gradient(ellipse at center, rgba(74,59,42,0.28), transparent 75%);
  filter: blur(2px);
}

.gate-text{ position: relative; z-index: 2; margin-bottom: 22px; }
.gate-line-1{
  font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 4vw, 30px);
  margin: 0 0 6px;
}
.gate-line-2{ margin: 0; font-size: 14px; color: var(--ink-soft); font-style: italic; }

#gate-form{ position: relative; z-index: 2; display: flex; gap: 10px; align-items: center; }
#gate-input{
  width: 130px; text-align: center; letter-spacing: 10px; font-size: 22px;
  font-family: var(--font-display); padding: 10px 8px 8px 18px;
  border: 2px solid var(--kraft-dark); border-radius: 10px;
  background: #fffaf0; color: var(--ink); outline: none;
}
#gate-input:focus{ border-color: var(--accent); }
#gate-form button{
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 11px 20px; border-radius: 10px; border: none;
  background: var(--accent); color: #fff8ee; cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(217,119,87,0.6);
  transition: transform 0.15s ease;
}
#gate-form button:hover{ transform: translateY(-2px); }
.gate-error{
  position: relative; z-index: 2; color: #b5502f; font-weight: 600; margin-top: 14px;
  height: 18px; opacity: 0; transition: opacity 0.3s ease;
}
.gate-error.show{ opacity: 1; }

/* ===================================================================
   AUDIO TOGGLE
   =================================================================== */
#audio-toggle{
  position: fixed; top: 18px; right: 18px; z-index: 500;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(74,59,42,0.15);
  background: rgba(255, 250, 240, 0.85); backdrop-filter: blur(4px);
  color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(74,59,42,0.15);
}
#audio-toggle .icon-off{ display: none; }
#audio-toggle[aria-pressed="true"] .icon-on{ display: none; }
#audio-toggle[aria-pressed="true"] .icon-off{ display: block; }

/* ===================================================================
   MAIN STORY LAYOUT
   =================================================================== */
#story{ position: relative; }
.scene{
  position: relative; width: 100%; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Neither .room-scene/.transition-scene nor position:fixed (while pinned)
   sets a z-index, so the browser falls back to DOM order for stacking —
   meaning the *next* scene, approaching from below in normal scroll flow
   as its wrapper's turn nears, painted on top of the still-pinned current
   scene the instant they geometrically overlapped (visible as the next
   scene sliding up and over the current one before the handoff actually
   happened). Explicit descending z-index keeps whatever scene is currently
   active on top until it's fully out of the way. */
#scene-opening{ z-index: 70; }
#scene-praise{ z-index: 60; }
#scene-transition-1{ z-index: 50; }
#scene-kitchen{ z-index: 40; }
#scene-transition-2{ z-index: 30; }
#scene-husband{ z-index: 20; }
#scene-closing{ z-index: 10; }

/* ---------- Scene 1: Opening ---------- */
.scene-opening{ background: linear-gradient(170deg, #f7ecd8, #eddcb8 60%, #e4cfa1); }
.opening-bg{ position: absolute; inset: 0; }
.paper-clouds{ position: absolute; inset: 0; pointer-events: none; }
.paper-clouds::before, .paper-clouds::after{
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.55);
  filter: blur(1px);
}
.paper-clouds::before{ width: 220px; height: 70px; top: 12%; left: -5%; animation: drift-cloud 38s linear infinite; }
.paper-clouds::after{ width: 160px; height: 55px; top: 68%; right: -8%; animation: drift-cloud-rev 44s linear infinite; }
@keyframes drift-cloud{ from{ transform: translateX(0);} to{ transform: translateX(140vw);} }
@keyframes drift-cloud-rev{ from{ transform: translateX(0);} to{ transform: translateX(-140vw);} }

.opening-lines{ position: relative; z-index: 3; text-align: center; padding: 0 20px; max-width: 640px; }
.reveal-line{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 5vw, 42px); margin: 0 0 10px; color: var(--ink);
  opacity: 0;
}

.opening-sassy{
  position: absolute; bottom: 0; right: 6%; z-index: 2;
  height: 62vh; max-height: 480px; width: auto;
  opacity: 0;
  filter: drop-shadow(0 18px 20px rgba(74,59,42,0.25));
}

.scroll-cue{
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
  opacity: 0; animation: cue-fade 1s ease forwards 2.3s;
}
.scroll-cue span{
  display: block; width: 22px; height: 34px; border: 2px solid var(--ink-soft); border-radius: 12px; position: relative;
}
.scroll-cue span::before{
  content: ""; position: absolute; top: 6px; left: 50%; width: 4px; height: 8px; margin-left: -2px;
  background: var(--ink-soft); border-radius: 2px; animation: cue-dot 1.6s ease-in-out infinite;
}
@keyframes cue-dot{ 0%,100%{ transform: translateY(0); opacity: 1;} 50%{ transform: translateY(10px); opacity: 0.3;} }
@keyframes cue-fade{ to{ opacity: 0.85; } }

/* ---------- Room / transition scenes (pinned + scrubbed by GSAP ScrollTrigger) ----------
   .scroll-wrap reserves the full scroll distance via plain CSS height (set inline per
   scene) so the scroll range is guaranteed correct regardless of GSAP's own pin-spacer
   sizing. GSAP just pins .room-scene/.transition-scene (pinSpacing:false) inside it. */
.scroll-wrap{ position: relative; }
.room-scene, .transition-scene{
  position: relative; height: 100vh; overflow: hidden;
}
.bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.bg-to{ opacity: 0; }

/* ---------- doorway (built in CSS, no asset) ---------- */
.doorway{
  position: absolute; bottom: 0; width: 13vw; min-width: 110px; max-width: 190px;
  height: 62vh;
  background: linear-gradient(180deg, rgba(74,59,42,0.55), rgba(30,22,14,0.75));
  border-radius: 45% 45% 6px 6px / 30% 30% 4px 4px;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.4);
  z-index: 1;
  opacity: 0.85;
}
.doorway-left{ left: 2%; }
.doorway-right{ right: 2%; }

/* ---------- character sprites within rooms ---------- */
.char-sprite, .approach-sprite, .combined-sprite, .walk-sprite{
  position: absolute; bottom: 0; height: 82vh; width: auto; max-width: 60vw;
  z-index: 3; opacity: 0;
  filter: drop-shadow(0 16px 18px rgba(74,59,42,0.28));
  will-change: opacity, transform;
}
.room-scene[data-room="livingroom-1"] .char-sprite,
.room-scene[data-room="livingroom-2"] .char-sprite{ left: 50%; transform: translateX(-50%); }
.kitchen-scene .char-sprite{ left: 50%; transform: translateX(-50%); }

.prop-sprite{
  position: absolute; left: 50%; bottom: 14vh; height: 22vh; width: auto; z-index: 4; opacity: 0;
  filter: drop-shadow(0 10px 12px rgba(74,59,42,0.3));
}

.approach-sprite{ height: 78vh; }
.meerab-approach{ left: 8%; }
.riaz-approach{ right: 8%; }
.combined-sprite{ left: 50%; transform: translateX(-50%); height: 74vh; }

.walk-sprite{ height: 78vh; opacity: 0; left: 50%; }

/* ---------- captions & speech bubbles (manga style, HTML/CSS) ---------- */
.caption, .bubble{
  position: absolute; z-index: 6; opacity: 0;
  font-family: var(--font-display); font-weight: 500;
  background: #fffaf0; color: var(--ink);
  padding: 12px 18px; border-radius: 14px;
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(74,59,42,0.18);
  max-width: min(320px, 70vw);
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.35;
}
.caption-tl{ top: 8%; left: 6%; }
.caption-center{ top: 14%; left: 50%; transform: translateX(-50%); text-align: center; }
.love-caption{ top: 10%; }
.retort-caption{ font-style: italic; font-weight: 600; }

.bubble{ border-radius: 20px; }
.bubble .speaker{
  display: block; font-size: 0.72em; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 2px;
}
.bubble::after{
  content: ""; position: absolute; width: 16px; height: 16px; background: #fffaf0;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  bottom: -9px; left: 30px; transform: rotate(45deg);
}
.bubble-tl{ top: 10%; left: 5%; }
.bubble-tr{ top: 10%; right: 5%; text-align: right; }
.bubble-tr::after{ left: auto; right: 30px; }
.bubble-bl{ top: 26%; left: 8%; }

/* ---------- ambient particle fields ---------- */
.particles{ position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.6s ease; }
.particles.active{ opacity: 1; }
.particle{ position: absolute; will-change: transform, opacity; }
.confetti-field .particle{
  width: 8px; height: 14px; border-radius: 2px;
  animation: confetti-fall linear infinite;
}
@keyframes confetti-fall{
  0%{ transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10%{ opacity: 0.9; }
  100%{ transform: translateY(110vh) rotate(380deg); opacity: 0; }
}
.hearts-field .particle{
  font-size: 22px; color: var(--accent); opacity: 0;
  animation: heart-rise ease-in infinite;
}
.hearts-field .particle::before{ content: "🤍"; }
@keyframes heart-rise{
  0%{ transform: translateY(10vh) scale(0.8); opacity: 0; }
  15%{ opacity: 0.9; }
  100%{ transform: translateY(-90vh) scale(1.15); opacity: 0; }
}

/* ---------- heat-lines / steam (Scene 5, code-built SVG) ---------- */
.heat-lines{
  position: absolute; top: 4%; left: 50%; transform: translateX(-30px);
  width: 140px; height: 160px; z-index: 4; opacity: 0; pointer-events: none;
}
.heat-lines svg{ width: 100%; height: 100%; }
.squiggle{ fill: none; stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; opacity: 0.75; }
.heat-lines.active .squiggle{ animation: heat-wiggle 1.4s ease-in-out infinite alternate; }
.heat-lines.active .s2{ animation-delay: 0.15s; }
.heat-lines.active .s3{ animation-delay: 0.3s; }
@keyframes heat-wiggle{
  0%{ transform: translateY(0) scaleY(1); opacity: 0.55; }
  100%{ transform: translateY(-8px) scaleY(1.08); opacity: 0.95; }
}

/* ---------- Scene 7: Closing ---------- */
.scene-closing{ background: linear-gradient(170deg, #f7ecd8, #ecdab6 55%, #e2caa0); }
.closing-bg{ position: absolute; inset: 0; }
.closing-clouds::before{ top: 18%; left: -6%; }
.closing-clouds::after{ top: 72%; right: -6%; }
.closing-sassy{
  position: absolute; bottom: 0; left: 8%; height: 60vh; width: auto;
  filter: drop-shadow(0 18px 20px rgba(74,59,42,0.25));
  opacity: 0;
}
.closing-text{
  position: relative; z-index: 3; text-align: center; max-width: 620px; padding: 0 22px;
  margin-left: 10%;
}
.closing-text p{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 4vw, 32px); margin: 0 0 12px; opacity: 0;
}
.closing-text .signoff{ font-size: clamp(16px, 3vw, 22px); color: var(--ink-soft); font-style: italic; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 760px){
  .char-sprite, .approach-sprite, .walk-sprite{ height: 66vh; max-width: 78vw; }
  .combined-sprite{ height: 56vh; max-width: 92vw; }
  .opening-sassy{ height: 46vh; right: 2%; }
  .closing-sassy{ height: 42vh; left: 2%; }
  .closing-text{ margin-left: 0; }
  .doorway{ width: 20vw; }
  .bubble, .caption{ max-width: 62vw; padding: 9px 13px; font-size: 13px; }
  .meerab-approach{ left: 2%; }
  .riaz-approach{ right: 2%; }
}
@media (max-width: 480px){
  .opening-lines{ padding: 0 14px; }
  .closing-text{ padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}