/* ══════════════════════════════════════════════════════════════
   POUR YASMIN — a sealed letter beneath the moon
   Palette: #C8A2C8 (lilac accent) · pink · purple · soft galaxy
   ══════════════════════════════════════════════════════════════ */

:root{
  --accent:        #C8A2C8;
  --accent-soft:   #e7cbe7;
  --accent-deep:   #9a6b9e;
  --ink:           #4a3752;
  --ink-soft:      #6d5876;
  --paper:         #fdf6ee;
  --paper-edge:    #efe0d0;
  --env-1:         #f3e4ee;
  --env-2:         #e2c8de;
  --env-3:         #cfa9cd;
  --env-4:         #b98cba;
  --night-1:       #150d26;
  --night-2:       #241239;
  --night-3:       #3a1c4e;
  --gold:          #e8c9a0;
  --dur-flap:      1.1s;
  --dur-rise:      1.3s;
  --ease-lux:      cubic-bezier(.22,1,.36,1);
  --ease-soft:     cubic-bezier(.45,.05,.35,1);
}

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

html{ height:100%; }

body{
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color:var(--paper);
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(200,162,200,.20) 0%, transparent 55%),
    radial-gradient(90% 70% at 15% 85%, rgba(214,120,170,.14) 0%, transparent 60%),
    linear-gradient(168deg, var(--night-1) 0%, var(--night-2) 42%, var(--night-3) 78%, #2b1440 100%);
  -webkit-font-smoothing:antialiased;
}

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

/* ─────────────────────────── SKY ─────────────────────────── */

.sky{ position:fixed; inset:0; z-index:0; pointer-events:none; }

#stars-canvas{ position:absolute; inset:0; width:100%; height:100%; }

.nebula{
  position:absolute; border-radius:50%;
  filter:blur(70px); opacity:.5;
  animation:nebula-drift 26s ease-in-out infinite alternate;
}
.nebula-a{
  width:52vmax; height:38vmax; left:-14vmax; top:-10vmax;
  background:radial-gradient(circle, rgba(186,108,180,.34) 0%, transparent 68%);
}
.nebula-b{
  width:46vmax; height:36vmax; right:-12vmax; bottom:-8vmax;
  background:radial-gradient(circle, rgba(233,120,178,.22) 0%, transparent 66%);
  animation-delay:-9s;
}
.nebula-c{
  width:34vmax; height:28vmax; left:28vmax; bottom:-14vmax;
  background:radial-gradient(circle, rgba(122,88,204,.26) 0%, transparent 65%);
  animation-delay:-17s;
}
@keyframes nebula-drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(4vmax,-3vmax,0) scale(1.12); }
}

.moon{
  position:absolute;
  top:-8vmin; right:-6vmin;
  width:min(52vmin, 460px); height:auto;
  opacity:.9;
  filter:drop-shadow(0 0 60px rgba(220,190,235,.45)) drop-shadow(0 0 140px rgba(200,162,200,.30));
  animation:moon-breathe 12s ease-in-out infinite alternate;
}
@keyframes moon-breathe{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-1.2vmin,1vmin,0) scale(1.03); }
}

/* ──────────────────────── GARDEN / DECOR ──────────────────────── */

.garden{ position:fixed; inset:0; z-index:1; pointer-events:none; }

.deco{
  position:absolute;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.45)) drop-shadow(0 0 26px rgba(200,162,200,.28));
}

.deco-lilies-left{
  left:-6vmin; bottom:-7vmin;
  width:clamp(180px, 34vmin, 380px);
  transform:rotate(8deg);
  animation:sway 9s ease-in-out infinite alternate;
}
.deco-roses-right{
  right:-7vmin; bottom:-8vmin;
  width:clamp(190px, 36vmin, 400px);
  transform:rotate(-10deg) scaleX(-1);
  animation:sway 11s ease-in-out infinite alternate-reverse;
}
.deco-roses-left{
  left:-9vmin; top:-9vmin;
  width:clamp(140px, 26vmin, 300px);
  transform:rotate(160deg);
  opacity:.85;
  animation:sway 13s ease-in-out infinite alternate;
}
.deco-lilies-right{
  right:-8vmin; top:16vmin;
  width:clamp(120px, 22vmin, 260px);
  transform:rotate(-140deg) scaleX(-1);
  opacity:.8;
  animation:sway 10s ease-in-out infinite alternate-reverse;
}
@keyframes sway{
  from{ translate:0 0; rotate:0deg; }
  to  { translate:0.6vmin -0.8vmin; rotate:2.2deg; }
}

.butterfly{
  width:clamp(46px, 7vmin, 82px);
  opacity:.95;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.4)) drop-shadow(0 0 18px rgba(120,150,255,.5));
}
.butterfly-1{ left:12vw; top:20vh;  animation:flutter 13s ease-in-out infinite alternate; }
.butterfly-2{ right:16vw; bottom:24vh; width:clamp(36px,5.4vmin,62px); animation:flutter 16s ease-in-out infinite alternate-reverse; }
.butterfly-3{ left:22vw; bottom:12vh; width:clamp(30px,4.6vmin,52px); opacity:.8; animation:flutter 19s ease-in-out infinite alternate; }
@keyframes flutter{
  0%  { transform:translate3d(0,0,0) rotate(-8deg) scale(1); }
  25% { transform:translate3d(3.5vmin,-4vmin,0) rotate(10deg) scale(1.04); }
  50% { transform:translate3d(-2vmin,-7vmin,0) rotate(-6deg) scale(.98); }
  75% { transform:translate3d(4vmin,-3vmin,0) rotate(12deg) scale(1.05); }
  100%{ transform:translate3d(-1.5vmin,1.5vmin,0) rotate(-10deg) scale(1); }
}

/* ─────────────────────────── SCENES ─────────────────────────── */

.scene{
  position:fixed; inset:0; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  transition:opacity .8s var(--ease-soft), visibility .8s;
}
.scene[hidden]{ display:none; }
.scene.is-faded{ opacity:0; visibility:hidden; pointer-events:none; }

/* ─────────────────────── WELCOME MESSAGE ─────────────────────── */

.welcome{ text-align:center; margin-bottom:clamp(18px, 4vh, 44px); animation:rise-in 1.4s var(--ease-lux) both; }

.welcome-line{
  font-family:'Parisienne', 'Cormorant Garamond', cursive;
  font-size:clamp(1.35rem, 3.4vw, 2.3rem);
  line-height:1.45;
  color:var(--accent-soft);
  text-shadow:0 0 24px rgba(200,162,200,.55), 0 2px 14px rgba(0,0,0,.4);
}
.welcome-line-2{ color:#f3ddf3; }

.welcome-ornament{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:14px;
}
.welcome-ornament span{
  display:block; width:clamp(40px,8vw,90px); height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.welcome-ornament i{ font-style:normal; color:var(--accent); font-size:.8rem; text-shadow:0 0 12px var(--accent); }

@keyframes rise-in{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ─────────────────────────── ENVELOPE ───────────────────────────
   One back panel · one letter card inside · ONE flap · one front
   pocket. Viewed slightly from above via rotateX on the stage.    */

.envelope-stage{
  perspective:1400px;
  animation:rise-in 1.4s .15s var(--ease-lux) both;
}

.envelope-float{
  position:relative;
  animation:float 6.5s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-11px); }
}

.envelope{
  position:relative;
  width:clamp(270px, 44vw, 400px);
  aspect-ratio:10 / 6.6;
  transform:rotateX(9deg);
  transform-style:preserve-3d;
}

/* soft ground shadow */
.envelope-shadow{
  position:absolute; left:8%; right:8%; bottom:-26px; height:26px;
  background:radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,.5), transparent 70%);
  filter:blur(6px);
  animation:shadow-pulse 6.5s ease-in-out infinite;
}
@keyframes shadow-pulse{
  0%,100%{ transform:scaleX(1); opacity:.9; }
  50%    { transform:scaleX(.92); opacity:.6; }
}

/* fine paper grain shared by envelope + letter */
.env-back, .env-flap, .env-front, .letter{
  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%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.env-back{
  position:absolute; inset:0; z-index:1;
  border-radius:10px;
  background-color:var(--env-3);
  background-blend-mode:overlay;
  box-shadow:inset 0 0 40px rgba(90,40,90,.35);
}

/* the letter card that peeks out during the opening sequence */
.env-letter-peek{
  position:absolute; left:6%; right:6%; top:7%; bottom:10%;
  z-index:2;
  border-radius:6px 6px 0 0;
  background:
    linear-gradient(180deg, #fffdf8 0%, var(--paper) 55%, var(--paper-edge) 100%);
  box-shadow:0 -6px 22px rgba(0,0,0,.25);
  visibility:hidden;
  transform:translateY(0);
}
.env-letter-peek::before{
  content:""; position:absolute; left:12%; right:12%; top:16%;
  height:3px; border-radius:2px;
  background:var(--accent);
  opacity:.55;
  box-shadow:0 12px 0 rgba(154,107,158,.30), 0 24px 0 rgba(154,107,158,.22), 0 36px 0 rgba(154,107,158,.14);
}
.envelope.is-opening .env-letter-peek,
.envelope.is-closing .env-letter-peek{ visibility:visible; }
.envelope.is-opening .env-letter-peek{
  transition:transform var(--dur-rise) var(--ease-lux) .55s;
  transform:translateY(-62%);
}
.envelope.is-closing .env-letter-peek{
  transition:transform .9s var(--ease-soft);
  transform:translateY(0);
}

/* ── the ONE and ONLY flap ── */
.env-flap{
  position:absolute; left:0; right:0; top:0;
  height:56%;
  z-index:4;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background-color:var(--env-2);
  background-blend-mode:overlay;
  border-radius:10px 10px 0 0;
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform var(--dur-flap) var(--ease-soft), z-index 0s .45s;
  box-shadow:inset 0 -14px 24px rgba(255,255,255,.28), inset 0 10px 18px rgba(120,60,120,.18);
}
.env-flap::after{           /* embossed edge highlight along the fold */
  content:""; position:absolute; inset:0;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(200deg, rgba(255,255,255,.30) 0%, transparent 38%),
             linear-gradient(160deg, rgba(255,255,255,.18) 0%, transparent 34%);
}
.envelope.is-open .env-flap{
  transform:rotateX(176deg);
  z-index:1;                 /* tucks behind once open, so the letter passes in front */
  background-color:var(--env-4);
}

/* ── front pocket: three folds, no second triangle on top ── */
.env-front{
  position:absolute; inset:0; z-index:3;
  border-radius:10px;
  overflow:hidden;
  background-color:transparent;
  pointer-events:none;
}
.env-fold{ position:absolute; inset:0; }
.env-fold-left{
  clip-path:polygon(0 0, 50% 52%, 50% 100%, 0 100%);
  background:linear-gradient(115deg, var(--env-1) 0%, var(--env-2) 58%, var(--env-3) 100%);
  box-shadow:inset -6px 0 14px rgba(120,60,120,.12);
}
.env-fold-right{
  clip-path:polygon(100% 0, 100% 100%, 50% 100%, 50% 52%);
  background:linear-gradient(245deg, var(--env-1) 0%, var(--env-2) 58%, var(--env-3) 100%);
}
.env-fold-bottom{
  clip-path:polygon(0 100%, 50% 44%, 100% 100%);
  background:linear-gradient(180deg, var(--env-2) 0%, var(--env-1) 70%, #f8ecf5 100%);
  filter:drop-shadow(0 -3px 6px rgba(110,50,110,.20));
}

/* wax seal */
.wax-seal{
  position:absolute; left:50%; top:56%; z-index:5;
  width:clamp(46px, 7.4vw, 62px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:47% 53% 51% 49% / 52% 48% 52% 48%;
  background:radial-gradient(circle at 34% 30%, #d9a4d4 0%, #a86ba8 38%, #7e4a84 72%, #5f3468 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.35), inset 0 2px 5px rgba(255,255,255,.35), inset 0 -4px 8px rgba(60,20,70,.5);
  display:grid; place-items:center;
  transition:opacity .5s ease, transform .5s ease;
}
.wax-seal span{
  font-family:'Parisienne', cursive;
  font-size:clamp(1.2rem, 2.4vw, 1.6rem);
  color:#f6e3f5;
  text-shadow:0 1px 2px rgba(60,20,70,.8);
}
.envelope.is-open .wax-seal{ opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(-20deg); pointer-events:none; }

/* subtle glow when password is correct */
.envelope.is-open .env-back{ box-shadow:inset 0 0 40px rgba(90,40,90,.35), 0 0 70px rgba(200,162,200,.35); }

/* ─────────────────────── PASSWORD AREA ─────────────────────── */

.password-area{
  margin-top:clamp(30px, 5.5vh, 56px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  animation:rise-in 1.4s .3s var(--ease-lux) both;
  transition:opacity .6s ease, transform .6s ease;
}
.password-area.is-hidden{ opacity:0; transform:translateY(14px); pointer-events:none; }

.password-label{
  font-size:clamp(.82rem, 1.6vw, .95rem);
  letter-spacing:.32em; text-transform:uppercase;
  color:rgba(231,203,231,.75);
}

.password-row{
  display:flex; align-items:center;
  border:1px solid rgba(200,162,200,.45);
  border-radius:999px;
  background:rgba(28,15,44,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  padding:6px 6px 6px 22px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.password-row:focus-within{
  border-color:var(--accent);
  box-shadow:0 8px 30px rgba(0,0,0,.35), 0 0 24px rgba(200,162,200,.35);
}

.password-input{
  width:clamp(150px, 30vw, 210px);
  background:transparent; border:none; outline:none;
  color:#f5e8f5;
  font-family:'Cormorant Garamond', serif;
  font-size:1.25rem; letter-spacing:.35em;
}
.password-input::placeholder{ color:rgba(200,162,200,.5); letter-spacing:.3em; }

.password-btn{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  border:none; cursor:pointer;
  color:#2a1638;
  background:linear-gradient(140deg, var(--accent-soft), var(--accent) 55%, var(--accent-deep));
  box-shadow:0 4px 14px rgba(200,162,200,.4);
  transition:transform .25s var(--ease-lux), box-shadow .25s ease;
}
.password-btn:hover, .password-btn:focus-visible{ transform:scale(1.07); box-shadow:0 6px 22px rgba(200,162,200,.6); }
.password-btn:active{ transform:scale(.96); }

.password-hint{
  min-height:1.3em;
  font-style:italic;
  font-size:.95rem;
  color:#f0b7c9;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
  opacity:0; transition:opacity .4s ease;
}
.password-hint.is-visible{ opacity:1; }

/* graceful shake on wrong password */
.password-row.shake{ animation:shake .55s var(--ease-soft); border-color:rgba(240,150,175,.8); }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  18%{ transform:translateX(-9px); }
  36%{ transform:translateX(8px); }
  54%{ transform:translateX(-6px); }
  72%{ transform:translateX(4px); }
  88%{ transform:translateX(-2px); }
}

/* ─────────────────────── LETTER SCENE ─────────────────────── */

.scene-letter{ z-index:3; }
.scene-letter.is-faded{ transition:opacity .6s var(--ease-soft), visibility .6s; }

.letter-wrap{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px, 2.4vh, 22px);
  width:100%;
  max-width:min(760px, 92vw);
}

.letter{
  width:100%;
  max-height:min(80vh, 80svh);
  display:flex;
  position:relative;
  border-radius:18px;
  background-color:var(--paper);
  background-blend-mode:multiply;
  color:var(--ink);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 60px rgba(200,162,200,.25),
    inset 0 0 60px rgba(210,180,150,.12);
  outline:none;
}
.scene-letter.is-entering .letter{ animation:letter-bloom 1.25s var(--ease-lux) both; }
.scene-letter.is-leaving  .letter{ animation:letter-fold .7s var(--ease-soft) both; }

@keyframes letter-bloom{
  0%  { opacity:0; transform:translateY(16vh) scale(.32); }
  55% { opacity:1; transform:translateY(-1.2vh) scale(1.02); }
  78% { transform:translateY(.5vh) scale(.995); }
  100%{ transform:translateY(0) scale(1); }
}
@keyframes letter-fold{
  from{ opacity:1; transform:translateY(0) scale(1); }
  to  { opacity:0; transform:translateY(14vh) scale(.34); }
}

.letter-inner-border{
  position:absolute; inset:clamp(9px, 1.6vw, 14px);
  border:1px solid rgba(154,107,158,.45);
  border-radius:12px;
  pointer-events:none;
}
.letter-inner-border::before{
  content:""; position:absolute; inset:4px;
  border:1px solid rgba(200,162,200,.28);
  border-radius:9px;
}

.letter-scroll{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(28px, 5vw, 52px) clamp(24px, 5.5vw, 58px);
  border-radius:18px;
  scrollbar-width:thin;
  scrollbar-color:rgba(154,107,158,.5) transparent;
}
.letter-scroll::-webkit-scrollbar{ width:6px; }
.letter-scroll::-webkit-scrollbar-thumb{ background:rgba(154,107,158,.4); border-radius:3px; }

.letter-head, .letter-foot{ text-align:center; }
.letter-ornament-top, .letter-ornament-bottom{
  color:var(--accent-deep); font-size:1.5rem; opacity:.8;
}
.letter-ornament-top{ margin-bottom:clamp(16px, 3vh, 26px); }
.letter-ornament-bottom{ margin-top:clamp(16px, 3vh, 26px); }

.letter-fr p{
  font-size:clamp(1.05rem, 2.1vw, 1.22rem);
  line-height:1.75;
  margin-bottom:1.1em;
  text-align:justify;
  text-justify:inter-word;
}
.letter-fr p:first-of-type::first-letter{
  font-family:'Parisienne', cursive;
  font-size:2.4em; line-height:.85;
  color:var(--accent-deep);
  float:left; padding-right:.12em;
}

.letter-emphasis{
  font-style:italic;
  text-align:center !important;
  color:var(--accent-deep);
  font-size:clamp(1.15rem, 2.3vw, 1.35rem) !important;
}
.letter-fr .letter-signature{
  font-family:'Parisienne', cursive;
  font-size:clamp(1.3rem, 2.8vw, 1.7rem);
  text-align:center;
  color:#7c4f83;
  margin-bottom:0;
  line-height:1.5;
}

.letter-divider{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:clamp(24px, 4vh, 40px) 0;
}
.letter-divider span{
  display:block; width:clamp(50px, 16%, 120px); height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-deep), transparent);
}
.letter-divider i{ font-style:normal; color:var(--accent-deep); opacity:.85; }

.letter-fa p{
  font-family:'Gulzar', 'Vazirmatn', 'Cormorant Garamond', serif;
  font-size:clamp(1.12rem, 2.2vw, 1.3rem);
  line-height:2.35;
  margin-bottom:1.2em;
  text-align:justify;
}
.letter-fa .letter-emphasis{
  font-style:normal;
  font-size:clamp(1.2rem, 2.4vw, 1.42rem) !important;
}
.letter-fa .letter-signature{
  text-align:center;
  color:#7c4f83;
  font-size:clamp(1.2rem, 2.4vw, 1.45rem);
  margin-bottom:0;
}

/* ───────────────────── CLOSE LETTER BUTTON ───────────────────── */

.close-letter-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 30px;
  border-radius:999px;
  border:1px solid rgba(200,162,200,.55);
  background:rgba(30,16,48,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--accent-soft);
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem; letter-spacing:.22em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  transition:transform .3s var(--ease-lux), box-shadow .3s ease, background .3s ease, opacity .5s ease .4s;
  opacity:0;
}
.scene-letter.is-entering .close-letter-btn,
.scene-letter.is-open     .close-letter-btn{ opacity:1; }
.close-letter-btn:hover, .close-letter-btn:focus-visible{
  transform:translateY(-2px);
  background:rgba(200,162,200,.18);
  box-shadow:0 10px 32px rgba(200,162,200,.35);
}
.close-letter-btn:active{ transform:translateY(0) scale(.97); }
.close-btn-icon{ font-size:1.1rem; }

/* ─────────────────────── RESPONSIVE ─────────────────────── */

@media (max-width: 640px){
  .envelope{ width:min(84vw, 340px); }
  .moon{ width:56vmin; top:-6vmin; right:-10vmin; opacity:.8; }
  .deco-roses-left{ opacity:.55; }
  .deco-lilies-right{ opacity:.5; }
  .butterfly-3{ display:none; }
  .letter-wrap{ max-width:94vw; }
  .letter-fr p, .letter-fa p{ text-align:start; }
}

@media (max-height: 620px){
  .welcome{ margin-bottom:12px; }
  .welcome-line{ font-size:1.15rem; }
  .envelope{ width:min(38vh, 300px); }
  .password-area{ margin-top:18px; }
}

/* ─────────────────────── ACCESSIBILITY ─────────────────────── */

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