/* =========================================================
   TOKENS
========================================================= */
:root{
  --black: #060605;
  --charcoal: #0f0e0c;
  --panel: #16140f;
  --gray: #2b271e;
  --gold: #d4af37;
  --gold-bright: #f4e4bc;
  --gold-deep: #8b6914;
  --white: #faf7f0;
  --muted: #b9ae95;

  --font-display: 'Aref Ruqaa', serif;
  --font-body: 'Vazirmatn', sans-serif;

  --ease-lux: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

html,body{
  height:100%;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  overflow-x:hidden;
}

body{
  scroll-snap-type:y proximity;
  overflow-y:auto;
  height:100vh;
}

::selection{ background:var(--gold); color:var(--black); }

button{ font-family:inherit; }

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

/* =========================================================
   LOADER
========================================================= */
.loader{
  position:fixed; inset:0; z-index:999;
  background:radial-gradient(120% 120% at 50% 40%, #120f0a 0%, var(--black) 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition:opacity 1s var(--ease-lux), visibility 1s var(--ease-lux);
}
.loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-emblem{ position:relative; width:84px; height:84px; display:flex; align-items:center; justify-content:center; }
.loader-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.loader-ring circle{
  fill:none; stroke:var(--gray); stroke-width:1.4;
}
.loader-ring::after{ content:''; }
.loader-emblem::before{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:1.4px solid transparent;
  border-top-color:var(--gold);
  border-right-color:var(--gold-bright);
  animation:spin 1.6s linear infinite;
}
.loader-glyph{
  font-family:var(--font-display);
  font-size:34px;
  color:var(--gold);
  text-shadow:0 0 20px rgba(212,175,55,.6);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.loader-text{
  font-size:13px;
  letter-spacing:.5px;
  color:var(--muted);
  animation:pulseText 2s ease-in-out infinite;
}
@keyframes pulseText{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

/* =========================================================
   BACKGROUND CANVASES
========================================================= */
#particle-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
#fx-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:50; pointer-events:none;
  opacity:0;
}

/* =========================================================
   FLOATING CONTROLS
========================================================= */
.sound-toggle{
  position:fixed; top:20px; left:20px; z-index:80;
  width:46px; height:46px; border-radius:50%;
  background:rgba(20,18,14,.55);
  border:1px solid rgba(212,175,55,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--gold-bright);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:box-shadow .4s var(--ease-soft), transform .3s var(--ease-soft), border-color .4s;
}
.sound-toggle svg{ width:20px; height:20px; }
.sound-toggle:hover{ box-shadow:0 0 22px rgba(212,175,55,.35); border-color:var(--gold); }
.sound-toggle:active{ transform:scale(.92); }
.sound-toggle.playing{ box-shadow:0 0 18px rgba(212,175,55,.5); animation:soundPulse 2.4s ease-in-out infinite; }
@keyframes soundPulse{
  0%,100%{ box-shadow:0 0 12px rgba(212,175,55,.25); }
  50%{ box-shadow:0 0 24px rgba(212,175,55,.55); }
}

.scene-rail{
  position:fixed; top:50%; left:20px; transform:translateY(-50%);
  z-index:80;
  display:flex; flex-direction:column; gap:14px;
}
.rail-dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(185,174,149,.3);
  transition:all .5s var(--ease-soft);
}
.rail-dot.active{
  background:var(--gold);
  box-shadow:0 0 10px rgba(212,175,55,.8);
  transform:scale(1.5);
}
@media (max-width:640px){
  .scene-rail{ left:10px; gap:10px; }
  .sound-toggle{ top:14px; left:14px; width:40px; height:40px; }
  .sound-toggle svg{ width:17px; height:17px; }
}

/* =========================================================
   SCENE LAYOUT
========================================================= */
main{ position:relative; z-index:1; }

.scene{
  position:relative;
  min-height:100vh;
  width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:80px 24px;
  scroll-snap-align:start;
  overflow:hidden;
}

.scene-inner{
  position:relative; z-index:2;
  width:100%; max-width:720px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

.vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.75) 100%);
  pointer-events:none; z-index:1;
}

.scene-heading{
  font-family:var(--font-display);
  font-size:clamp(26px,6vw,42px);
  color:var(--white);
  margin-bottom:48px;
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.heading-eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:4px;
  color:var(--gold);
  text-transform:uppercase;
  opacity:.8;
}

/* =========================================================
   SCENE 0 — Whisper / typewriter
========================================================= */
.scene-0{ background:var(--black); }

.typewriter{
  font-family:var(--font-display);
  font-size:clamp(24px,7vw,44px);
  line-height:1.7;
  color:var(--gold-bright);
  white-space:pre-wrap;
  min-height:180px;
  text-shadow:0 0 30px rgba(212,175,55,.25);
}
.typewriter .cursor{
  display:inline-block;
  width:2px; height:1em;
  background:var(--gold);
  margin-inline-start:3px;
  vertical-align:middle;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.scroll-hint{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; transition:opacity 1.2s ease 2.4s;
  font-size:11px; letter-spacing:3px; color:var(--muted);
}
.scroll-hint.show{ opacity:.75; }
.hint-line{ width:1px; height:30px; background:linear-gradient(var(--gold), transparent); animation:hintMove 1.8s ease-in-out infinite; }
@keyframes hintMove{ 0%,100%{ transform:scaleY(1); opacity:.4; } 50%{ transform:scaleY(1.3); opacity:1; } }

/* =========================================================
   SCENE 1 — Name reveal
========================================================= */
.scene-1{ background:radial-gradient(ellipse at 50% 45%, #14110b 0%, var(--black) 65%); }

.name-reveal{ position:relative; }

.spark{
  font-size:20px;
  opacity:0;
  filter:drop-shadow(0 0 8px rgba(212,175,55,.8));
}
.spark-left{ position:absolute; top:-10px; left:12%; }
.spark-right{ position:absolute; bottom:-6px; right:12%; }

.teacher-name{ display:flex; flex-direction:column; gap:10px; }
.name-line{
  font-family:var(--font-display);
  opacity:0;
  filter:blur(6px);
  transform:translateY(18px) scale(.94);
}
.line-title{
  font-size:clamp(18px,4.4vw,26px);
  color:var(--muted);
  letter-spacing:2px;
}
.line-main{
  font-size:clamp(38px,11vw,86px);
  font-weight:700;
  background:linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-bright) 35%, var(--gold) 55%, var(--gold-bright) 75%, var(--gold-deep) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(212,175,55,.25);
}

.name-underline{
  margin-top:22px; height:1px; width:0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.name-caption{
  margin-top:22px; font-size:14px; letter-spacing:1px; color:var(--muted);
  opacity:0; transform:translateY(10px);
}

/* revealed state, triggered by JS with .in-view */
.scene-1.in-view .spark{ animation:sparkIn 1.4s var(--ease-lux) forwards; }
.scene-1.in-view .spark-right{ animation-delay:.5s; }
.scene-1.in-view .line-title{ animation:lineIn 1.3s var(--ease-lux) .2s forwards; }
.scene-1.in-view .line-main{ animation:lineIn 1.5s var(--ease-lux) .55s forwards, shimmer 5s linear 2s infinite; }
.scene-1.in-view .name-underline{ animation:underlineIn 1.2s var(--ease-lux) 1.3s forwards; }
.scene-1.in-view .name-caption{ animation:captionIn 1.1s var(--ease-lux) 1.7s forwards; }

@keyframes sparkIn{ 0%{ opacity:0; transform:scale(.4) rotate(-30deg);} 60%{ opacity:1; } 100%{ opacity:.9; transform:scale(1) rotate(0);} }
@keyframes lineIn{ to{ opacity:1; filter:blur(0); transform:translateY(0) scale(1);} }
@keyframes underlineIn{ to{ width:180px; } }
@keyframes captionIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes shimmer{ to{ background-position:-220% 0; } }

/* =========================================================
   SCENE 2 — Timeline
========================================================= */
.scene-2{ background:var(--charcoal); align-items:flex-start; padding-top:110px; }

.timeline{ position:relative; width:100%; padding-inline-start:8px; }
.timeline-spine{
  position:absolute; top:6px; bottom:6px;
  inset-inline-start:27px;
  width:1.5px;
  background:linear-gradient(var(--gold-deep), var(--gold), var(--gold-deep));
  opacity:.5;
}

.tl-card{
  position:relative;
  display:flex; gap:22px; align-items:flex-start;
  text-align:start;
  margin-bottom:44px;
  opacity:0; transform:translateY(30px);
  transition:opacity .9s var(--ease-lux), transform .9s var(--ease-lux);
}
.tl-card.in-view{ opacity:1; transform:translateY(0); }

.tl-node{
  flex:none; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, #1c1911, #0d0b07);
  border:1px solid rgba(212,175,55,.4);
  box-shadow:0 0 0 rgba(212,175,55,0);
  transition:box-shadow .6s var(--ease-soft);
  position:relative; z-index:2;
}
.tl-card.in-view .tl-node{ box-shadow:0 0 24px rgba(212,175,55,.35); }
.tl-icon{ font-size:24px; filter:grayscale(0) drop-shadow(0 0 6px rgba(212,175,55,.4)); }

.tl-content{ padding-top:6px; }
.tl-content h3{
  font-family:var(--font-display);
  font-size:22px; color:var(--gold-bright); margin-bottom:8px;
}
.tl-content p{ font-size:14.5px; line-height:1.9; color:var(--muted); max-width:46ch; }

/* =========================================================
   SCENE 3 — Letter
========================================================= */
.scene-3{ background:radial-gradient(ellipse at 50% 30%, #120f0a, var(--black) 70%); }

.letter-card{
  position:relative;
  width:100%;
  padding:52px 34px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(30,27,20,.55), rgba(10,9,7,.55));
  border:1px solid rgba(212,175,55,.22);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  opacity:0; transform:translateY(24px) scale(.98);
  transition:opacity 1.1s var(--ease-lux), transform 1.1s var(--ease-lux);
}
.scene-3.in-view .letter-card{ opacity:1; transform:translateY(0) scale(1); }

.letter-corner{ position:absolute; width:26px; height:26px; border:1px solid var(--gold); opacity:.55; }
.corner-tl{ top:14px; inset-inline-start:14px; border-inline-end:none; border-bottom:none; }
.corner-br{ bottom:14px; inset-inline-end:14px; border-inline-start:none; border-top:none; }

.letter-salutation{
  font-family:var(--font-display); font-size:22px; color:var(--gold);
  margin-bottom:22px;
}
.letter-body{
  font-size:15.5px; line-height:2.05; color:var(--white); opacity:.92;
  margin-bottom:20px;
}
.letter-closing{
  font-family:var(--font-display); font-size:20px; color:var(--gold-bright);
  margin-top:14px;
}
.letter-sign{
  margin-top:26px; font-size:14px; letter-spacing:1px; color:var(--muted);
  text-align:end;
}

/* =========================================================
   SCENE 4 — Cake
========================================================= */
.scene-4{ background:var(--charcoal); }

.cake-heading{ margin-bottom:10px; }
.cake-hint{
  font-size:13px; color:var(--muted); margin-bottom:36px; letter-spacing:.5px;
  animation:hintFade 2.6s ease-in-out infinite;
}
@keyframes hintFade{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.cake-wrap{
  position:relative;
  background:none; border:none; cursor:pointer;
  width:min(78vw, 320px);
  padding:0;
  transition:transform .35s var(--ease-soft);
}
.cake-wrap:active{ transform:scale(.97); }

.cake-glow{
  position:absolute; inset:-30% -10% 0 -10%;
  background:radial-gradient(ellipse at 50% 60%, rgba(212,175,55,.35), transparent 70%);
  filter:blur(10px);
  animation:cakeGlowPulse 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cakeGlowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.cake-svg{ width:100%; height:auto; position:relative; z-index:2; }

.cake-shadow{ fill:rgba(0,0,0,.5); filter:blur(6px); }
.tier{ fill:#1a1712; stroke:rgba(212,175,55,.3); stroke-width:1; }
.tier-icing{ fill:var(--gold-bright); opacity:.9; }
.drip path{ fill:none; stroke:var(--gold); stroke-width:6; stroke-linecap:round; opacity:.85; }

.candle-body{ fill:#e9e2d0; }
.flame-outer{ fill:#ffb648; opacity:0; transform-origin:center bottom; }
.flame-inner{ fill:#fff4d6; opacity:0; transform-origin:center bottom; }

.candle-body::after{ content:''; }
/* flame lighting is toggled via .lit class added with staggered delay by JS */
.cake-wrap.lit .flame-outer{ animation:flameFlicker 1.6s ease-in-out infinite; }
.cake-wrap.lit .flame-inner{ animation:flameFlicker 1.4s ease-in-out infinite .1s; }
@keyframes flameFlicker{
  0%,100%{ opacity:1; transform:scaleY(1) scaleX(1) translateX(0); }
  30%{ opacity:.85; transform:scaleY(1.12) scaleX(.92) translateX(.5px); }
  60%{ opacity:1; transform:scaleY(.94) scaleX(1.05) translateX(-.5px); }
}
.candle[data-c] .flame-outer, .candle[data-c] .flame-inner{ transition:opacity .4s; }

.balloon-field{
  position:fixed; inset:0; z-index:40; pointer-events:none; overflow:hidden;
}
.balloon{
  position:absolute; bottom:-120px;
  width:46px; height:58px; border-radius:50% 50% 50% 50%/58% 58% 42% 42%;
  opacity:.92;
  animation:balloonRise linear forwards;
}
.balloon::after{
  content:''; position:absolute; bottom:-16px; left:50%; width:1px; height:16px;
  background:rgba(255,255,255,.4); transform:translateX(-50%);
}
@keyframes balloonRise{
  to{ transform:translateY(-115vh) translateX(var(--drift,0px)) rotate(var(--rot,0deg)); opacity:0; }
}

/* =========================================================
   SCENE 5 — Final glass card
========================================================= */
.scene-5{ background:radial-gradient(ellipse at 50% 20%, #14110b, var(--black) 70%); padding-bottom:110px; }

.final-card{
  width:100%;
  padding:52px 30px 44px;
  border-radius:20px;
  background:linear-gradient(160deg, rgba(35,31,22,.5), rgba(8,7,6,.55));
  border:1px solid rgba(212,175,55,.25);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex; flex-direction:column; align-items:center;
  opacity:0; transform:translateY(30px) scale(.97);
  transition:opacity 1.2s var(--ease-lux), transform 1.2s var(--ease-lux);
}
.scene-5.in-view .final-card{ opacity:1; transform:translateY(0) scale(1); }

.final-text{ font-size:15.5px; line-height:2.05; color:var(--white); opacity:.92; margin-bottom:18px; max-width:52ch; }
.final-highlight{
  font-family:var(--font-display); font-size:26px; color:var(--gold-bright);
  margin:10px 0 24px; text-shadow:0 0 24px rgba(212,175,55,.35);
}
.final-divider{ width:70px; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); margin-bottom:22px; }
.final-respect{ font-size:13px; color:var(--muted); letter-spacing:1px; margin-bottom:6px; }

.signature-svg{ width:min(80vw, 300px); height:auto; margin:6px 0 4px; }
#sigPath{
  stroke-dasharray:900;
  stroke-dashoffset:900;
}
.scene-5.in-view #sigPath{
  animation:signDraw 2.6s var(--ease-lux) .5s forwards;
}
@keyframes signDraw{ to{ stroke-dashoffset:0; } }

.final-name{
  font-family:var(--font-display); font-size:19px; color:var(--gold);
  opacity:0; transform:translateY(8px);
}
.scene-5.in-view .final-name{ animation:captionIn 1s var(--ease-lux) 2.8s forwards; }

/* =========================================================
   RESPONSIVE POLISH
========================================================= */
@media (max-width:480px){
  .scene{ padding:64px 18px; }
  .letter-card, .final-card{ padding:38px 22px 34px; }
  .tl-content p{ max-width:none; }
}

@media (min-width:900px){
  .scene-inner{ max-width:820px; }
}