/* ==========================================================================
   HUMAIRA — a luxury greeting card, not a website
   -------------------------------------------------------------------------
   void      #05060A  base black
   midnight  #0C1024  midnight blue
   purple    #372154  deep purple
   roseGold  #E7B6A6  rose gold
   gold      #F0C27B  gold
   pearl     #FAF6F0  white
   pink      #F2A6C4  soft pink
   ========================================================================== */

:root{
  --void: #05060a;
  --midnight: #0c1024;
  --purple: #372154;
  --rose-gold: #e7b6a6;
  --gold: #f0c27b;
  --pearl: #faf6f0;
  --pink: #f2a6c4;
  --glass-bg: rgba(250,246,240,0.05);
  --glass-border: rgba(250,246,240,0.13);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Parisienne', cursive;

  --ease-luxury: cubic-bezier(.16,.84,.28,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  --vh: 1vh; /* set via JS for mobile-safe full height */
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  width:100%; height:100%;
  background:var(--void);
  color:var(--pearl);
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{ height:calc(var(--vh, 1vh) * 100); }
::selection{ background:var(--gold); color:var(--void); }

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

button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:4px; }

/* -------------------------------------------------------------------------
   Ambient paper grain + cursor glow (desktop only, tasteful, low-cost)
   ------------------------------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:9990; pointer-events:none; mix-blend-mode:overlay; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; top:0; left:0; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(240,194,123,0.09), rgba(242,166,196,0.04) 45%, transparent 70%);
  transform:translate(-50%,-50%); pointer-events:none; z-index:5; will-change:transform; filter:blur(4px);
}
@media (hover:none), (max-width:820px){ .cursor-glow{ display:none; } }

/* -------------------------------------------------------------------------
   Scene shell
   ------------------------------------------------------------------------- */
.sky-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:1; display:block; }

.experience{ position:relative; width:100%; height:100%; z-index:2; }
.scene{
  position:fixed; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  z-index:2;
}
.scene.is-active{ opacity:1; visibility:visible; pointer-events:auto; }

.scene-content{ position:relative; z-index:4; text-align:center; padding:0 8vw; max-width:640px; }

.eyebrow{
  font-family:var(--font-body); font-weight:300; letter-spacing:.38em; text-transform:uppercase;
  font-size:11px; color:var(--pink); opacity:.85; margin-bottom:16px;
}
.serif-italic{ font-family:var(--font-display); font-style:italic; font-weight:400; }
.scene-title{
  font-size:clamp(26px,7vw,44px); line-height:1.22; color:var(--pearl); font-weight:500;
  background:linear-gradient(120deg, var(--pearl) 35%, var(--rose-gold) 70%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.scene-title.huge{ font-size:clamp(38px,13vw,80px); }

.reveal-up{ opacity:0; transform:translateY(22px); }

/* -------------------------------------------------------------------------
   SCENE 1 — LOADER
   ------------------------------------------------------------------------- */
.scene-loader{
  z-index:100; background:radial-gradient(ellipse at 50% 32%, var(--midnight), var(--void) 72%);
  opacity:1; visibility:visible; pointer-events:auto;
}
.loader-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.loader-inner{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
.loader-inner .eyebrow{ opacity:0; animation:fadeIn 1.1s var(--ease-luxury) .2s forwards; }
.loader-name{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(42px,13vw,80px); letter-spacing:.01em;
  background:linear-gradient(120deg, var(--rose-gold), var(--gold) 50%, var(--pearl) 85%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0; animation:fadeIn 1.3s var(--ease-luxury) .45s forwards;
  margin-bottom:38px;
}
.loader-ring{
  position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center;
  opacity:0; animation:fadeIn 1s var(--ease-luxury) .9s forwards;
}
.loader-ring-svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.loader-ring-track{ fill:none; stroke:rgba(250,246,240,.12); stroke-width:1.5; }
.loader-ring-fill{
  fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:339.3; stroke-dashoffset:339.3; transition:stroke-dashoffset .25s var(--ease-soft);
  filter:drop-shadow(0 0 6px rgba(240,194,123,.7));
}
.loader-pct{ font-family:var(--font-body); font-size:13px; letter-spacing:.05em; color:var(--pearl); }
.loader-hint{
  margin-top:16px; font-family:var(--font-display); font-style:italic; font-size:14px; color:rgba(250,246,240,.5);
  opacity:0; animation:fadeIn 1s ease 1.3s forwards;
}
.loader-enter{
  margin-top:30px; padding:13px 40px; border-radius:999px; border:1px solid var(--glass-border);
  background:var(--glass-bg); color:var(--pearl); font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  backdrop-filter:blur(10px); opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .6s var(--ease-luxury), transform .6s var(--ease-luxury), border-color .3s, background .3s;
}
.loader-enter.is-ready{ opacity:1; pointer-events:auto; transform:translateY(0); }
.loader-enter:hover{ border-color:var(--gold); background:rgba(240,194,123,.1); }

@keyframes fadeIn{ to{ opacity:1; } }

/* -------------------------------------------------------------------------
   Audio toggle
   ------------------------------------------------------------------------- */
.audio-toggle{
  position:fixed; top:max(20px, env(safe-area-inset-top)); right:20px; z-index:60;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--glass-border);
  background:var(--glass-bg); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  opacity:0; transform:translateY(-8px);
  transition:opacity .6s var(--ease-luxury), transform .6s var(--ease-luxury), border-color .3s, background .3s;
}
.audio-toggle.is-visible{ opacity:1; transform:translateY(0); }
.audio-toggle:active{ transform:scale(.92); }
.audio-bars{ display:flex; align-items:flex-end; gap:2.5px; height:13px; }
.audio-bars i{ width:2px; background:var(--gold); display:block; border-radius:2px; height:4px; animation:barIdle 1.6s ease-in-out infinite; }
.audio-bars i:nth-child(2){ animation-delay:.15s; }
.audio-bars i:nth-child(3){ animation-delay:.3s; }
.audio-bars i:nth-child(4){ animation-delay:.45s; }
.audio-toggle.is-playing .audio-bars i{ animation-name:barPlay; }
@keyframes barIdle{ 0%,100%{ height:3px; } 50%{ height:5px; } }
@keyframes barPlay{ 0%,100%{ height:3px; } 50%{ height:13px; } }

/* -------------------------------------------------------------------------
   Progress dots
   ------------------------------------------------------------------------- */
.scene-dots{
  position:fixed; right:max(16px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:10px; opacity:0; transition:opacity .6s ease;
}
.scene-dots.is-visible{ opacity:1; }
.scene-dots .dot{
  width:5px; height:5px; border-radius:50%; background:rgba(250,246,240,.25);
  transition:all .5s var(--ease-luxury);
}
.scene-dots .dot.is-active{ background:var(--gold); box-shadow:0 0 8px rgba(240,194,123,.8); height:16px; border-radius:4px; }

/* -------------------------------------------------------------------------
   Continue prompt
   ------------------------------------------------------------------------- */
.continue-prompt{
  position:fixed; bottom:max(26px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  z-index:60; color:var(--pearl); width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .6s var(--ease-luxury);
}
.continue-prompt.is-visible{ opacity:.65; pointer-events:auto; }
.continue-chevron{ font-size:18px; animation:bob 1.8s ease-in-out infinite; color:var(--gold); }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* -------------------------------------------------------------------------
   SCENE 2 — Night sky
   ------------------------------------------------------------------------- */
.sky-content{ margin-top:8vh; }

/* -------------------------------------------------------------------------
   SCENE 3 — Cinematic lines
   ------------------------------------------------------------------------- */
.text-content{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:50vh; }
.cine-line{
  position:absolute; font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(19px,5.4vw,32px); color:var(--pearl); opacity:0; letter-spacing:.01em; line-height:1.4;
  max-width:600px;
}

/* -------------------------------------------------------------------------
   SCENE 4 — Particle formation (Humaira → heart → happy birthday)
   ------------------------------------------------------------------------- */
.scene-particles{ overflow:hidden; }
.particle-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:3; }
.particle-caption{
  position:absolute; bottom:14%; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-style:italic; font-size:14px; letter-spacing:.05em;
  color:rgba(250,246,240,.55); z-index:4; opacity:0; transition:opacity 1s var(--ease-luxury);
  text-align:center; width:80vw;
}
.particle-caption.is-visible{ opacity:1; }

/* -------------------------------------------------------------------------
   SCENE 5 — Love letter
   ------------------------------------------------------------------------- */
.scene-letter{ background:radial-gradient(ellipse at 50% 38%, rgba(55,33,84,.4), transparent 62%); }
.letter-content{ perspective:1400px; width:100%; display:flex; justify-content:center; }
.letter-paper{
  position:relative; width:min(520px,88vw); min-height:64vh; max-height:82vh; overflow-y:auto;
  padding:56px 30px 40px; -webkit-overflow-scrolling:touch;
  background:linear-gradient(155deg, #faf6f0, #efe4d5);
  border-radius:3px; box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
  transform:rotateX(-90deg); transform-origin:top center;
  color:#2b2340; text-align:left;
}
.letter-seal{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--rose-gold), var(--purple) 78%);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.seal-glyph{ font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--pearl); }
.letter-text{
  font-family:var(--font-script); font-size:clamp(19px,4.6vw,25px); line-height:1.8; color:#2b2340;
  white-space:pre-wrap;
}
.letter-caret{ display:inline-block; width:2px; height:1em; background:#2b2340; vertical-align:middle; animation:caretBlink 1s step-end infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }
.letter-paper::-webkit-scrollbar{ width:4px; }
.letter-paper::-webkit-scrollbar-thumb{ background:rgba(43,35,64,.25); border-radius:4px; }

/* -------------------------------------------------------------------------
   SCENE 6 — Memory cards (swipeable stack)
   ------------------------------------------------------------------------- */
.memories-content{ position:absolute; top:7%; }
.card-stack{
  position:relative; width:min(280px,72vw); height:min(380px,52vh); z-index:4; touch-action:pan-y;
}
.mem-card{
  position:absolute; inset:0; border-radius:18px; will-change:transform, opacity;
  display:flex; align-items:center; justify-content:center;
}
.mem-glass{
  width:100%; height:100%; border-radius:18px; position:relative; overflow:hidden;
  border:1px solid var(--glass-border);
  background:linear-gradient(155deg, rgba(250,246,240,.10), rgba(250,246,240,.02));
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
}
.mem-glyph{ font-size:46px; color:var(--gold); text-shadow:0 0 26px rgba(240,194,123,.6); }
.mem-glass::after{
  content:attr(data-note); position:absolute; left:16px; right:16px; bottom:18px;
  font-family:var(--font-display); font-style:italic; font-size:14px; line-height:1.45; color:rgba(250,246,240,.9);
  text-align:center;
}
.mem-card[data-note] .mem-glass::after{ content:attr(data-note); }
.swipe-hint{
  position:absolute; bottom:9%; left:50%; transform:translateX(-50%);
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:rgba(250,246,240,.55); z-index:4;
}

/* -------------------------------------------------------------------------
   SCENE 7 — Fireworks
   ------------------------------------------------------------------------- */
.fireworks-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.fireworks-content{ position:relative; z-index:4; }
.fireworks-content .scene-title{ text-shadow:0 0 50px rgba(240,194,123,.3); }

/* -------------------------------------------------------------------------
   SCENE 8 — Finale
   ------------------------------------------------------------------------- */
.finale-content{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.finale-title{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(18px,4vw,26px); color:rgba(250,246,240,.8); letter-spacing:.05em; }
.finale-name{
  font-family:var(--font-display); font-weight:500; font-size:clamp(42px,13vw,90px);
  background:linear-gradient(120deg, var(--gold), var(--rose-gold) 60%, var(--pearl));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.heart-glyph{ -webkit-text-fill-color:var(--pink); }
.finale-line{ font-family:var(--font-display); font-style:italic; font-size:clamp(16px,3.4vw,21px); color:var(--pearl); margin-top:4px; }
.replay-btn{
  margin-top:30px; padding:13px 32px; border-radius:999px; border:1px solid var(--glass-border);
  background:var(--glass-bg); color:var(--pearl); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  backdrop-filter:blur(12px); transition:all .4s var(--ease-luxury);
}
.replay-btn:active{ transform:scale(.96); }
@media (hover:hover){
  .replay-btn:hover{ border-color:var(--gold); background:rgba(240,194,123,.1); transform:translateY(-2px); }
}

/* -------------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------------- */
@media (max-width:380px){
  .loader-name{ font-size:38px; }
  .card-stack{ width:70vw; height:48vh; }
}

/* larger screens: let it breathe a little more, but stay mobile-first */
@media (min-width:900px){
  .scene-content{ max-width:720px; }
  .card-stack{ width:300px; height:400px; }
}

.mem-glass img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:18px;
}

.mem-glass{
    overflow:hidden;
    position:relative;
}

/* ===============================
   Mobile Typography
================================= */
@media (max-width:768px){

  .scene-content{
    padding:0 6vw;
  }

  .eyebrow{
    font-size:14px;
    letter-spacing:.22em;
  }

  .scene-title{
    font-size:42px;
    line-height:1.15;
  }

  .scene-title.huge{
    font-size:58px;
    line-height:1.05;
  }

  .cine-line{
    font-size:34px;
    line-height:1.45;
    max-width:90%;
  }

  .letter-text{
    font-size:32px;
    line-height:1.75;
  }

  .particle-caption{
    font-size:18px;
  }

  .finale-title{
    font-size:28px;
  }

  .finale-name{
    font-size:72px;
  }

  .finale-line{
    font-size:24px;
  }

  .swipe-hint{
    font-size:14px;
  }

  .mem-glass::after{
    font-size:20px;
    line-height:1.5;
  }

  .loader-hint{
    font-size:18px;
  }

  .loader-enter{
    font-size:14px;
  }
}