/* ═══════════════════════════════════════════
   for Mariam · 21.08.2026
   ═══════════════════════════════════════════ */

:root{
  --cream:#fff7f3;
  --cream-2:#fdeee8;
  --blush:#f7d9d3;
  --rose:#c9707f;
  --rose-soft:#e9a3a8;
  --gold:#d9a491;
  --ink:#3f2c31;
  --ink-soft:#7a5f65;
  --white:#fffdfc;
  --shadow:0 18px 44px -18px rgba(120,70,80,.34);
  --shadow-lg:0 34px 70px -26px rgba(120,70,80,.45);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Quicksand",ui-rounded,-apple-system,"Segoe UI",system-ui,sans-serif;
  --r:20px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:500;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* ── ambient ───────────────────────────── */
.blobs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.blob{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
  animation:drift 22s ease-in-out infinite alternate;
}
.b1{width:46vw;height:46vw;background:var(--blush);top:-12vw;left:-10vw}
.b2{width:40vw;height:40vw;background:#fbe3c8;top:38%;right:-14vw;animation-delay:-7s}
.b3{width:44vw;height:44vw;background:#f2dcef;bottom:-16vw;left:22%;animation-delay:-13s}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(3vw,-4vh,0) scale(1.14)}
}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* floating hearts */
.hearts{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.heart{
  position:absolute;bottom:-40px;font-size:14px;opacity:0;
  animation:float-up linear forwards;will-change:transform,opacity;
}
@keyframes float-up{
  0%{opacity:0;transform:translateY(0) rotate(0) scale(.6)}
  12%{opacity:.75}
  85%{opacity:.5}
  100%{opacity:0;transform:translateY(-108vh) rotate(var(--spin,40deg)) scale(1.05)}
}

/* ── reveal ────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ── hero ──────────────────────────────── */
.hero{
  position:relative;z-index:1;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:8vh 22px 12vh;
}
.eyebrow{
  margin:0 0 clamp(14px,3vw,26px);font-size:.72rem;font-weight:700;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  transition-delay:.1s;
}
.hero-name{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(4.2rem,17vw,11rem);line-height:.92;margin:0;
  letter-spacing:-.01em;
  color:var(--rose);            /* solid fallback — always visible */
}
.hero-name .ch{display:inline-block;opacity:0;transform:translateY(.42em) rotate(4deg);
  animation:letter-in .95s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes letter-in{to{opacity:1;transform:none}}

/* The gradient lives on each LETTER, not on the h1. A parent's
   background-clip:text is not painted through transformed children on
   mobile browsers, which left the whole name invisible on phones.
   script.js lines up each letter's slice so it reads as one gradient. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-name .ch{
    background-image:linear-gradient(160deg,var(--rose) 0%,#b8687d 42%,var(--gold) 100%);
    background-repeat:no-repeat;background-size:100% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  /* a space has no glyph to clip — keep it out of the paint */
  .hero-name .ch.sp{background-image:none}
}

.hero-sub{
  margin:clamp(16px,3vw,26px) 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,4vw,2rem);color:var(--ink);transition-delay:.9s;
}
.hero-line{
  margin:14px 0 0;max-width:31ch;font-size:.95rem;color:var(--ink-soft);
  transition-delay:1.1s;
}
.scroll-cue{
  position:absolute;bottom:34px;width:26px;height:44px;border:1.5px solid var(--rose-soft);
  border-radius:14px;display:grid;place-items:start center;padding-top:8px;
  transition-delay:1.4s;
}
.scroll-cue span{width:4px;height:8px;border-radius:2px;background:var(--rose);
  animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(15px);opacity:0}}

/* ── note ──────────────────────────────── */
.note-wrap{position:relative;z-index:1;display:grid;place-items:center;padding:6vh 22px 12vh}
.note{
  position:relative;max-width:600px;width:100%;background:var(--white);
  padding:clamp(34px,6vw,62px);border-radius:var(--r);box-shadow:var(--shadow);
  transform:rotate(-.6deg);
}
.note-tape{
  position:absolute;top:-15px;left:50%;translate:-50% 0;width:120px;height:30px;
  background:linear-gradient(180deg,rgba(249,214,205,.9),rgba(247,201,190,.75));
  border-radius:3px;box-shadow:0 3px 10px rgba(150,90,90,.14);
}
.note h2{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.9rem,5vw,2.7rem);margin:0 0 18px;color:var(--rose);
}
.note p{margin:0 0 16px;color:var(--ink-soft);font-size:1.02rem}
.note .sign{
  margin-top:26px;font-family:var(--serif);font-style:italic;
  font-size:1.35rem;color:var(--ink);text-align:right;
}

/* ── chapters ──────────────────────────── */
.chapter{position:relative;z-index:1;padding:5vh clamp(16px,4vw,52px) 8vh;max-width:1280px;margin:0 auto}
.chapter-head{text-align:center;margin:0 auto clamp(34px,6vw,60px);max-width:620px}
.chapter-num{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.4em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.chapter-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,7vw,4rem);
  line-height:1.06;margin:0;color:var(--ink);
}
.chapter-date{
  display:inline-block;margin-top:16px;padding:7px 20px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid var(--blush);
  font-size:.78rem;font-weight:600;letter-spacing:.12em;color:var(--rose);
  text-transform:uppercase;
}
.chapter-note{
  margin:16px 0 0;font-family:var(--serif);font-style:italic;
  font-size:1.2rem;color:var(--ink-soft);
}

/* masonry */
.grid{column-count:3;column-gap:clamp(14px,2.2vw,26px)}
@media(max-width:900px){.grid{column-count:2}}
@media(max-width:560px){.grid{column-count:1;column-gap:0}}

.card{
  position:relative;break-inside:avoid;margin:0 0 clamp(14px,2.2vw,26px);
  background:var(--white);padding:11px 11px 11px;border-radius:16px;
  box-shadow:var(--shadow);cursor:pointer;
  opacity:0;transform:translateY(34px) scale(.97);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.card.in{opacity:1;transform:rotate(var(--tilt,0deg))}
.card:hover,.card:focus-visible{
  transform:rotate(0deg) translateY(-7px) scale(1.018);
  box-shadow:var(--shadow-lg);z-index:3;outline:none;
}
.card-media{
  position:relative;overflow:hidden;border-radius:9px;background:var(--cream-2);
  aspect-ratio:var(--ar,3/4);
}
.card-media img,.card-media video{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .45s ease;
}
.card:hover .card-media img{transform:scale(1.05)}
.card-media video{position:absolute;inset:0;opacity:0}
.card.playing .card-media video{opacity:1}
.card.playing .card-media img{opacity:0}
.card-cap{
  display:block;padding:11px 4px 3px;font-family:var(--serif);font-style:italic;
  font-size:1rem;color:var(--ink-soft);text-align:center;
}
.play-badge{
  position:absolute;left:11px;bottom:11px;display:flex;align-items:center;gap:6px;
  padding:6px 12px 6px 9px;border-radius:999px;color:#fff;font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:rgba(63,44,49,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .35s ease;
}
.card.playing .play-badge{opacity:0}
.play-badge svg{width:11px;height:11px;fill:currentColor}

/* divider */
.divider{
  position:relative;z-index:1;display:grid;place-items:center;padding:2vh 0 4vh;
  color:var(--gold);font-size:1.1rem;
}
.divider span{position:relative;padding:0 26px}
.divider span::before,.divider span::after{
  content:"";position:absolute;top:50%;width:64px;height:1px;
  background:linear-gradient(90deg,transparent,var(--blush));
}
.divider span::before{right:100%}
.divider span::after{left:100%;transform:scaleX(-1)}

/* ── stats ─────────────────────────────── */
.stats{
  position:relative;z-index:1;display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(30px,8vw,86px);padding:6vh 22px 2vh;text-align:center;
}
.stats div{display:flex;flex-direction:column;gap:4px}
.stats strong{
  font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6vw,3.4rem);
  line-height:1;color:var(--rose);
}
.stats span{font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft)}

/* ── finale ────────────────────────────── */
.finale{
  position:relative;z-index:1;text-align:center;padding:8vh 22px 12vh;
  display:flex;flex-direction:column;align-items:center;
}
.cake{position:relative;width:78px;height:62px;margin-bottom:26px}
.cake .layer{
  position:absolute;bottom:0;left:0;right:0;height:36px;border-radius:9px 9px 12px 12px;
  background:linear-gradient(180deg,#fbe0d8,#f4c3bb);box-shadow:var(--shadow);
}
.cake .candle{position:absolute;bottom:34px;left:50%;translate:-50% 0;width:5px;height:20px;border-radius:3px;background:var(--rose-soft)}
.cake .flame{
  position:absolute;bottom:53px;left:50%;translate:-50% 0;width:9px;height:13px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,#ffd88a,#f79b4e 65%,rgba(247,155,78,0));
  animation:flicker 1.5s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{transform:translate(-50%,0) scale(1);opacity:1}
  50%{transform:translate(-50%,-2px) scale(1.13,.94);opacity:.86}
}
.finale-title{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(2.9rem,11vw,6.4rem);line-height:1;margin:0;
  color:var(--rose);            /* solid fallback — always visible */
  transition-delay:.1s;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .finale-title{
    background-image:linear-gradient(150deg,var(--rose),var(--gold));
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}
.finale-sub{
  margin:20px 0 34px;font-size:1.05rem;color:var(--ink-soft);max-width:32ch;
  transition-delay:.2s;
}
.finale-foot{
  margin:56px 0 0;font-family:var(--serif);font-style:italic;
  font-size:.98rem;color:var(--gold);
}

/* ── music button ──────────────────────── */
.music-btn{
  position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:60;
  display:flex;align-items:center;gap:10px;
}
/* NB: no backdrop-filter here — Chrome drops the rounded clip on a
   rotating element and paints an opaque square instead. The spin lives
   on .disc-spin, which has no background of its own. */
.disc{
  position:relative;display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;overflow:hidden;
  color:var(--rose);background:var(--white);
  border:1px solid var(--blush);box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.8,.25,1),box-shadow .3s ease,
             background .35s ease,color .35s ease,border-color .35s ease;
}
.music-btn:hover .disc{transform:scale(1.09);box-shadow:var(--shadow-lg)}
.disc-spin{position:relative;display:grid;place-items:center;width:100%;height:100%}
.disc svg{width:21px;height:21px}
.music-btn.playing .disc{
  color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--gold));
  border-color:transparent;
}
.music-btn.playing .disc-spin{animation:spin 4.5s linear infinite}
/* vinyl groove, only while it's turning */
.music-btn.playing .disc-spin::after{
  content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.45);
}
@keyframes spin{to{transform:rotate(360deg)}}
.music-hint{
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rose);background:rgba(255,253,252,.9);padding:8px 14px;border-radius:999px;
  border:1px solid var(--blush);box-shadow:var(--shadow);white-space:nowrap;
  order:-1;animation:nudge 2.6s ease-in-out infinite;
}
.music-hint.gone{display:none}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}

/* ── lightbox ──────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:clamp(14px,4vw,50px);
  background:rgba(48,32,36,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transition:opacity .4s ease;
}
.lightbox[hidden]{display:none}
.lightbox.open{opacity:1}
.lb-stage{
  margin:0;display:grid;place-items:center;max-width:min(1080px,100%);max-height:82svh;
}
.lb-stage img,.lb-stage video{
  max-width:100%;max-height:82svh;width:auto;height:auto;border-radius:12px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  animation:pop .45s cubic-bezier(.2,.8,.25,1);
}
@keyframes pop{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
.lb-caption{
  position:absolute;bottom:clamp(16px,4vw,34px);left:0;right:0;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:1.05rem;color:rgba(255,255,255,.82);
  pointer-events:none;
}
.lb-close,.lb-nav{
  position:absolute;z-index:2;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.11);border-radius:50%;
  transition:background .28s ease,transform .28s ease;
  -webkit-tap-highlight-color:transparent;
}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.24);transform:scale(1.09)}
.lb-close{top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);width:46px;height:46px;font-size:1.9rem;line-height:1}
.lb-nav{top:50%;translate:0 -50%;width:52px;height:52px;font-size:2.1rem;line-height:1}
.lb-prev{left:clamp(8px,2vw,26px)}
.lb-next{right:clamp(8px,2vw,26px)}
@media(max-width:560px){
  .lb-nav{top:auto;bottom:clamp(56px,14vw,80px);translate:0 0;width:46px;height:46px}
}

/* ── reduced motion ────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.card{opacity:1!important;transform:none!important}
  .hero-name .ch{opacity:1;transform:none}
  .hearts{display:none}
}