@font-face{font-family:'Bangers';src:url('../fonts/Bangers-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Aref Ruqaa';src:url('../fonts/ArefRuqaa-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Aref Ruqaa';src:url('../fonts/ArefRuqaa-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Noto Naskh Arabic';src:url('../fonts/NotoNaskhArabic-VF.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:'Pacifico';src:url('../fonts/Pacifico-Regular.ttf') format('truetype');font-display:swap}
:root{
  --ink:#1b1430; --pink:#e8436f; --red:#d7263d; --yel:#ffe27a;
  --cream:#fbefe2; --lpink:#f7c9d4; --white:#fff;
  --shadow: 8px 8px 0 var(--ink);
  --display:'Bangers', Impact, sans-serif;
  --script:'Pacifico', cursive;
  --body:'Nunito', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.65;
  background-color:var(--cream);
  background-image:radial-gradient(var(--lpink) 3.2px, transparent 3.6px), radial-gradient(var(--lpink) 3.2px, transparent 3.6px);
  background-size:26px 26px; background-position:0 0, 13px 13px;
  overflow-x:hidden;
}
body.locked{overflow:hidden; height:100vh}
img{display:block; max-width:100%}
.script{font-family:var(--script); font-weight:400}

#hearts{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:5}

/* ---------- reusable caption box ---------- */
.caption{
  display:inline-block; background:var(--cream); color:var(--red);
  border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
  padding:.35em .9em .45em; font-size:clamp(20px, 4.4vw, 30px); line-height:1.3;
}
.caption.tag{font-family:var(--script); transform:rotate(-1.5deg); margin-bottom:28px}
.caption.yellow{background:var(--yel); color:var(--ink)}

/* ---------- gate / cover ---------- */
#gate{
  position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  padding:20px 16px; perspective:1600px;
  background: repeating-conic-gradient(from 0deg at 50% 42%, #e8436f 0deg 10deg, #f06288 10deg 20deg);
  transition: opacity .9s ease .7s, visibility 0s linear 1.6s;
}
#gate::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(150,20,60,.35) 3px, transparent 3.4px); background-size:24px 24px}
#gate.gone{opacity:0; visibility:hidden}
.cover{position:relative; z-index:1; width:min(380px, 82vw); aspect-ratio:9/15.5; max-height:72vh;
  transform-origin:left center; transition:transform 1.2s cubic-bezier(.6,.05,.3,1); animation: bob 4s ease-in-out infinite}
.cover-front{position:absolute; inset:0; background:var(--pink); border:5px solid var(--ink); box-shadow:12px 12px 0 var(--ink); display:flex; flex-direction:column; overflow:hidden}
#gate.open .cover{transform:rotateY(-110deg); animation:none}
.mast{position:relative; background:var(--red); border-bottom:5px solid var(--ink); padding-bottom:6px}
.mast-top{background:var(--ink); color:var(--yel); font-family:var(--display); letter-spacing:2px; text-align:center; font-size:clamp(14px,3.6vw,19px); padding:3px 0}
.mast-title{font-family:var(--display); color:var(--yel); font-size:clamp(64px,19vw,104px); line-height:.95; padding:6px 0 0 14px;
  -webkit-text-stroke:3px var(--ink); text-shadow:5px 5px 0 var(--ink); letter-spacing:2px}
.badge{position:absolute; right:10px; bottom:10px; width:74px; height:74px; border-radius:50%; background:var(--yel); border:4px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(12deg); font-family:var(--display); line-height:1}
.badge b{color:var(--red); font-size:26px; font-weight:400}
.badge span{font-size:12px; letter-spacing:.5px}
.cover-photo{flex:1; margin:12px; border:5px solid var(--ink); overflow:hidden; min-height:0}
.cover-photo img{width:100%; height:100%; object-fit:cover; object-position:45% 40%}
.cover-cap{position:absolute; left:50%; bottom:26px; transform:translateX(-50%) rotate(-2deg); white-space:nowrap; font-size:clamp(15px,4vw,21px)}
.btn-open{
  position:relative; z-index:1; font-family:var(--display); font-size:clamp(22px,5.5vw,30px); letter-spacing:1.5px;
  background:var(--yel); color:var(--ink); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
  padding:12px 26px; cursor:pointer; transition:transform .15s, box-shadow .15s; animation:pulse 2s ease-in-out infinite;
}
.btn-open span{color:var(--red)}
.btn-open:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink)}
.btn-open:active{transform:translate(4px,4px); box-shadow:2px 2px 0 var(--ink)}
.btn-open:focus-visible{outline:4px solid var(--white); outline-offset:4px}
.hint{position:relative; z-index:1; margin:0; color:var(--white); font-weight:800; font-size:14px; letter-spacing:1px; text-transform:uppercase; opacity:.9}
#gate.open .btn-open, #gate.open .hint{opacity:0; transition:opacity .3s}
@keyframes bob{50%{transform:translateY(-8px) rotate(-.6deg)}}
@keyframes pulse{50%{transform:scale(1.04)}}

/* ---------- music toggle ---------- */
.music{position:fixed; right:16px; bottom:16px; z-index:40; width:54px; height:54px; border-radius:50%;
  background:var(--yel); border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); cursor:pointer; display:grid; place-items:center}
.eq{display:flex; gap:3px; align-items:flex-end; height:20px}
.eq i{width:4px; background:var(--red); border-radius:2px; animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
.music.paused .eq i{animation:none; height:5px}
@keyframes eq{0%,100%{height:5px}50%{height:20px}}

/* ---------- hero ---------- */
main{position:relative; z-index:1}
.hero{min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 16px 90px; position:relative}
.kicker{font-family:var(--display); letter-spacing:3px; font-size:20px; background:var(--ink); color:var(--yel); padding:2px 14px; margin:0 0 18px; transform:rotate(-1deg)}
h1,h2{margin:0; font-weight:400; display:flex; flex-direction:column; align-items:center; line-height:.9}
.burst-word{font-family:var(--display); color:var(--yel); font-size:clamp(54px,13vw,120px); -webkit-text-stroke:3px var(--ink); text-shadow:6px 6px 0 var(--ink); transform:rotate(-3deg); letter-spacing:2px}
.name{font-family:var(--display); color:var(--pink); font-size:clamp(84px,24vw,210px); -webkit-text-stroke:4px var(--ink); text-shadow:8px 8px 0 var(--ink); transform:rotate(-2deg); letter-spacing:3px}
.lead{font-size:clamp(20px,4.6vw,30px); color:var(--red); margin:26px 0 0; max-width:640px}
.hero h1 > *{opacity:0; transform:scale(.4) rotate(-8deg)}
.ready .hero h1 > *{animation:slam .6s cubic-bezier(.2,1.6,.4,1) forwards}
.ready .hero h1 .name{animation-delay:.25s}
@keyframes slam{to{opacity:1; transform:scale(1) rotate(-2deg)}}
.scroll-cue{position:absolute; bottom:24px; color:var(--ink); text-decoration:none; display:flex; flex-direction:column; align-items:center; font-weight:800; font-size:13px; letter-spacing:2px; text-transform:uppercase; animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(6px)}}

/* ---------- blocks ---------- */
.block{max-width:980px; margin:0 auto; padding:70px 16px; text-align:center}
.film-frame{max-width:380px; margin:0 auto; border:5px solid var(--ink); box-shadow:12px 12px 0 var(--ink); background:var(--ink)}
.film-frame video{display:block; width:100%; aspect-ratio:9/16; background:var(--ink)}

/* ---------- chapters / comic pages ---------- */
#chapters{max-width:980px; margin:0 auto; padding:0 16px}
.chapter{padding:60px 0 30px}
.chapter-head{text-align:center}
.page{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(110px, 18vw, 170px); gap:14px; padding:18px;
  background:var(--white); border:5px solid var(--ink); box-shadow:12px 12px 0 var(--ink)}
.panel{position:relative; border:4px solid var(--ink); overflow:hidden; cursor:zoom-in; background:var(--lpink); padding:0}
.panel img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.panel:hover img{transform:scale(1.05)}
.panel:focus-visible{outline:4px solid var(--pink); outline-offset:3px}
.w2{grid-column:span 2}.w3{grid-column:span 3}.w4{grid-column:span 4}.w6{grid-column:span 6}
.h2{grid-row:span 2}.h3{grid-row:span 3}
.page-cap{margin-top:26px; text-align:center}
.page-cap .caption{font-family:var(--script); transform:rotate(1deg)}
.chapter:nth-child(even) .page-cap .caption{transform:rotate(-1.2deg)}

/* reveal */
.reveal, .panel{opacity:0; transform:translateY(40px) scale(.94); transition:opacity .7s ease, transform .7s cubic-bezier(.2,1.3,.4,1)}
.reveal.in, .panel.in{opacity:1; transform:none}
.caption.tag.reveal.in{transform:rotate(-1.5deg)}

/* ---------- letter ---------- */
.paper{position:relative; max-width:680px; margin:0 auto; text-align:left; background:var(--white); border:5px solid var(--ink); box-shadow:12px 12px 0 var(--ink);
  padding:clamp(26px,6vw,56px); font-size:clamp(17px,2.4vw,20px);
  background-image:repeating-linear-gradient(transparent 0 37px, #f3dfe5 37px 39px); background-position:0 30px}
.paper p{margin:0 0 1em}
.greet{font-size:clamp(26px,6vw,36px); color:var(--red); margin-bottom:.5em!important}
.sign{font-size:clamp(22px,5vw,30px); color:var(--red); text-align:right; line-height:1.4; margin-top:1.4em!important}
.paper-heart{position:absolute; width:56px; left:-24px; top:-26px; fill:var(--pink); stroke:var(--ink); stroke-width:2; transform:rotate(-14deg)}

/* ---------- cake ---------- */
.wish-hint{font-weight:800; margin:0 0 10px}
.cake{background:none; border:0; padding:0; cursor:pointer; width:min(320px,80vw); display:block; margin:0 auto}
.cake:focus-visible{outline:4px dashed var(--pink); outline-offset:8px; border-radius:20px}
.flame{fill:#ffb02e; stroke:var(--ink); stroke-width:3; transform-box:fill-box; transform-origin:50% 100%; animation:flick .35s ease-in-out infinite alternate}
.candle:nth-child(2) .flame{animation-delay:.12s}.candle:nth-child(3) .flame{animation-delay:.24s}
@keyframes flick{to{transform:scaleY(1.15) scaleX(.9) rotate(3deg)}}
.cake.out .flame{animation:blow .5s ease forwards}
@keyframes blow{to{transform:scale(0) translateY(-10px); opacity:0}}
.final{margin-top:30px}
.final:not([hidden]){animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
.final p{font-size:clamp(28px,6vw,42px); color:var(--red); margin:24px 0 18px}
.forever{transform:rotate(-1.5deg)}
@keyframes pop{from{opacity:0; transform:scale(.5)}}

.foot{text-align:center; padding:40px 16px 90px; font-weight:800; color:var(--pink)}

/* ---------- lightbox ---------- */
#lightbox{position:fixed; inset:0; z-index:60; background:rgba(27,20,48,.92); display:flex; align-items:center; justify-content:center; padding:16px}
#lightbox[hidden]{display:none}
#lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center; max-width:min(92vw,720px)}
#lightbox img{max-height:78vh; width:auto; border:5px solid var(--white); box-shadow:10px 10px 0 var(--pink)}
#lightbox figcaption{color:var(--white); font-size:clamp(18px,4vw,26px); margin-top:18px; text-align:center}
.lb-close,.lb-nav{position:absolute; background:var(--yel); color:var(--ink); border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-size:30px; line-height:1; width:50px; height:50px; cursor:pointer; font-family:var(--body); font-weight:800}
.lb-close{top:16px; right:16px; border-radius:50%}
.lb-nav{top:50%; transform:translateY(-50%); border-radius:50%}
.lb-nav.prev{left:16px}.lb-nav.next{right:16px}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .page{grid-template-columns:repeat(2,1fr); grid-auto-rows:58vw; grid-auto-flow:dense; gap:10px; padding:12px}
  .panel{grid-column:span 1!important; grid-row:span 1!important}
  .panel.m-wide{grid-column:span 2!important}
  .caption{max-width:100%}
  .lb-nav{top:auto; bottom:20px; transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .reveal,.panel,.hero h1 > *{opacity:1!important; transform:none!important}
}

/* ---------- Arabic letter ---------- */
.paper[dir="rtl"]{text-align:right; font-family:'Noto Naskh Arabic', 'Geeza Pro', serif; font-size:clamp(19px,2.7vw,22px); line-height:2;
  background-image:repeating-linear-gradient(transparent 0 calc(2em - 2px), #f3dfe5 calc(2em - 2px) 2em); background-position:0 clamp(26px,6vw,56px)}
.paper[dir="rtl"] .paper-heart{left:auto; right:-24px; transform:rotate(14deg)}
.ruqaa{font-family:'Aref Ruqaa', 'Noto Naskh Arabic', serif; font-weight:700; color:var(--red)}
.paper[dir="rtl"] .greet{font-size:clamp(30px,7vw,42px); line-height:1.6}
.paper[dir="rtl"] .sign{font-size:clamp(26px,6vw,36px); text-align:left; line-height:1.7}

/* ---------- voice note ---------- */
.voice{display:flex; align-items:center; gap:14px; max-width:520px; margin:0 auto 34px; padding:14px 18px;
  background:var(--pink); border:4px solid var(--ink); box-shadow:8px 8px 0 var(--ink); border-radius:999px; color:var(--white)}
.voice-play{flex:none; width:58px; height:58px; border-radius:50%; background:var(--yel); border:4px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  display:grid; place-items:center; cursor:pointer; padding:0; transition:transform .15s}
.voice-play:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.voice-play:focus-visible,.wave:focus-visible{outline:3px solid var(--white); outline-offset:3px}
.voice-play svg{width:26px; height:26px; fill:var(--ink)}
.voice-play .i-pause{display:none}
.voice.playing .i-play{display:none}.voice.playing .i-pause{display:block}
.voice.playing .voice-play{animation:beat 1.1s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.1)}30%{transform:scale(1)}45%{transform:scale(1.06)}}
.voice-body{flex:1; min-width:0}
.voice-label{color:var(--white)!important; font-size:clamp(20px,5vw,26px); line-height:1.3; text-align:right; text-shadow:2px 2px 0 var(--ink)}
.wave{display:flex; align-items:center; gap:2px; height:38px; cursor:pointer; direction:ltr; transform:scaleX(-1)}
.wave i{flex:1; min-width:2px; border-radius:2px; background:rgba(255,255,255,.45); transition:background .2s}
.wave i.on{background:var(--yel)}
.voice-time{flex:none; font-weight:800; font-variant-numeric:tabular-nums; font-size:15px; min-width:38px; text-align:center}
.paper.reading{box-shadow:12px 12px 0 var(--ink), 0 0 0 6px var(--yel)}
@media (max-width:420px){ .voice{padding:10px 12px; gap:10px} .voice-play{width:50px; height:50px} }