@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-1:#050405;
  --bg-2:#1b0c12;
  --bg-3:#2f1120;
  --pink:#ff86aa;
  --pink-soft:#ffd5e0;
  --text:#fff4f7;
}

* { box-sizing: border-box; }
html, body { height:100%; }
html { background:var(--bg-1); }
body {
  margin:0;
  min-height:100%;
  background:radial-gradient(circle at 50% 0%, #3a1824 0, #0b070a 46%, #030203 100%);
  color:#fff;
  overflow-x:hidden;
  font-family:'Vazirmatn', Tahoma, Arial, sans-serif;
}
*, *::before, *::after, button, input, textarea, select { font-family:'Vazirmatn', Tahoma, Arial, sans-serif; }
img { max-width:100%; display:block; }

.phone-shell {
  position:relative;
  width:100%; max-width:480px; min-height:100vh; margin:0 auto;
  background:#070506; overflow:hidden;
  box-shadow:0 0 80px rgba(255,95,140,.16);
}

.splash { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 50% 18%,rgba(255,117,155,.26),transparent 34%),linear-gradient(180deg,#12080d,#050405); transition:opacity .8s ease, visibility .8s ease; }
.splash.hide { opacity:0; visibility:hidden; pointer-events:none; }
.splash-glow { position:absolute; width:330px; height:330px; border-radius:50%; background:rgba(255,97,144,.16); filter:blur(30px); top:12%; left:50%; transform:translateX(-50%); animation:softBreath 4s ease-in-out infinite; }
.splash-card { position:relative; width:min(100%,360px); padding:30px 24px; border:1px solid rgba(255,210,220,.18); border-radius:34px; background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.035)); backdrop-filter:blur(18px); box-shadow:0 30px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14); text-align:center; }
.tiny-label { display:inline-flex; padding:8px 14px; border-radius:999px; background:rgba(255,185,205,.12); color:#ffd4df; font-size:12px; }
.splash h1 { margin:22px 0 12px; font-size:30px; line-height:1.55; font-weight:800; color:#fff1f5; }
.splash p { margin:0 auto 24px; max-width:280px; color:#ffd9e2; line-height:2; font-size:15px; }
.start-btn { border:0; outline:0; width:100%; display:flex; align-items:center; justify-content:center; gap:12px; padding:16px 20px; border-radius:22px; color:#2a0712; background:linear-gradient(135deg,#ffd1dd,#ff85aa 55%,#ff5f91); font-size:17px; font-weight:800; box-shadow:0 18px 40px rgba(255,78,133,.28); cursor:pointer; }
.start-btn i { font-style:normal; color:#7b0c2c; animation:beat 1.1s infinite; font-family:'Segoe UI Symbol','Apple Color Emoji','Noto Color Emoji',sans-serif; }
.splash small { display:block; margin-top:16px; color:rgba(255,226,233,.68); font-size:12px; }

.experience { position:relative; min-height:100vh; padding:6px 18px 110px; opacity:0; transform:translateY(16px); transition:opacity .9s ease, transform .9s ease; }
.experience.show { opacity:1; transform:translateY(0); }
.ambient-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; }

.cover-stage { position:relative; margin-top:6px; transition:opacity .9s ease, transform .9s ease, max-height .9s ease, margin .9s ease; }
.revealed .cover-stage { opacity:0; transform:scale(.96); max-height:0; overflow:hidden; margin-top:0; }
.cover-frame { position:relative; border-radius:36px; overflow:hidden; background:#13090d; border:1px solid rgba(255,220,229,.13); box-shadow:0 28px 90px rgba(0,0,0,.42); }
.cover-frame img { width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; }

.photo-stage { display:none; position:relative; margin-top:8px; opacity:0; }
.revealed .photo-stage { display:block; animation:stageIn 1.6s ease both; }
.photo-stage.first-soft-show { animation:firstPhotoEntrance 2.5s ease both; }
.photo-frame { position:relative; aspect-ratio:9/16; border-radius:36px; overflow:hidden; background:#13090d; border:1px solid rgba(255,220,229,.16); box-shadow:0 28px 90px rgba(0,0,0,.48), 0 0 42px rgba(255,78,132,.12); }
.slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity 2.4s ease, transform 7s ease; filter:saturate(1.05) contrast(1.02); }
.slide.active { opacity:1; transform:scale(1); }
.photo-stage.first-soft-show .slide.active { animation:softPhotoFade 2.8s ease both; }
.photo-shine { position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 35%,rgba(0,0,0,.32)); pointer-events:none; }
.floating-sticker, .heart-particle, .random-heart, .pulse-heart { font-family:'Segoe UI Symbol','Apple Color Emoji','Noto Color Emoji',sans-serif; }
.floating-sticker { position:absolute; z-index:2; color:#ffd0df; text-shadow:0 0 16px rgba(255,116,164,.33); }
.fs-one { top:18px; left:18px; font-size:22px; }
.fs-two { top:18px; right:22px; font-size:18px; }
.fs-three { bottom:18px; right:18px; padding:8px 14px; border-radius:999px; background:rgba(0,0,0,.26); border:1px solid rgba(255,222,230,.2); font-size:12px; font-family:'Vazirmatn', Tahoma, Arial, sans-serif; }

.scroll-hint { display:none; width:100%; margin:12px auto 2px; align-items:center; justify-content:center; flex-direction:column; gap:1px; color:#ffb5c9; opacity:0; transform:translateY(-4px); }
.scroll-hint.show { display:flex; animation:hintIn .6s ease forwards, hintPulse 2s ease-in-out infinite .7s; }
.arrow-line { width:1.5px; height:14px; background:linear-gradient(180deg, rgba(255,181,201,.1), rgba(255,181,201,.9)); border-radius:999px; }
.arrow-head { font-size:20px; line-height:1; margin-top:-8px; }

.love-boxes { position:relative; display:none; margin-top:8px; grid-template-columns:1fr; gap:12px; }
.revealed .love-boxes { display:grid; }
.love-section-title { text-align:center; padding:6px 8px 12px; }
.love-section-title span { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:linear-gradient(180deg, rgba(255,186,205,.2), rgba(255,130,169,.08)); border:1px solid rgba(255,211,222,.16); color:#ff9ebb; font-size:20px; margin-bottom:10px; font-family:'Segoe UI Symbol','Apple Color Emoji','Noto Color Emoji',sans-serif; }
.love-section-title h3 { margin:0; color:#ffe4eb; font-size:20px; }
.love-section-title p { margin:8px auto 0; max-width:290px; color:rgba(255,230,236,.72); font-size:13px; line-height:1.9; }
.love-box { position:relative; overflow:hidden; display:flex; gap:14px; align-items:flex-start; padding:18px 18px 16px; border-radius:28px; background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.028)); border:1px solid rgba(255,214,224,.13); box-shadow:0 15px 55px rgba(0,0,0,.26); animation:fadeUp .9s ease both; }
.love-box::after { content:''; position:absolute; inset:auto -18% -55% auto; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(255,130,169,.12), transparent 68%); }
.love-box:nth-of-type(2){animation-delay:.08s}.love-box:nth-of-type(3){animation-delay:.16s}.love-box:nth-of-type(4){animation-delay:.24s}.love-box:nth-of-type(5){animation-delay:.32s}.love-box:nth-of-type(6){animation-delay:.40s}.love-box:nth-of-type(7){animation-delay:.48s}
.love-icon { flex:0 0 48px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:18px; background:linear-gradient(180deg, rgba(255,174,198,.22), rgba(255,121,161,.08)); border:1px solid rgba(255,211,222,.14); color:#ff9ab8; font-size:22px; font-family:'Segoe UI Symbol','Apple Color Emoji','Noto Color Emoji',sans-serif; }
.love-copy small { display:block; color:#ffadc4; font-size:12px; margin-bottom:6px; }
.love-copy h3 { margin:0 0 8px; color:#ffd7e0; font-size:16px; }
.love-copy p { margin:0; color:rgba(255,241,246,.9); font-size:14px; line-height:2.05; }

.music-float { position:fixed; left:max(18px, calc((100vw - 480px)/2 + 18px)); bottom:22px; z-index:12; width:62px; height:62px; border-radius:24px; border:1px solid rgba(255,218,227,.19); background:linear-gradient(145deg, rgba(255,167,194,.22), rgba(14,7,10,.82)); backdrop-filter:blur(16px); box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 25px rgba(255,86,137,.16); color:#ffd6df; display:none; align-items:center; justify-content:center; cursor:pointer; }
.music-float.show { display:flex; }
.disc { width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.disc svg { width:100%; height:100%; display:block; }
.pulse-heart { position:absolute; right:7px; top:5px; color:#ff7ca1; font-size:15px; animation:beat 1s ease infinite; }
.music-float.muted { opacity:.55; }
.heart-particle { position:fixed; z-index:8; pointer-events:none; color:#ff98b5; font-size:18px; text-shadow:0 0 14px rgba(255,112,156,.45); animation:heartFly 5.5s linear forwards; }
.random-heart { position:absolute; color:rgba(255,172,194,.65); font-size:14px; animation:randomFloat var(--t,7s) ease-in-out forwards; filter:drop-shadow(0 0 10px rgba(255,105,150,.25)); }

@keyframes softBreath { 0%,100%{ transform:translateX(-50%) scale(1); opacity:.65; } 50%{ transform:translateX(-50%) scale(1.08); opacity:.9; } }
@keyframes beat { 0%,100%{ transform:scale(1); } 35%{ transform:scale(1.25); } 60%{ transform:scale(.96); } }
@keyframes stageIn { from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes firstPhotoEntrance { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes softPhotoFade { from{ opacity:0; transform:scale(1.03); } to{ opacity:1; transform:scale(1); } }
@keyframes fadeUp { from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes heartFly { 0%{ opacity:0; transform:translate(0,0) scale(.6); } 10%{ opacity:1; } 100%{ opacity:0; transform:translate(var(--x,40px),-240px) scale(1.55); } }
@keyframes randomFloat { 0%{ opacity:0; transform:translate3d(0,20px,0) scale(.6) rotate(0); } 12%{ opacity:.8; } 100%{ opacity:0; transform:translate3d(var(--dx,0),var(--dy,-180px),0) scale(1.25) rotate(18deg); } }
@keyframes hintIn { from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@keyframes hintPulse { 0%,100%{ transform:translateY(0); opacity:.78; } 50%{ transform:translateY(4px); opacity:1; } }

@media (min-width:520px) { .phone-shell { border-left:1px solid rgba(255,255,255,.06); border-right:1px solid rgba(255,255,255,.06); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* Mobile audio/icon safety overrides */
.music-float{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.music-float .disc{position:relative;z-index:2;width:32px;height:32px;color:#ffd6df;}
.music-float .disc svg{width:32px;height:32px;display:block;filter:drop-shadow(0 0 10px rgba(255,134,170,.35));}
.music-float.playing{box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 30px rgba(255,86,137,.35);}
.music-float.playing::after{content:'';position:absolute;inset:-5px;border-radius:28px;border:1px solid rgba(255,151,184,.28);animation:musicRing 1.8s ease-in-out infinite;}
@keyframes musicRing{0%,100%{transform:scale(.96);opacity:.35}50%{transform:scale(1.08);opacity:.8}}