/* ============================================================
   For Sumaiya — style.css
   Palette: warm ivory, soft blush, muted rose, deep burgundy,
   champagne accents. Typography: Cormorant Garamond + Jost.
   ============================================================ */
:root{
    color-scheme: light dark;
    --ivory:#fff9f4;
    --ivory-2:#fdeef0;
    --surface:#fffdfb;
    --blush:#f9dde1;
    --rose:#c04b68;
    --rose-soft:#d67f93;
    --burgundy:#6d2140;
    --burgundy-deep:#4d1229;
    --champagne:#d9a05b;
    --champagne-soft:#f0d9ae;
    --ink:#4a2c33;
    --ink-soft:#8a626c;
    --line:rgba(192,75,104,.26);
    --card-shadow:0 18px 45px rgba(109,33,64,.13);
    --glow:rgba(240,217,174,.55);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --ivory:#26121b;
      --ivory-2:#301722;
      --surface:#371c29;
      --blush:#472533;
      --rose:#e29cae;
      --rose-soft:#d67f93;
      --burgundy:#f3cfd8;
      --burgundy-deep:#fbe9ec;
      --champagne:#dcb276;
      --champagne-soft:#f0d9ae;
      --ink:#f8e9e4;
      --ink-soft:#d3aeb4;
      --line:rgba(226,156,174,.3);
      --card-shadow:0 18px 45px rgba(0,0,0,.45);
      --glow:rgba(240,217,174,.32);
    }
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:"Jost", system-ui, sans-serif;
    font-weight:300;
    font-size:1.06rem;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body.locked{ overflow:hidden; }
  ::selection{ background:var(--blush); color:var(--burgundy-deep); }
  :focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:4px; }

  h1,h2,h3,.serif{ font-family:"Cormorant Garamond", Georgia, serif; }
  .wrap{ width:min(1060px, 100% - 2.5rem); margin-inline:auto; }
  section{ padding:clamp(4.5rem,12vh,7.5rem) 0; position:relative; }

  /* ---------- soft ambient background ---------- */
  .ambient{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
  .ambient::before,.ambient::after{
    content:""; position:absolute; border-radius:50%; filter:blur(70px);
  }
  .ambient::before{
    width:62vmax; height:62vmax; left:-22vmax; top:-18vmax;
    background:radial-gradient(circle, var(--blush) 0%, transparent 65%);
    opacity:.75; animation:drift1 26s ease-in-out infinite alternate;
  }
  .ambient::after{
    width:55vmax; height:55vmax; right:-20vmax; bottom:-16vmax;
    background:radial-gradient(circle, var(--champagne-soft) 0%, transparent 65%);
    opacity:.5; animation:drift2 32s ease-in-out infinite alternate;
  }
  @keyframes drift1{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(6vmax,4vmax) scale(1.08);} }
  @keyframes drift2{ from{ transform:translate(0,0) scale(1.05);} to{ transform:translate(-5vmax,-4vmax) scale(1);} }
  .grain{
    position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
    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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme: dark){ .grain{ mix-blend-mode:screen; opacity:.04; } }

  /* ---------- reveal on scroll (armed only once she enters) ---------- */
  body.armed .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s cubic-bezier(.22,.8,.3,1); }
  body.armed .reveal.in{ opacity:1; transform:none; }

  /* ---------- opening veil ---------- */
  #veil{
    position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(ellipse 80% 55% at 50% 0%, var(--blush) 0%, transparent 60%),
      radial-gradient(ellipse 70% 50% at 50% 110%, var(--champagne-soft) 0%, transparent 55%),
      var(--ivory);
    transition:opacity 1.4s ease, visibility 1.4s;
    text-align:center; padding:1.5rem;
  }
  #veil.gone{ opacity:0; visibility:hidden; pointer-events:none; }
  .veil-inner{ max-width:560px; animation:veilIn 1.6s cubic-bezier(.22,.8,.3,1) both .15s; }
  @keyframes veilIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
  .veil-rule{ width:56px; height:1px; background:var(--champagne); margin:0 auto 1.6rem; position:relative; }
  .veil-rule::after{ content:"❦"; position:absolute; left:50%; top:50%; transform:translate(-50%,-54%); color:var(--rose); font-size:.95rem; background:transparent; padding:0 .4rem; }
  #veil h1 [data-her-name]{ font-family:"Great Vibes", cursive; font-weight:400; color:var(--rose); font-size:1.3em; letter-spacing:0; padding-right:.1em; }
  #veil h1{ font-size:clamp(2.6rem,9vw,4.2rem); } font-weight:500; color:var(--burgundy); margin:0 0 .4rem; line-height:1.12; }
  #veil .veil-sub{ font-size:clamp(1.15rem,4.6vw,1.45rem); font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--ink-soft); margin:.2rem 0; }
  #veil .veil-sub strong{ display:block; font-style:normal; font-weight:500; color:var(--rose); font-size:1.15em; margin-top:.35rem; }
  .btn-enter{
    margin-top:2.4rem; appearance:none; cursor:pointer;
    font-family:"Jost",sans-serif; font-size:1.02rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
    color:var(--surface); background:linear-gradient(135deg, var(--rose) 0%, var(--burgundy) 130%);
    border:1px solid rgba(194,161,100,.55); border-radius:999px; padding:1rem 2.6rem;
    box-shadow:0 14px 34px rgba(92,31,40,.28), inset 0 1px 0 rgba(255,255,255,.25);
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .btn-enter:hover{ transform:translateY(-2px); box-shadow:0 20px 42px rgba(92,31,40,.34), inset 0 1px 0 rgba(255,255,255,.25); }
  .btn-enter:active{ transform:translateY(0); }
  .veil-note{ margin-top:1.1rem; font-size:.82rem; letter-spacing:.08em; color:var(--ink-soft); }

  /* ---------- section headings ---------- */
  .kicker{ text-align:center; font-size:.78rem; letter-spacing:.34em; text-transform:uppercase; color:var(--rose); margin:0 0 .9rem; font-weight:400; }
  .sec-title{ text-align:center; font-size:clamp(2rem,6vw,3rem); font-weight:500; color:var(--burgundy); margin:0 0 1rem; line-height:1.15; }
  .sec-lede{ text-align:center; max-width:560px; margin:0 auto; color:var(--ink-soft); font-size:1.05rem; }
  .divider{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin:2rem auto 0; color:var(--rose); }
  .divider::before,.divider::after{ content:""; height:1px; width:64px; background:linear-gradient(90deg, transparent, var(--champagne)); }
  .divider::after{ background:linear-gradient(90deg, var(--champagne), transparent); }

  /* ---------- why ---------- */
  #why{ background:linear-gradient(180deg, transparent, var(--ivory-2) 18%, var(--ivory-2) 82%, transparent); }
  .story{ max-width:640px; margin:0 auto; text-align:center; }
  .story p{
    font-family:"Cormorant Garamond",serif; font-size:clamp(1.35rem,4.6vw,1.7rem); line-height:1.55;
    color:var(--ink); margin:0 0 1.5rem; font-weight:500;
  }
  .story p.emph{ color:var(--burgundy); font-size:clamp(1.5rem,5.2vw,1.95rem); }

  /* ---------- photo gallery ---------- */
  .gallery{ display:grid; gap:1.1rem; margin-top:3rem; grid-template-columns:repeat(2,1fr); }
  .gallery.count-1{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .gallery.count-3{ grid-template-columns:repeat(2,1fr); }
  .gallery.count-3 .ph:first-child{ grid-column:1 / -1; }
  @media (min-width:760px){
    .gallery{ grid-template-columns:repeat(3,1fr); }
    .gallery.count-2{ grid-template-columns:repeat(2,1fr); max-width:820px; margin-inline:auto; }
    .gallery.count-3{ grid-template-columns:repeat(3,1fr); }
    .gallery.count-3 .ph:first-child{ grid-column:auto; }
    .gallery.count-4{ grid-template-columns:repeat(2,1fr); max-width:860px; margin-inline:auto; }
  }
  .ph{
    appearance:none; cursor:pointer; background:#fffdf9;
    padding:8px 8px 30px;
    border-radius:10px; overflow:hidden; position:relative; display:block; width:100%;
    box-shadow:var(--card-shadow); border:1px solid var(--line);
    transition:transform .5s cubic-bezier(.22,.8,.3,1), box-shadow .5s ease;
  }
  .ph img{ display:block; width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; border-radius:5px; transition:transform .8s cubic-bezier(.22,.8,.3,1); }
  .gallery .ph:nth-child(odd){ transform:rotate(-1.1deg); }
  .gallery .ph:nth-child(even){ transform:rotate(1.1deg); }
  .gallery .ph:hover,.gallery .ph:focus-visible{ transform:rotate(0deg) translateY(-5px); }
  .gallery.count-1 .ph img{ aspect-ratio:4/3; }
  .ph:hover,.ph:focus-visible{ transform:translateY(-5px); }
  .ph:hover img{ transform:scale(1.045); }
  .ph figcaption{
    position:absolute; left:0; right:0; bottom:0; padding:2rem 1.1rem 2.2rem; text-align:left;
    font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.02rem; color:#fff8ef;
    background:linear-gradient(180deg, transparent, rgba(40,10,16,.55)); 
  }
  .gallery-note{
    text-align:center; font-family:"Cormorant Garamond",serif; font-style:italic;
    font-size:clamp(1.3rem,4.6vw,1.6rem); color:var(--burgundy); margin-top:3rem; line-height:1.5;
  }
  .gallery-note span{ display:block; color:var(--rose); margin-top:.3rem; }
  .empty-note{
    max-width:520px; margin:3rem auto 0; text-align:center; padding:2.2rem 1.6rem;
    border:1px dashed var(--line); border-radius:12px; color:var(--ink-soft);
    font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.25rem; background:var(--surface);
  }

  /* ---------- message cards ---------- */
  #know{ background:linear-gradient(180deg, transparent, var(--blush) 22%, var(--blush) 78%, transparent); }
  @media (prefers-color-scheme: dark){ #know{ background:linear-gradient(180deg, transparent, var(--ivory-2) 22%, var(--ivory-2) 78%, transparent); } }
  .cards{ display:grid; gap:1.1rem; margin-top:3rem; grid-template-columns:1fr; }
  @media (min-width:680px){ .cards{ grid-template-columns:repeat(2,1fr); } .cards .mcard:last-child{ grid-column:1 / -1; max-width:520px; margin-inline:auto; width:100%; } }
  @media (min-width:980px){ .cards{ grid-template-columns:repeat(3,1fr); } .cards .mcard:last-child{ grid-column:auto; max-width:none; } .cards .mcard:nth-child(4){ grid-column:1 / 2; } }
  .mcard{
    appearance:none; text-align:left; cursor:pointer; width:100%;
    background:var(--surface); border:1px solid var(--line); border-radius:22px;
    padding:1.6rem 1.5rem 1.4rem; min-height:158px; position:relative; overflow:hidden;
    box-shadow:var(--card-shadow); font-family:inherit; color:var(--ink);
    transition:transform .45s cubic-bezier(.22,.8,.3,1), border-color .45s ease;
    display:flex; flex-direction:column; justify-content:center; gap:.5rem;
  }
  .mcard::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 85% 0%, var(--glow), transparent 55%);
    opacity:0; transition:opacity .6s ease;
  }
  .mcard:hover{ transform:translateY(-4px); }
  .mcard.open{ border-color:var(--champagne); cursor:default; }
  .mcard.open::before{ opacity:1; }
  .mcard .seal{
    font-family:"Cormorant Garamond",serif; font-size:1.9rem; color:var(--rose); line-height:1;
    transition:opacity .4s ease, transform .4s ease;
  }
  .mcard .hint{ font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); transition:opacity .4s ease; }
  .mcard .msg{
    font-family:"Cormorant Garamond",serif; font-size:1.32rem; line-height:1.5; font-weight:500; color:var(--burgundy);
    opacity:0; transform:translateY(10px); transition:opacity .7s ease .1s, transform .7s cubic-bezier(.22,.8,.3,1) .1s;
    position:absolute; inset:0; padding:1.6rem 1.5rem; display:flex; align-items:center;
  }
  .mcard.open .seal,.mcard.open .hint{ opacity:0; transform:translateY(-8px); }
  .mcard.open .msg{ opacity:1; transform:none; position:relative; padding:0; }

  /* ---------- finale / reveal ---------- */
  #finale{ text-align:center; overflow:hidden; }
  #finale .fin-line{
    font-family:"Cormorant Garamond",serif; font-size:clamp(1.45rem,5vw,1.9rem); font-weight:500;
    color:var(--ink); margin:0 auto 1.4rem; max-width:600px; line-height:1.55;
  }
  #finale .fin-line.big{ font-size:clamp(1.7rem,6vw,2.3rem); color:var(--burgundy); }
  .hope{ font-family:"Cormorant Garamond",serif; font-style:italic; font-size:clamp(1.5rem,5.4vw,2rem); color:var(--rose); margin:2.2rem 0 0; }
  .reveal-stage{ margin-top:clamp(3.5rem,10vh,5.5rem); position:relative; min-height:170px; display:flex; align-items:center; justify-content:center; }
  .split-word{
    display:flex; justify-content:center; align-items:center; position:relative; z-index:2;
    font-family:"Cormorant Garamond",serif; font-weight:600; letter-spacing:.32em; text-indent:.32em;
    font-size:clamp(1.7rem,7.4vw,3rem); color:var(--ink-soft); user-select:none; white-space:nowrap;
  }
  .split-word .half{ display:inline-block; transition:transform 1.8s cubic-bezier(.7,0,.2,1), opacity 1.8s ease; will-change:transform; }
  .revealed .split-word .half.left{ transform:translateX(-58%); opacity:.28; }
  .revealed .split-word .half.right{ transform:translateX(58%); opacity:.28; }
  .nasir{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.86);
    font-family:"Cormorant Garamond",serif; font-weight:600; letter-spacing:.42em; text-indent:.42em;
    font-size:clamp(2.6rem,11vw,4.6rem); color:var(--burgundy); white-space:nowrap;
    opacity:0; transition:opacity 1.6s ease .55s, transform 1.8s cubic-bezier(.22,.8,.3,1) .55s, text-shadow 1.6s ease .55s;
    text-shadow:0 0 0 transparent; z-index:1;
  }
  .revealed .nasir{
    opacity:1; transform:translate(-50%,-50%) scale(1);
    text-shadow:0 0 34px var(--glow), 0 0 90px var(--glow);
  }
  .from-line{ margin-top:1.2rem; font-size:.85rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); opacity:0; transition:opacity 1.2s ease 1.5s; }
  .revealed + .from-line, .reveal-stage.revealed ~ .from-line{ opacity:1; }
  .btn-replay{
    margin-top:1.6rem; appearance:none; cursor:pointer; background:transparent; color:var(--rose);
    border:1px solid var(--line); border-radius:999px; padding:.55rem 1.4rem;
    font-family:"Jost",sans-serif; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
    opacity:0; transition:opacity 1s ease 1.9s, background .3s ease, color .3s ease;
  }
  .revealed-wrap .btn-replay{ opacity:1; }
  .btn-replay:hover{ background:var(--blush); color:var(--burgundy); }

  /* ---------- miss me ---------- */
  #missme{ text-align:center; background:linear-gradient(180deg, transparent, var(--ivory-2) 20%, var(--ivory-2) 80%, transparent); }
  .miss-stage{ max-width:560px; margin:2.6rem auto 0; }
  .miss-msg{
    min-height:96px; display:flex; align-items:center; justify-content:center;
    font-family:"Cormorant Garamond",serif; font-size:clamp(1.45rem,5.4vw,1.85rem); font-weight:500;
    color:var(--burgundy); line-height:1.45; padding:0 .5rem;
    opacity:0; transform:translateY(12px); transition:opacity .55s ease, transform .55s cubic-bezier(.22,.8,.3,1);
  }
  .miss-msg.show{ opacity:1; transform:none; }
  .miss-msg.idle{ opacity:.55; font-style:italic; font-size:clamp(1.2rem,4.6vw,1.45rem); color:var(--ink-soft); }
  .btn-miss{
    margin-top:1.4rem; appearance:none; cursor:pointer;
    font-family:"Jost",sans-serif; font-size:.98rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--surface); background:linear-gradient(135deg, var(--rose) 0%, var(--burgundy) 135%);
    border:1px solid rgba(194,161,100,.55); border-radius:999px; padding:.95rem 2.3rem;
    box-shadow:0 12px 30px rgba(92,31,40,.26);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .btn-miss:hover{ transform:translateY(-2px); box-shadow:0 17px 38px rgba(92,31,40,.32); }
  .btn-miss:active{ transform:scale(.98); }


  footer{ padding:3.2rem 1.5rem 4rem; text-align:center; color:var(--ink-soft); }
  footer .f-heart{ color:var(--rose); font-size:1.1rem; }
  footer p{ margin:.4rem 0 0; font-family:"Great Vibes",cursive; font-size:1.7rem; color:var(--rose); }

  /* ---------- music control ---------- */
  #musicBtn{
    position:fixed; right:1.1rem; bottom:calc(1.1rem + env(safe-area-inset-bottom)); z-index:80;
    width:52px; height:52px; border-radius:50%; cursor:pointer; appearance:none;
    background:var(--surface); border:1px solid var(--champagne); color:var(--burgundy);
    box-shadow:0 12px 28px rgba(92,31,40,.25);
    display:none; align-items:center; justify-content:center;
    transition:transform .3s ease, opacity .5s ease;
  }
  #musicBtn.show{ display:flex; }
  #musicBtn:hover{ transform:scale(1.07); }
  #musicBtn .bars{ display:flex; align-items:flex-end; gap:2.5px; height:16px; }
  #musicBtn .bars i{ display:block; width:3px; background:var(--rose); border-radius:2px; height:5px; }
  #musicBtn.playing .bars i{ animation:eq 1s ease-in-out infinite; }
  #musicBtn.playing .bars i:nth-child(2){ animation-delay:.18s; }
  #musicBtn.playing .bars i:nth-child(3){ animation-delay:.36s; }
  #musicBtn.playing .bars i:nth-child(4){ animation-delay:.1s; }
  @keyframes eq{ 0%,100%{ height:5px; } 50%{ height:16px; } }
  #musicBtn .note{ font-size:1.15rem; line-height:1; display:none; }
  #musicBtn:not(.playing) .bars{ display:none; }
  #musicBtn:not(.playing) .note{ display:block; }

  /* ---------- lightbox ---------- */
  #lightbox{
    position:fixed; inset:0; z-index:120; background:rgba(24,6,10,.94);
    display:none; align-items:center; justify-content:center; flex-direction:column;
  }
  #lightbox.open{ display:flex; }
  #lightbox figure{ margin:0; max-width:min(94vw, 980px); text-align:center; }
  #lightbox img{
    max-width:94vw; max-height:80vh; border-radius:8px; object-fit:contain;
    box-shadow:0 30px 80px rgba(0,0,0,.6); animation:lbIn .45s cubic-bezier(.22,.8,.3,1) both;
  }
  @keyframes lbIn{ from{ opacity:0; transform:scale(.965);} to{ opacity:1; transform:none;} }
  #lightbox figcaption{ color:#f3e3d3; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.15rem; margin-top:1rem; min-height:1.4em; }
  .lb-btn{
    position:absolute; appearance:none; cursor:pointer; background:rgba(255,250,242,.1);
    border:1px solid rgba(255,250,242,.35); color:#fff8ef; border-radius:50%;
    width:46px; height:46px; font-size:1.25rem; display:flex; align-items:center; justify-content:center;
    transition:background .3s ease;
  }
  .lb-btn:hover{ background:rgba(255,250,242,.24); }
  #lbClose{ top:1.1rem; right:1.1rem; }
  #lbPrev{ left:.8rem; top:50%; transform:translateY(-50%); }
  #lbNext{ right:.8rem; top:50%; transform:translateY(-50%); }
  #lbCount{ position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%); color:rgba(255,248,239,.75); font-size:.85rem; letter-spacing:.2em; }
  @media (max-width:560px){ #lbPrev{ left:.4rem; } #lbNext{ right:.4rem; } .lb-btn{ width:42px; height:42px; } }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    body.armed .reveal{ opacity:1; transform:none; }
    .miss-msg{ opacity:1; transform:none; }
  }

  /* replay reset: transitions off while the stage snaps back shut,
     so "Watch it again" always replays the split cleanly from the start */
  .reveal-stage.no-anim .half,
  .reveal-stage.no-anim .nasir{ transition:none !important; }