/* =================================================================
   عبيد و مرام — Tunisian Wedding Invitation
   "Rose-Gold Twilight" — burgundy · rose-gold · blush, luminous & cinematic
   ================================================================= */

:root{
  /* deep burgundy (the "envelope" / hero / footer / finale card) */
  --wine:        #55172a;
  --wine-2:      #350d19;
  --wine-lit:    #85304b;
  --plum:        #6d1f3a;

  /* airy, bright papers */
  --blush:       #f9ebe8;
  --blush-2:     #fef5f0;
  --cream:       #fdf6ec;
  --paper:       #fffaf2;
  --ink:         #4b2530;
  --ink-soft:    #8b5f66;

  /* rose-gold + gold metals */
  --rose:        #d99e8b;
  --rose-2:      #f4cebd;
  --rose-deep:   #b6735d;
  --gold:        #d8a869;
  --gold-2:      #f3dcac;
  --gold-bright: #fff0d2;
  --gold-deep:   #ad7a3c;

  --line:        rgba(173,122,60,.30);

  --maxw: 620px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  --f-calli: "Amiri", serif;
  --f-naskh: "Amiri", serif;
  --f-kufi:  "Reem Kufi", sans-serif;
  --f-latin: "Cormorant Garamond", serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--f-naskh);
  color:var(--ink);
  background:var(--blush);
  line-height:1.75;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100dvh; }

img,svg,iframe{ max-width:100%; display:block; }

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 6vw, 2.5rem);
  position:relative; z-index:2;
}

/* ---- metallic type ----------------------------------------------- */
@keyframes shimmer{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }

/* on LIGHT backgrounds: rich, dark bronze-wine metallic — high legibility, no busy shimmer */
.gold-foil,
.bismillah--gold,
.std-date,
.sec-head__title,
.names--stage .names__one,
.names--stage .names__two{
  background:linear-gradient(100deg, var(--wine) 0%, var(--rose-deep) 32%, var(--gold-deep) 50%, var(--rose-deep) 68%, var(--wine) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* on DARK (burgundy) backgrounds: bright rose-gold foil */
.footer__names{
  background:linear-gradient(105deg, #fff3ec, #ffdcc6 30%, var(--gold-bright) 48%, #fff 54%, var(--rose-2) 72%, #f6dcc2);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 9s linear infinite;
}
.names__amp{ color:var(--gold); }
.hero .names__amp{ color:var(--gold-2); }
.names--stage .names__amp{ color:var(--rose-deep); }

/* clipped-gradient text needs room below the baseline so descenders
   (e.g. the tail of ر in مرام) aren't cut off */
.bismillah--gold,.std-date,.rings-scene__cap,.footer__names,
.names__one,.names__two{ padding-bottom:.18em; }
.sec-head__title{ padding-bottom:.26em; }
.footer__sym{ font-size:.82em; padding:0 .1em; letter-spacing:.04em; }

/* ---- ornaments --------------------------------------------------- */
.ornament{ display:flex; justify-content:center; color:var(--gold); margin:1.1rem 0; position:relative; z-index:2; }
.ornament svg{ width:min(220px, 60%); height:auto; filter:drop-shadow(0 0 6px rgba(216,168,105,.4)); }
.ornament--sm svg{ width:150px; }
.ico{ width:1.25em; height:1.25em; }

/* ---- realistic diamond rings (SVG) ------------------------------- */
.rings-svg{ display:block; width:100%; height:auto; }
.rings-crest{ width:96px; margin:0 auto .5rem; perspective:520px; }
.rings-crest .rings-svg{
  transform-origin:center; will-change:transform;
  animation:ringRock 5s ease-in-out infinite;
  filter:drop-shadow(0 4px 8px rgba(50,20,10,.4));
}
@keyframes ringRock{
  0%,100%{ transform:rotateX(14deg) rotateY(-30deg); }
  50%    { transform:rotateX(14deg) rotateY(30deg); }
}

/* ---- 3D interlocking gold rings ---------------------------------- */
.rings3d{ position:relative; width:98px; height:70px; margin:0 auto; perspective:680px; transform-style:preserve-3d; }
.rings3d--cover{ width:66px; height:46px; margin:0 auto .55rem; perspective:480px; }
.rings3d--cover .ring3d{ width:34px; height:34px; }
.ring3d{
  position:absolute; top:50%; left:50%; width:56px; height:56px; border-radius:50%;
  transform-style:preserve-3d;
  background:conic-gradient(from 130deg,
    var(--gold-deep), var(--gold-bright) 18%, var(--gold) 38%, var(--gold-2) 54%,
    var(--gold-deep) 72%, var(--gold-bright) 88%, var(--gold-deep));
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 62%);
          mask:radial-gradient(circle, transparent 60%, #000 62%);
  filter:drop-shadow(0 3px 5px rgba(50,15,8,.45));
}
.rings3d--sm .ring3d{ width:31px; height:31px; }
.ring3d--a{ animation:ringSpinA 4.5s linear infinite; }
.ring3d--b{ animation:ringSpinB 4.5s linear infinite; }
@keyframes ringSpinA{ from{ transform:translate(-64%,-50%) rotateY(0deg);} to{ transform:translate(-64%,-50%) rotateY(360deg);} }
@keyframes ringSpinB{ from{ transform:translate(-36%,-50%) rotateY(360deg);} to{ transform:translate(-36%,-50%) rotateY(0deg);} }

/* hero crest — a spinning flourish the moment the invitation opens */
.hero__crest{ margin:0 auto 1rem; }
body.opened .hero__crest{ animation:ringsEnter 1.5s var(--ease-out) .25s both; }
@keyframes ringsEnter{
  0%{ transform:scale(.2) rotateY(-280deg) rotateX(35deg); opacity:0; }
  55%{ opacity:1; }
  100%{ transform:scale(1) rotateY(0deg) rotateX(12deg); opacity:1; }
}

/* ---- scroll-driven GIANT rings scene ----------------------------- */
.rings-scene{
  position:relative; height:230vh;
  background:radial-gradient(120% 70% at 50% 34%, #6d1f3a 0%, var(--wine) 52%, var(--wine-2) 100%);
}
.rings-scene__sticky{
  position:sticky; top:0; height:100vh; height:100dvh;
  display:grid; place-items:center; overflow:hidden;
}
.rings-scene__glow{
  position:absolute; left:50%; top:46%; width:80vmin; height:80vmin; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(243,206,189,.20), transparent 66%); pointer-events:none;
}
.rings-scene__inner{ position:relative; z-index:2; text-align:center; }
.rings-big{
  position:relative; width:min(66vw,272px); margin:0 auto;
  perspective:1100px; will-change:transform;
}
.rings-big .rings-svg{ width:100%; height:auto; will-change:transform; filter:drop-shadow(0 10px 22px rgba(30,6,14,.55)); }
.rings-scene__cap{
  margin:clamp(1.3rem,5vw,2rem) 0 0;
  font-family:var(--f-calli); font-weight:700;
  font-size:clamp(1.7rem,8vw,2.6rem); line-height:1.2; padding-bottom:.12em;
  color:transparent;
  background:linear-gradient(105deg, #fff3ec, #ffdcc6 30%, var(--gold-bright) 48%, #fff 54%, var(--rose-2) 72%, #f6dcc2);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:shimmer 9s linear infinite;
  opacity:0; will-change:opacity;
  text-shadow:0 2px 22px rgba(30,6,14,.5);
}
.rings-scene__msg{
  max-width:26ch; margin:1.1rem auto 0;
  font-family:var(--f-naskh); font-size:clamp(1rem,4.3vw,1.16rem); line-height:2;
  color:#f8e7dd; opacity:0; will-change:opacity;
  text-shadow:0 1px 12px rgba(20,4,10,.6);
}
.heart{ font-size:.92em; }
.rings-scene__hint{
  position:absolute; bottom:max(1.4rem, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  z-index:2; color:var(--gold-2); font-family:var(--f-kufi); font-size:.74rem; letter-spacing:.14em; opacity:.75;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.rings-scene__hint svg{ width:20px; height:12px; animation:nudge 1.8s var(--ease-out) infinite; }

/* =================================================================
   SPARKLE — burst emitted when the envelope opens
   ================================================================= */
.burst{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.spark{
  position:absolute; left:50%; top:46%; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--gold) 55%, transparent 72%);
  box-shadow:0 0 8px rgba(243,220,172,.9);
  opacity:0; will-change:transform,opacity;
}
@keyframes burstOut{
  0%{ transform:translate(-50%,-50%) scale(.2); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); opacity:0; }
}

/* =================================================================
   BACKGROUND MUSIC — hidden player + mute toggle
   ================================================================= */
#ytmusic{ position:fixed; bottom:0; left:0; width:2px; height:2px; opacity:0; pointer-events:none; border:0; z-index:-1; overflow:hidden; }

.sound-toggle{
  position:fixed; z-index:80;
  top:max(1rem, env(safe-area-inset-top)); left:max(1rem, env(safe-area-inset-left));
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(53,13,25,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(243,220,172,.55); color:var(--gold-2); cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6);
  opacity:0; transform:scale(.75); pointer-events:none;
  transition:opacity .5s ease, transform .5s var(--ease), background .3s ease, color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.sound-toggle.show{ opacity:1; transform:none; pointer-events:auto; }
.sound-toggle:hover{ background:rgba(53,13,25,.72); }
.sound-toggle:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; }
.sound-toggle .eq{ display:flex; align-items:center; gap:2.5px; height:18px; }
.sound-toggle .eq i{ width:3px; height:6px; background:currentColor; border-radius:2px; transition:height .2s ease; }
.sound-toggle.is-playing .eq i{ animation:eqbar 900ms ease-in-out infinite; }
.sound-toggle.is-playing .eq i:nth-child(2){ animation-delay:.18s; }
.sound-toggle.is-playing .eq i:nth-child(3){ animation-delay:.36s; }
@keyframes eqbar{ 0%,100%{ height:5px; } 50%{ height:16px; } }
.sound-toggle.is-muted{ color:rgba(243,220,172,.45); }
.sound-toggle.is-muted .eq i{ height:5px; animation:none; }
@media (prefers-reduced-motion: reduce){ .sound-toggle .eq i{ animation:none !important; } }

/* =================================================================
   INTRO STAGE
   ================================================================= */
.stage{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:max(1.25rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  background:radial-gradient(130% 100% at 50% 8%, #7a2b44 0%, var(--wine) 42%, var(--wine-2) 100%);
  color:var(--blush-2);
  transition:opacity 1s var(--ease), transform 1.1s var(--ease), visibility 1s;
  overflow:hidden;
}
.stage__glow{
  position:absolute; inset:-15%; pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 40% at 30% 26%, rgba(133,48,75,.7), transparent 62%),
    radial-gradient(42% 42% at 74% 22%, rgba(243,220,172,.22), transparent 60%),
    radial-gradient(48% 48% at 60% 88%, rgba(53,13,25,.7), transparent 66%),
    radial-gradient(50% 40% at 50% 46%, rgba(255,225,205,.12), transparent 60%);
  filter:blur(8px);
  animation:auroraDrift 20s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{ transform:translate3d(-2%,-1%,0) scale(1); }
  50%{ transform:translate3d(2%,1.5%,0) scale(1.06); }
  100%{ transform:translate3d(1%,-1.5%,0) scale(1.03); }
}

.stage__bloom{
  position:absolute; left:50%; top:44%; z-index:1;
  width:60vmax; height:60vmax; transform:translate(-50%,-50%) scale(.2);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,238,220,.6), rgba(244,206,189,.2) 40%, transparent 70%);
  opacity:0; pointer-events:none;
}
.stage.is-blooming .stage__bloom{ animation:bloom 1.6s var(--ease-out) forwards; }
@keyframes bloom{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.2); }
  35%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.3); }
}

body.opened .stage{ opacity:0; visibility:hidden; transform:translateY(-3%) scale(1.02); pointer-events:none; }

.particles{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.p{
  position:absolute; bottom:-12px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold) 55%, transparent 72%);
  box-shadow:0 0 6px rgba(243,220,172,.8);
  opacity:0; animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0) scale(.6); opacity:0; }
  10%{ opacity:1; } 50%{ opacity:.75; } 85%{ opacity:.5; }
  100%{ transform:translateY(-106vh) translateX(var(--drift,14px)) scale(1); opacity:0; }
}

/* ---- the cover / card -------------------------------------------- */
.cover{
  position:relative; z-index:2;
  width:min(88vw, 380px);
  cursor:pointer; outline:none; perspective:1400px;
  -webkit-tap-highlight-color:transparent;
  animation:coverIn 1.2s var(--ease-out) both;
}
@keyframes coverIn{ from{ opacity:0; transform:translateY(24px) scale(.95);} to{ opacity:1; transform:none; } }
.cover:focus-visible{ outline:2px solid var(--gold-2); outline-offset:14px; border-radius:8px; }

.cover__flap{
  position:absolute; left:0; right:0; top:-1px;
  height:clamp(92px, 30vw, 124px);
  transform-origin:top center; transform-style:preserve-3d; z-index:3;
  transition:transform .9s var(--ease), opacity .7s ease;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.3));
}
.cover__flap-shape{ width:100%; height:100%; }
.cover__flap-shape path{ fill:#5e1a2e; stroke:var(--gold); stroke-width:1.2; stroke-opacity:.6; }

.card{
  position:relative; z-index:2; border-radius:6px;
  padding:clamp(120px, calc(30vw + 26px), 150px) clamp(1.4rem,6vw,2rem) clamp(2.2rem,8vw,3rem);
  min-height:clamp(420px, 66vh, 560px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:radial-gradient(120% 80% at 50% 30%, #fffdf9, #f7e7d8);
  box-shadow:0 30px 60px -20px rgba(40,8,18,.55), 0 0 40px rgba(243,206,189,.3), 0 2px 0 rgba(255,255,255,.7) inset;
  overflow:hidden; transition:transform .9s var(--ease), box-shadow .9s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:12px; border-radius:3px; pointer-events:none; padding:1px;
  background:linear-gradient(120deg, rgba(173,122,60,.2), var(--gold) 25%, var(--gold-bright) 42%, var(--rose-2) 50%, var(--gold-bright) 58%, var(--gold) 75%, rgba(173,122,60,.2));
  background-size:250% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:shimmer 8s linear infinite;
}
.card::after{ content:""; position:absolute; inset:16px; border:1px solid var(--gold); opacity:.3; border-radius:2px; pointer-events:none; }
.card__glint{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.card__glint::before{
  content:""; position:absolute; top:-40%; bottom:-40%; width:34%; left:-40%;
  background:linear-gradient(100deg, transparent, rgba(255,244,224,.65), transparent);
  transform:skewX(-18deg); animation:glint 5.5s var(--ease-out) 1.6s infinite;
}
@keyframes glint{ 0%{ left:-40%; } 16%{ left:130%; } 100%{ left:130%; } }

.card__face,.card__reveal{ position:relative; z-index:2; width:100%; }
.card__corner{ position:absolute; width:26px; height:26px; z-index:2; border:0 solid var(--gold-deep); opacity:.75; }
.card__corner--tl{ top:20px; left:20px; border-top-width:1.5px; border-left-width:1.5px; }
.card__corner--tr{ top:20px; right:20px; border-top-width:1.5px; border-right-width:1.5px; }
.card__corner--bl{ bottom:20px; left:20px; border-bottom-width:1.5px; border-left-width:1.5px; }
.card__corner--br{ bottom:20px; right:20px; border-bottom-width:1.5px; border-right-width:1.5px; }

.card__face{ text-align:center; transition:opacity .5s ease, transform .6s var(--ease); }
.bismillah{ font-family:var(--f-naskh); font-size:clamp(1.05rem,4.6vw,1.3rem); margin:0; }
.bismillah--gold{ font-weight:700; }
.std-label{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--f-latin); font-size:clamp(1rem,4.6vw,1.25rem);
  letter-spacing:.42em; text-transform:uppercase; color:var(--rose-deep);
  margin:.2rem 0 .55rem; padding-inline-start:.42em;
}
.ico--rings{ width:2.4rem; height:1.6rem; color:var(--gold); flex:0 0 auto; filter:drop-shadow(0 0 4px rgba(216,168,105,.6)); }
.std-date{ font-family:var(--f-latin); font-weight:600; font-size:clamp(2.4rem,13vw,3.4rem); letter-spacing:.06em; line-height:1; margin:0; }
.std-date .dot{ -webkit-text-fill-color:var(--rose); padding:0 .06em; }

.open-btn{
  position:relative; margin-top:1.6rem; padding:.85rem 2.1rem;
  border:1px solid var(--gold); border-radius:999px; background:transparent;
  color:var(--wine); font-family:var(--f-kufi); font-size:clamp(1rem,4.4vw,1.15rem);
  font-weight:600; cursor:pointer; overflow:hidden;
  transition:color .4s ease, border-color .4s ease, transform .3s var(--ease), box-shadow .4s ease;
}
.open-btn__ring{ position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 rgba(216,168,105,.6); animation:pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(216,168,105,.55);} 70%{ box-shadow:0 0 0 16px rgba(216,168,105,0);} 100%{ box-shadow:0 0 0 0 rgba(216,168,105,0);} }
.open-btn__text{ position:relative; z-index:1; }
.open-btn::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(100deg, var(--rose-deep), var(--gold-2), var(--rose-deep)); transform:translateX(-101%); transition:transform .5s var(--ease); }
.cover:hover .open-btn, .open-btn:hover{ color:#4a2110; border-color:var(--gold-2); box-shadow:0 8px 26px -8px rgba(216,168,105,.7); }
.cover:hover .open-btn::before, .open-btn:hover::before{ transform:translateX(0); }
.open-hint{ margin:.9rem 0 0; font-family:var(--f-kufi); font-size:.82rem; color:var(--ink-soft); }

.card__reveal{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem; text-align:center; opacity:0; transform:scale(.94); pointer-events:none;
  transition:opacity .8s ease, transform .9s var(--ease-out);
}
.names__eyebrow{ font-family:var(--f-kufi); letter-spacing:.32em; font-size:.78rem; color:var(--rose-deep); margin:0 0 .1rem; padding-inline-start:.32em; }

.names{ margin:.2rem 0; font-family:var(--f-calli); font-weight:700; line-height:1; display:flex; flex-direction:column; align-items:center; gap:.1em; position:relative; z-index:2; }
.names__one,.names__two{ font-size:clamp(2.8rem, 15vw, 4.2rem); color:var(--wine); }
.names__amp{ font-family:var(--f-calli); font-size:clamp(1.4rem, 7vw, 2rem); line-height:1; margin:.05em 0; }

.seal{
  position:absolute; z-index:5; top:clamp(70px, calc(30vw - 6px), 100px); left:50%; transform:translateX(-50%);
  width:52px; height:52px; color:#b07d3e;
  filter:drop-shadow(0 5px 9px rgba(60,30,10,.45)); transition:transform .55s var(--ease), opacity .45s ease;
}
.seal::after{ content:""; position:absolute; inset:-6px; border-radius:50%; box-shadow:0 0 18px rgba(243,220,172,.65); opacity:.7; }

.cover.is-opening .seal{ transform:translateX(-50%) scale(0) rotate(-45deg); opacity:0; }
.cover.is-opening .cover__flap{ transform:rotateX(-172deg); opacity:.92; }
.cover.is-opening .card__face{ opacity:0; transform:translateY(-10px) scale(.96); pointer-events:none; }
.cover.is-opening .card{ transform:translateY(-4px) scale(1.02); box-shadow:0 42px 84px -24px rgba(40,8,18,.6), 0 0 70px rgba(243,206,189,.45); }
.cover.show-names .card__reveal{ opacity:1; transform:none; }

/* =================================================================
   MAIN INVITATION
   ================================================================= */
.invite{ opacity:0; visibility:hidden; transition:opacity 1s ease .15s, visibility 1s; }
body.opened .invite{ opacity:1; visibility:visible; }

/* HERO */
.hero{
  position:relative; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6rem 1.5rem 4rem; color:var(--blush-2);
  background:radial-gradient(130% 90% at 50% 20%, #7a2b44 0%, var(--wine) 46%, var(--wine-2) 100%);
  overflow:hidden;
}
.hero::after{ content:""; position:absolute; inset:16px; border:1px solid rgba(243,220,172,.3); border-radius:4px; pointer-events:none; z-index:3; }

.hero__aurora{
  position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 40% at 24% 30%, rgba(133,48,75,.8), transparent 62%),
    radial-gradient(42% 42% at 80% 20%, rgba(243,220,172,.20), transparent 60%),
    radial-gradient(46% 48% at 62% 82%, rgba(109,31,58,.7), transparent 66%),
    radial-gradient(40% 40% at 14% 84%, rgba(244,206,189,.2), transparent 60%);
  filter:blur(12px); animation:auroraDrift 22s ease-in-out infinite alternate;
}
.hero__bokeh,.dust{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.bokeh{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,240,220,.5), rgba(216,168,105,.3) 45%, transparent 72%);
  filter:blur(6px); opacity:0; animation:bokehFloat linear infinite;
}
@keyframes bokehFloat{
  0%{ transform:translateY(10vh) translateX(0) scale(.9); opacity:0; }
  15%{ opacity:.75; } 80%{ opacity:.55; }
  100%{ transform:translateY(-110vh) translateX(var(--bx,20px)) scale(1.1); opacity:0; }
}

/* rotating arabesque mandala (wrapper handles scroll parallax) */
.mandala-wrap{ position:absolute; left:50%; top:47%; z-index:1; width:min(128vw,640px); aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; }
.mandala{ width:100%; height:100%; color:var(--gold); opacity:.26; animation:spinSlow 90s linear infinite; filter:drop-shadow(0 0 10px rgba(216,168,105,.25)); }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
.mandala .draw{ fill:none; stroke:currentColor; stroke-width:.7; stroke-dasharray:1400; stroke-dashoffset:1400; }
body.opened .mandala .draw{ animation:drawIn 3.2s var(--ease-out) .3s forwards; }
@keyframes drawIn{ to{ stroke-dashoffset:0; } }

.hero__inner{ position:relative; z-index:2; will-change:transform, opacity; }
.hero__inner::before{
  content:""; position:absolute; z-index:-1; inset:-12% -16%;
  background:radial-gradient(58% 54% at 50% 46%, rgba(45,10,20,.62), rgba(45,10,20,.3) 55%, transparent 76%);
  pointer-events:none;
}
.hero .names__one,.hero .names__two{
  color:transparent;
  background:linear-gradient(105deg,#fff4ed 0%, #ffdcc7 28%, var(--gold-bright) 45%, #fff 53%, var(--rose-2) 70%, #f6dcc2 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:shimmer 9s linear infinite;
  filter:drop-shadow(0 3px 10px rgba(30,6,14,.6));
  text-shadow:0 2px 22px rgba(30,6,14,.55);
}
.hero__eyebrow{ font-family:var(--f-kufi); letter-spacing:.34em; font-size:.82rem; color:var(--gold-2); margin:0 0 1rem; padding-inline-start:.34em; }
.hero__date{ font-family:var(--f-kufi); font-size:clamp(1rem,4.6vw,1.2rem); letter-spacing:.06em; color:rgba(254,245,240,.92); margin:.4rem 0 0; }

/* French hero — elegant Latin serif typography */
.hero__eyebrow--fr{ font-family:var(--f-latin); text-transform:uppercase; letter-spacing:.44em; padding-inline-start:.44em; font-weight:500; }
.names--fr .names__one, .names--fr .names__two{ font-family:var(--f-latin); font-weight:600; white-space:nowrap; font-size:clamp(2.6rem, 13vw, 4rem); letter-spacing:.01em; }
.names--fr .names__amp{ font-family:var(--f-latin); font-style:italic; }

.scroll-cue{
  position:absolute; bottom:max(1.6rem, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:3;
  color:var(--gold-2); text-decoration:none; font-family:var(--f-kufi); font-size:.78rem; letter-spacing:.14em; opacity:.9;
}
.scroll-cue svg{ width:22px; height:13px; animation:nudge 1.8s var(--ease-out) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0); opacity:.6;} 50%{ transform:translateY(5px); opacity:1;} }

.seam{ height:150px; background:linear-gradient(var(--wine-2), var(--wine) 6%, rgba(249,235,232,0) 4%, var(--blush) 92%); margin-top:-1px; }

/* generic section */
.section{ position:relative; padding:clamp(3rem,10vw,5.5rem) 0; overflow:hidden; }
.section--opening{ padding-top:0; }
.section--opening,.section--family,.section--events,.section--location{
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(216,168,105,.10), transparent 60%),
    linear-gradient(var(--blush-2), var(--blush));
}
.section::before{
  content:""; position:absolute; z-index:0; width:60vw; height:60vw; max-width:460px; max-height:460px;
  border-radius:50%; top:-14%; right:-18%;
  background:radial-gradient(circle, rgba(217,158,139,.16), transparent 68%); pointer-events:none;
}

.section--opening .bismillah{ text-align:center; font-size:clamp(1.35rem,5.8vw,1.75rem); font-weight:700; }
.prayer{ text-align:center; font-family:var(--f-naskh); font-size:clamp(1.22rem,5.4vw,1.6rem); line-height:2.15; color:var(--ink); max-width:34ch; margin:0 auto; position:relative; z-index:2; }

.frame{
  position:relative; z-index:2;
  background:linear-gradient(180deg, var(--paper), #fbeee2);
  border:1px solid var(--line); border-radius:10px;
  padding:clamp(2rem,8vw,3rem) clamp(1.4rem,7vw,2.5rem); text-align:center;
  box-shadow:0 24px 50px -30px rgba(90,40,30,.5), 0 0 40px rgba(243,206,189,.25);
}
.frame::before{ content:""; position:absolute; inset:8px; border:1px solid var(--line); border-radius:6px; pointer-events:none; }
.family__lead{ font-family:var(--f-kufi); letter-spacing:.14em; color:var(--rose-deep); font-size:clamp(1rem,4.4vw,1.15rem); margin:0 0 1rem; }
.family__names{ font-family:var(--f-calli); font-weight:700; font-size:clamp(1.4rem,6.2vw,1.95rem); color:var(--wine); line-height:1.7; margin:0 0 1.2rem; }
.family__and{ display:block; font-size:.75em; color:var(--rose); margin:.1em 0; }
.family__msg{ font-family:var(--f-naskh); font-size:clamp(.72rem,3.25vw,1.02rem); color:var(--ink-soft); margin:0; white-space:nowrap; }

.sec-head{ text-align:center; margin-bottom:clamp(2rem,7vw,3rem); position:relative; z-index:2; }
.sec-head__kicker{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-kufi); letter-spacing:.24em; font-size:.78rem; color:var(--rose-deep); padding-inline-start:.24em; }
.ico--pin{ width:1rem; height:1rem; color:var(--gold); }
.sec-head__title{ font-family:var(--f-calli); font-weight:700; font-size:clamp(2rem,9vw,3rem); margin:.3rem 0 0; line-height:1.2; }
.sec-head__sub{ font-family:var(--f-naskh); font-size:clamp(1.02rem,4.4vw,1.2rem); color:var(--ink-soft); margin:.8rem auto 0; max-width:30ch; line-height:1.7; }
.events__close{
  text-align:center; position:relative; z-index:2;
  font-family:var(--f-calli); font-weight:700;
  font-size:clamp(1.2rem,5.4vw,1.55rem); line-height:1.75;
  color:var(--rose-deep); max-width:26ch;
  margin:clamp(2.2rem,7vw,3.2rem) auto 0;
}

/* ---- timeline / events ------------------------------------------- */
.timeline{ list-style:none; margin:0; padding:0; position:relative; display:flex; flex-direction:column; gap:1.4rem; z-index:2; }
.timeline::before{ content:""; position:absolute; top:14px; bottom:14px; right:20px; width:1px; background:linear-gradient(var(--gold), rgba(216,168,105,.12)); }
.event{ position:relative; padding-right:52px; }
.event__marker{
  position:absolute; right:2px; top:6px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:var(--paper); border:1px solid var(--gold); color:var(--rose-deep);
  box-shadow:0 4px 12px -6px rgba(150,90,60,.5), 0 0 12px rgba(243,206,189,.4);
}
.event__marker svg{ width:20px; height:20px; }
.event__body{ background:linear-gradient(180deg, var(--paper), #fbefe4); border:1px solid var(--line); border-radius:12px; padding:1.15rem 1.3rem; box-shadow:0 16px 34px -26px rgba(90,40,30,.5); }
.event__title{ font-family:var(--f-calli); font-weight:700; font-size:clamp(1.3rem,5.6vw,1.6rem); color:var(--wine); margin:0 0 .3rem; }
.event__date{ font-family:var(--f-kufi); font-weight:600; color:var(--rose-deep); font-size:clamp(1rem,4.4vw,1.12rem); margin:0 0 .25rem; }
.event__place{ font-family:var(--f-naskh); color:var(--ink-soft); font-size:clamp(1rem,4.4vw,1.12rem); margin:0; }

.event--main{ padding-right:56px; }
.event--main .event__marker{
  width:52px; height:52px; right:-5px; background:linear-gradient(150deg, var(--wine-lit), var(--wine)); border-color:var(--gold-2);
  box-shadow:0 0 0 4px rgba(243,206,189,.3), 0 6px 16px -6px rgba(80,20,30,.65);
}
.event--main .event__marker svg{ width:34px; height:auto; }
.event--main .event__marker .marker-rings{ width:42px; height:auto; display:block; filter:drop-shadow(0 2px 3px rgba(20,4,10,.5)); }
.event--main .event__body{
  background:linear-gradient(160deg, #5e1a2e, #3a0f1c); border-color:rgba(243,220,172,.5); position:relative; overflow:hidden;
  box-shadow:0 24px 50px -22px rgba(40,8,18,.75), 0 0 40px rgba(216,168,105,.22); animation:mainGlow 5s ease-in-out infinite;
}
@keyframes mainGlow{ 0%,100%{ box-shadow:0 24px 50px -22px rgba(40,8,18,.75), 0 0 30px rgba(216,168,105,.16);} 50%{ box-shadow:0 24px 50px -22px rgba(40,8,18,.8), 0 0 48px rgba(243,206,189,.35);} }
.event--main .event__body::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(243,220,172,.4); border-radius:8px; pointer-events:none; }
.event--main .event__body::after{ content:""; position:absolute; top:-50%; bottom:-50%; width:40%; left:-50%; background:linear-gradient(100deg, transparent, rgba(243,206,189,.2), transparent); transform:skewX(-18deg); animation:glint 6.5s var(--ease-out) 1s infinite; }
.event--main .event__title{ color:var(--blush-2); }
.event--main .event__date{ color:var(--gold-2); }
.event--main .event__place{ color:rgba(254,245,240,.85); }
.event__badge{
  display:inline-block; font-family:var(--f-kufi); font-size:.68rem; letter-spacing:.22em; color:#4a2a0f;
  background:linear-gradient(100deg, var(--gold-bright), var(--gold-2), var(--gold)); background-size:200% 100%; animation:shimmer 5s linear infinite;
  padding:.3rem .9rem; border-radius:999px; margin-bottom:.6rem;
}

/* ---- location ---------------------------------------------------- */
.map-card{ position:relative; z-index:2; }
.map-card__frame{
  position:relative; border-radius:14px; padding:8px;
  background:linear-gradient(160deg, var(--paper), #f7e7d8); border:1px solid var(--line);
  box-shadow:0 24px 50px -30px rgba(90,40,30,.55), 0 0 40px rgba(243,206,189,.3);
}
.map-card__frame::before{ content:""; position:absolute; inset:3px; border:1px solid var(--gold); opacity:.4; border-radius:12px; pointer-events:none; z-index:2; }
.map-card__frame iframe{ width:100%; height:min(58vh,420px); border-radius:9px; display:block; }
.map-btn{
  display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:1.2rem; padding:1.05rem 1.4rem;
  border-radius:999px; background:linear-gradient(150deg, var(--wine-lit), var(--wine) 60%, var(--wine-2));
  color:var(--blush-2); text-decoration:none; font-family:var(--f-kufi); font-weight:600;
  font-size:clamp(1rem,4.4vw,1.12rem); border:1px solid rgba(243,220,172,.5);
  box-shadow:0 16px 34px -16px rgba(40,8,18,.7), 0 0 24px rgba(216,168,105,.2);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); position:relative; overflow:hidden;
}
.map-btn .ico{ color:var(--gold-2); }
.map-btn::after{ content:""; position:absolute; top:-50%; bottom:-50%; width:36%; left:-50%; background:linear-gradient(100deg, transparent, rgba(243,206,189,.32), transparent); transform:skewX(-18deg); animation:glint 6s var(--ease-out) 1.5s infinite; }
.map-btn:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -18px rgba(40,8,18,.85), 0 0 30px rgba(216,168,105,.32); }
.map-btn:active{ transform:translateY(0); }

/* ---- footer ------------------------------------------------------ */
.footer{
  position:relative; text-align:center; overflow:hidden;
  padding:clamp(3rem,9vw,4.5rem) 1.5rem calc(clamp(2.5rem,7vw,3.5rem) + env(safe-area-inset-bottom));
  background:radial-gradient(120% 100% at 50% 120%, #7a2b44, var(--wine) 55%, var(--wine-2) 100%); color:var(--blush-2);
}
.footer .ornament{ position:relative; z-index:2; }
.footer__names{ font-family:var(--f-calli); font-weight:700; font-size:clamp(1.9rem,8vw,2.7rem); margin:.6rem 0 .2rem; position:relative; z-index:2; }
.footer__date{ font-family:var(--f-latin); letter-spacing:.16em; font-size:clamp(1rem,4.6vw,1.2rem); color:var(--gold-2); margin:0 0 .6rem; direction:ltr; unicode-bidi:isolate; position:relative; z-index:2; }
.footer__note{ font-family:var(--f-naskh); color:rgba(254,245,240,.8); margin:0; font-size:1rem; position:relative; z-index:2; }

/* =================================================================
   scroll reveal — dreamy + cinematic 3D
   ================================================================= */
.reveal-up{
  opacity:0; transform:translateY(30px); filter:blur(3px);
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out), filter .9s var(--ease-out);
  will-change:opacity, transform, filter;
}
.reveal-up.is-3d{ transform:perspective(900px) rotateX(40deg) translateY(64px) translateZ(-90px); transform-origin:center bottom; filter:blur(2px); }
.reveal-up.is-zoom{ transform:perspective(1000px) scale(.84) rotateX(12deg); }
.reveal-up.in{ opacity:1; transform:none; filter:none; }
.reveal-up.is-3d.in{ transform:perspective(900px) rotateX(0deg) translateY(0) translateZ(0); }
.names .reveal-up:nth-child(1){ transition-delay:.05s; }
.names .reveal-up:nth-child(2){ transition-delay:.2s; }
.names .reveal-up:nth-child(3){ transition-delay:.35s; }

/* =================================================================
   responsive
   ================================================================= */
@media (min-width:720px){
  :root{ --maxw:660px; }
  .cover{ width:400px; }
  .timeline{ gap:1.7rem; }
  .mandala-wrap{ width:min(90vw,720px); }
}

/* =================================================================
   reduced motion
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .particles,.hero__bokeh,.dust,.card__glint,.stage__bloom,.burst,.rings-scene__hint{ display:none; }
  .hero__aurora{ animation:none; }
  .rings-scene{ height:auto; }
  .rings-scene__sticky{ position:static; height:auto; padding:clamp(3rem,12vw,6rem) 1rem; }
  .rings-big{ transform:scale(1) !important; }
  .rings-scene__cap{ opacity:1 !important; }
  .reveal-up,.reveal-up.is-3d,.reveal-up.is-zoom{ opacity:1; transform:none; filter:none; }
  .cover__flap{ display:none; }
  .mandala .draw{ stroke-dashoffset:0; }
  .gold-foil,.bismillah--gold,.std-date,.names__amp,.sec-head__title,.footer__names,
  .hero .names__one,.hero .names__two,.names--stage .names__one,.names--stage .names__two{ animation:none; background-position:0 0; }
}