/* =========================================================
   EPHEMERAL ELEGANCE — theme styles (Stage 02: opening)
   ========================================================= */

/* ---------- fonts (self-hosted, OFL; unicode-range keeps downloads to what a page uses) ---------- */
@font-face{font-family:"EE Amiri";src:url(assets/fonts/Amiri-ar-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"EE Amiri";src:url(assets/fonts/Amiri-ar-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"EE Tajawal";src:url(assets/fonts/Tajawal-ar-300.woff2) format("woff2");font-weight:300;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"EE Tajawal";src:url(assets/fonts/Tajawal-ar-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"EE Tajawal";src:url(assets/fonts/Tajawal-ar-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"EE Tajawal";src:url(assets/fonts/Tajawal-la-300.woff2) format("woff2");font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"EE Tajawal";src:url(assets/fonts/Tajawal-la-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"EE Tajawal";src:url(assets/fonts/Tajawal-la-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"EE Cormorant";src:url(assets/fonts/Cormorant-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"EE Cormorant";src:url(assets/fonts/Cormorant-300-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"EE Cormorant";src:url(assets/fonts/Cormorant-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* palette */
  --navy:#172638; --navy-d:#172536; --steel:#496987; --ice:#A9C2D8;
  --champ:#C9AD98; --champ-w:#C8B6A7; --champ-ink:#9A7B63; --ivory:#F0EAE2; --ivory-s:#F3EDE1;
  --ink:#172638; --ink-soft:#3D4E62;
  /* 9:16 stage: full width on phones, a centred column on wide screens (engine pattern) */
  --col:min(100vw, max(440px, calc(100svh * .5625)));
  /* type */
  --ff-ar-display:"EE Amiri","Amiri",serif;
  --ff-ar:"EE Tajawal","Tajawal",system-ui,sans-serif;
  --ff-lat:"EE Cormorant","Cormorant Garamond",Georgia,serif;
  --ease-silk:cubic-bezier(.22,.61,.24,1);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--ivory);font-family:var(--ff-ar);font-size:17px;line-height:1.7;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body.is-locked{overflow:hidden;height:100svh}
img,video{display:block;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
h1,h2,p{margin:0}
bdi{unicode-bidi:isolate;direction:ltr;display:inline-block}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.stage{width:var(--col);margin-inline:auto;position:relative}

/* ---------- desktop surround ---------- */
.field{position:fixed;inset:0;z-index:-1;background:var(--navy-d);overflow:hidden}
.field__img{position:absolute;inset:-80px;background:center/cover no-repeat;filter:blur(42px) saturate(1.05) brightness(.66);transition:opacity 1.6s ease}
.field__img--poster{background-image:url(assets/img/poster-tiny.webp)}
.field__img--hero{background-image:url(assets/img/hero-tiny.webp);opacity:0}
.field.is-hero .field__img--hero{opacity:1}
.field::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(23,38,56,0) 30%,rgba(16,26,38,.75) 100%)}
@media (min-width:700px){
  .hero__frame,.gate__stage{box-shadow:0 0 0 1px rgba(201,173,152,.08),0 30px 120px rgba(5,10,18,.55)}
}

/* =========================================================
   GATE — the fabric cover
   ========================================================= */
.gate{position:fixed;inset:0;z-index:50;cursor:pointer;outline:none;transition:opacity .6s linear,visibility 0s linear .6s}
.gate:focus-visible .ripple{outline:1px solid var(--steel);outline-offset:10px;border-radius:50%}
.gate.is-open{cursor:default}
.gate.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.gate__stage{height:100svh;overflow:hidden;background:var(--navy)}
.gate__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--navy) url(assets/img/poster.webp) center/cover}

.gate__loading{position:absolute;left:50%;bottom:16svh;transform:translateX(-50%);display:flex;gap:7px;opacity:0;transition:opacity .4s}
.gate.is-loading .gate__loading{opacity:.8}
.gate__loading i{width:5px;height:5px;border-radius:50%;background:var(--ivory);animation:dot 1.2s ease-in-out infinite}
.gate__loading i:nth-child(2){animation-delay:.15s}.gate__loading i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* the cover spans the whole viewport, on desktop too: the guest first meets an ivory world */
.cover{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cover__sheet{position:absolute;left:-12%;top:-12%;width:165%;height:165%;transform-origin:0 0;will-change:transform;
  background:
    radial-gradient(ellipse 30% 22% at 35% 33%,rgba(250,247,241,.95),rgba(250,247,241,0) 72%),
    linear-gradient(116deg,#F3EDE1 0%,#EEE7DC 14%,#F5F0E8 23%,#EDE5D9 34%,#F4EEE5 44%,#EAE2D5 56%,#F1EBE2 66%,#ECE4D8 100%);
  /* opaque over the whole viewport at rest (viewport ends at ~68% of the sheet); soft beyond */
  -webkit-mask-image:linear-gradient(90deg,#000 70%,rgba(0,0,0,.55) 82%,transparent 100%),linear-gradient(180deg,#000 70%,rgba(0,0,0,.55) 82%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,#000 70%,rgba(0,0,0,.55) 82%,transparent 100%),linear-gradient(180deg,#000 70%,rgba(0,0,0,.55) 82%,transparent 100%);
          mask-composite:intersect}
.cover__sheet::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .45 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cover__fab{position:absolute;max-width:none;will-change:transform;pointer-events:none}
.cover__fab--top{width:178vw;left:-52vw;top:-7svh;transform:rotate(-7deg);opacity:.92}
.cover__fab--side{height:92svh;right:-40vw;top:24svh;transform:rotate(13deg);opacity:.5}
.cover__fab--low{width:196vw;left:-54vw;bottom:-13svh;transform:rotate(-4deg);opacity:.95}
.cover__sheen{position:absolute;top:-20%;bottom:-20%;left:-70%;width:55%;transform:skewX(-14deg);opacity:.55;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,253,248,.55) 50%,rgba(255,255,255,0));
  animation:sheen 11s 2.4s var(--ease-silk) infinite;will-change:transform}
@keyframes sheen{0%{transform:translateX(0) skewX(-14deg)}38%,100%{transform:translateX(330%) skewX(-14deg)}}
@media (min-width:900px){
  .cover__fab--top{width:92vw;left:-12vw;top:-16vh;transform:rotate(-6deg)}
  .cover__fab--side{height:118vh;right:-4vw;top:-4vh;opacity:.42}
  .cover__fab--low{width:104vw;left:-4vw;bottom:-26vh}
}

/* gate typography — Arabic first, Latin as an editorial accent */
.gate__copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(env(safe-area-inset-top) + 4svh) 8vw calc(env(safe-area-inset-bottom) + 17svh);color:var(--ink);pointer-events:none;will-change:transform,opacity}
.kicker-en{font-family:var(--ff-lat);font-weight:500;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--steel);margin-bottom:1.15rem;padding-left:.42em}
.names{display:flex;flex-direction:column;align-items:center;font-family:var(--ff-ar-display);font-weight:700;font-size:clamp(2.55rem,12.4vw,4.6rem);line-height:1.22;letter-spacing:0}
.names__amp{font-family:var(--ff-lat);font-weight:300;font-style:italic;font-size:.6em;line-height:1;color:var(--champ-ink);margin:.06em 0 .16em}
.names-en{font-family:var(--ff-lat);font-weight:300;font-style:italic;font-size:1.18rem;letter-spacing:.03em;color:var(--steel);margin-top:.8rem}
.names-en i{color:var(--champ-ink)}
.hairline{display:block;width:56px;height:1px;margin:1.25rem auto 1.1rem;background:linear-gradient(90deg,transparent,var(--champ) 20%,var(--champ) 80%,transparent)}
.gate__line{font-weight:300;font-size:1rem;line-height:1.8;color:var(--ink-soft);max-width:21em}

.gate__copy>*,.gate__hint{opacity:0;animation:rise 1.4s var(--ease-silk) forwards}
.gate__copy>:nth-child(1){animation-delay:.35s}.gate__copy>:nth-child(2){animation-delay:.6s}
.gate__copy>:nth-child(3){animation-delay:.95s}.gate__copy>:nth-child(4){animation-delay:1.15s}
.gate__copy>:nth-child(5){animation-delay:1.3s}.gate__hint{animation-delay:1.9s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.gate__hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 6.5svh);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.ripple{position:relative;width:46px;height:46px;margin-bottom:.7rem;display:grid;place-items:center}
.ripple::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--champ-ink)}
.ripple i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--champ-ink);opacity:0;animation:ripple 2.8s var(--ease-silk) infinite}
.ripple i+i{animation-delay:1.4s}
@keyframes ripple{0%{transform:scale(.35);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.gate__hint-ar{font-size:.98rem;font-weight:400;color:var(--ink)}
.gate__hint-en{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:.95rem;color:var(--steel);margin-top:.1rem}

/* =========================================================
   SHARED CHAPTER SYSTEM
   ========================================================= */
.ch{position:relative;overflow:hidden;padding:clamp(5.5rem,15svh,9.5rem) 0}
.ch--ivory{background:radial-gradient(ellipse 120% 70% at 50% 0%,#F6F1E9 0%,var(--ivory) 55%,#EDE6DB 100%);color:var(--ink)}
.ch--navy{background:linear-gradient(180deg,var(--navy) 0%,#152335 100%);color:var(--ivory)}
.ch__inner{position:relative;z-index:2;width:min(88vw,620px);margin-inline:auto;text-align:center}
.ch__head{margin-bottom:clamp(2.2rem,6svh,3.4rem)}
.ch__num{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:1rem;letter-spacing:.32em;padding-left:.32em;color:var(--champ-ink);margin-bottom:.35rem}
.ch--navy .ch__num{color:var(--champ)}
.ch__title{font-family:var(--ff-ar-display);font-weight:700;font-size:clamp(2.1rem,8.6vw,3.3rem);line-height:1.3}
.ch__title-en{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:1.12rem;color:var(--steel);margin-top:.15rem}
.ch--navy .ch__title-en{color:var(--champ-w)}
.en{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-variant-numeric:lining-nums}
.ch .names__amp{font-family:var(--ff-lat);font-weight:300;font-style:italic;color:var(--champ-ink);font-size:.58em;line-height:1;margin:.05em 0 .12em}
.ch--navy .names__amp{color:var(--champ)}

/* reveals: content is visible without JS; with JS it rises in once */
.has-js .rv{opacity:0;transform:translateY(18px);transition:opacity 1.2s var(--ease-silk),transform 1.2s var(--ease-silk)}
.has-js .rv.in{opacity:1;transform:none}

/* buttons that belong to the theme */
.line-btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:50px;padding:.7rem 1.35rem;border:1px solid rgba(201,173,152,.55);
  color:inherit;text-decoration:none;font-family:var(--ff-lat);font-weight:500;font-size:.98rem;letter-spacing:.06em;transition:background .35s,border-color .35s}
.line-btn:hover,.line-btn:focus-visible{background:rgba(201,173,152,.1);border-color:var(--champ);outline:none}
.line-btn i{position:relative;width:22px;height:1px;background:currentColor;opacity:.7}
.line-btn i::after{content:"";position:absolute;left:-1px;top:-3px;width:7px;height:7px;border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}
.line-btn small{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:.9rem;opacity:.8}
.line-btn[hidden]{display:none}

/* =========================================================
   THE LIVING HERO
   ========================================================= */
.hero-scroll{position:relative}
.js-motion .hero-scroll{height:400svh}           /* Stage D: was 430svh; the reading beats keep their scroll length (≈32svh per timeline unit) */
/* Stage D: Chapter I rises over the last of the hero's ivory (both #F6F1E9 at the seam), so the hero no longer
   ends on a screen of blank ivory before the invitation arrives */
.js-motion .invitation{margin-top:-30svh;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14svh);mask-image:linear-gradient(180deg,transparent 0,#000 14svh)}
.hero-stage{position:relative}
.js-motion .hero-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.hero__frame{height:100svh;overflow:hidden;background:var(--navy)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:62% 70%}
.hero__frame.no-img{background:radial-gradient(ellipse at 70% 80%,#3a3326,var(--navy) 60%)}
.hero__branch{position:absolute;width:78%;right:-30%;top:-10%;opacity:0;transform:rotate(16deg);max-width:none;pointer-events:none}
.hero__veil{position:absolute;inset:0;opacity:0;transition:opacity 2.2s ease .4s;background:
  radial-gradient(ellipse 75% 42% at 24% 22%,rgba(12,21,33,.58),rgba(12,21,33,0) 72%),
  linear-gradient(180deg,rgba(17,29,43,.45) 0%,rgba(17,29,43,0) 30%,rgba(17,29,43,0) 80%,rgba(17,29,43,.42) 100%)}
.hero-scroll.is-in .hero__veil{opacity:1}
.hero__shade{position:absolute;inset:0;background:radial-gradient(ellipse 90% 60% at 50% 38%,rgba(14,24,36,.78),rgba(14,24,36,.5));opacity:0}
.hero__fabric{position:absolute;bottom:-8svh;left:50%;width:max(150vw,1100px);max-width:none;opacity:0;transform:translateX(-10%) rotate(-6deg);pointer-events:none}
.hero__ivory{position:absolute;inset:0;transform:translateY(100%);pointer-events:none;
  background:linear-gradient(0deg,#F6F1E9 0%,var(--ivory) 52%,rgba(240,234,226,.85) 66%,rgba(240,234,226,0) 100%)}
.js-motion .hero__layer{position:absolute}
.hero__layer{color:var(--ivory-s)}

/* reveal 01 — the couple, in the film's open sky (top-left of the frame) */
.hl-couple{left:calc(50% - var(--col) / 2);top:calc(env(safe-area-inset-top) + 9svh);width:calc(var(--col) * .48);padding-left:calc(var(--col) * .04);text-align:center}
.no-motion .hl-couple{position:absolute}
.hero__kicker{font-size:.9rem;font-weight:400;color:#E6DCCF}
.hero__layer .kicker-en{font-size:.6rem;letter-spacing:.3em;padding-left:.3em;line-height:1.9;color:var(--champ-w);margin:.2rem auto .85rem;max-width:15em;text-wrap:balance}
.names--light{font-size:clamp(2.05rem,9.8vw,3.1rem);line-height:1.18;color:var(--ivory-s);text-shadow:0 2px 22px rgba(8,14,22,.7)}
.names--light .names__amp{color:var(--champ)}
.hero__date{margin-top:1rem;font-weight:300;font-size:.92rem;line-height:1.5;color:#E6DCCF}
.hero__date bdi{display:block;font-family:var(--ff-lat);font-weight:300;font-size:1.5rem;letter-spacing:.1em;padding-left:.1em;color:var(--ivory-s);margin-top:.1rem;font-variant-numeric:lining-nums}

/* progressive reveal after the handoff (the couple appears by itself) */
.hr{opacity:0;transform:translateY(14px);filter:blur(6px)}
.hero-scroll.is-in .hr{opacity:1;transform:none;filter:blur(0);transition:opacity 1.6s var(--ease-silk),transform 1.6s var(--ease-silk),filter 1.6s var(--ease-silk);transition-delay:var(--d,0s)}

/* reveal 02 — the date, monumental */
.hl-date{left:0;right:0;top:calc(env(safe-area-inset-top) + 13svh);text-align:center;text-shadow:0 2px 30px rgba(8,14,22,.6)}
.js-motion .hl-date,.js-motion .hl-message{opacity:0}
.hl-date__kicker{font-size:.95rem;color:var(--champ-w)}
.hl-date__kicker .en{margin-inline-start:.5em}
.hl-date__weekday{font-family:var(--ff-ar-display);font-size:1.5rem;margin-top:1.4rem;color:#EFE7DC}
.hl-date__mono{font-family:var(--ff-lat);font-weight:300;font-size:clamp(3.6rem,18vw,8.5rem);line-height:1;letter-spacing:.02em;font-variant-numeric:lining-nums;
  display:flex;align-items:center;justify-content:center;gap:.16em;margin:.5rem 0 .7rem;color:var(--ivory-s)}
.hl-date__mono i{display:inline-block;width:1px;height:.62em;background:var(--champ);transform:rotate(22deg);opacity:.85}
.hl-date__month{font-family:var(--ff-ar-display);font-size:1.45rem;color:#EFE7DC}
.hl-date__month .en{font-size:.82em;color:var(--champ-w);margin-inline-start:.4em}

/* reveal 03 — the invitation line */
.hl-message{left:50%;top:36svh;width:min(84vw,560px);transform:translateX(-50%);text-align:center}
.hl-message .hairline{margin:0 auto 1.6rem}
.hl-message__ar{font-family:var(--ff-ar-display);font-size:clamp(1.45rem,6vw,2.1rem);line-height:1.9;color:var(--ivory-s);text-shadow:0 2px 26px rgba(8,14,22,.7)}
.hl-message__en{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:clamp(1.1rem,4.4vw,1.4rem);line-height:1.5;color:var(--champ-w);margin-top:1rem}

/* without scroll choreography the date and message simply follow the frame */
.no-motion .hl-date,.no-motion .hl-message{position:relative;left:auto;right:auto;top:auto;transform:none;width:auto;background:var(--navy);padding:4rem 8%}

/* Stage B — scroll guidance: the same rail, now with a legible bilingual label on a soft local shade
   (it sits over the brightest part of the film's frame), and an idle cue: if the guest has not scrolled
   a few seconds after the couple appears, a touch-point rises along the rail like a finger swiping up.
   Never a button (pointer-events:none), never an auto-scroll; gone for good after the first scroll. */
.scroll-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 3svh);display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:var(--ivory-s);pointer-events:none;isolation:isolate}
.scroll-hint::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(300px,80vw);height:210px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(9,16,26,.6),rgba(9,16,26,.34) 52%,rgba(9,16,26,0))}
.no-motion .scroll-hint{top:calc(100svh - 7.5rem - env(safe-area-inset-bottom));bottom:auto}
.scroll-hint__track{position:relative;width:40px;height:60px;display:flex;justify-content:center}
.scroll-hint__rail{position:relative;width:1px;height:100%;background:rgba(243,237,225,.36);overflow:hidden}
.scroll-hint__rail i{position:absolute;left:0;top:-16px;width:1px;height:16px;background:var(--ivory-s);animation:rail 2.4s var(--ease-silk) infinite}
@keyframes rail{0%{transform:translateY(0)}70%,100%{transform:translateY(80px)}}
.scroll-hint small{font-size:.98rem;line-height:1.35;letter-spacing:.01em;text-shadow:0 1px 14px rgba(8,14,22,.85)}
.scroll-hint .scroll-hint__en{margin-top:-.3rem;font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:.95rem;color:var(--champ-w)}
/* the idle cue: a touch-point (the gate's ripple language) that rises along the rail */
.scroll-hint__touch{position:absolute;left:50%;bottom:-4px;width:24px;height:24px;margin-left:-12px;border-radius:50%;opacity:0;
  border:1px solid rgba(243,237,225,.75);background:radial-gradient(circle,rgba(243,237,225,.95) 0 3px,rgba(243,237,225,.18) 4px,rgba(243,237,225,0) 70%);
  box-shadow:0 0 18px rgba(243,237,225,.25);will-change:transform,opacity}
.scroll-hint.is-idle .scroll-hint__touch{animation:swipe-up 2.9s var(--ease-silk) infinite}
.scroll-hint.is-idle .scroll-hint__rail{background:rgba(243,237,225,.5);transition:background .8s}
@keyframes swipe-up{0%{opacity:0;transform:translateY(0) scale(.85)}14%{opacity:1;transform:translateY(-2px) scale(1)}
  62%{opacity:.95;transform:translateY(-52px) scale(1)}82%,100%{opacity:0;transform:translateY(-60px) scale(.9)}}

@media (min-width:1000px){
  .hl-date__mono{font-size:clamp(7rem,11vw,10.5rem)}
  .hl-message{width:min(46vw,640px)}
  .hl-message__ar{font-size:2.3rem}
}

/* =========================================================
   01 — THE INVITATION
   ========================================================= */
.invitation{padding-top:clamp(4rem,10svh,7rem)}
.invitation__branch{position:absolute;z-index:1;width:min(58vw,420px);left:-16vw;top:-2rem;transform:rotate(-24deg);opacity:.92;pointer-events:none}
.invitation__opening{font-family:var(--ff-ar-display);font-size:1.15rem;color:var(--ink-soft);margin-bottom:2rem}
.families{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 auto 2rem}
.family{display:flex;flex-direction:column;min-width:0}
.family small{font-size:.8rem;color:var(--steel)}
.family span{font-family:var(--ff-ar-display);font-size:1.18rem;line-height:1.5}
.families__amp{font-family:var(--ff-lat);font-style:italic;font-weight:300;color:var(--champ-ink);font-size:1.4rem}
.invitation__lead{font-weight:300;font-size:1.06rem;color:var(--ink-soft);max-width:22em;margin:0 auto}
.invitation__lead-en{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:1.05rem;color:var(--steel);max-width:24em;margin:.4rem auto 0}
.invitation__names{font-family:var(--ff-ar-display);font-weight:700;font-size:clamp(2.4rem,11.5vw,4.2rem);line-height:1.25;margin:2.2rem 0 .4rem;display:flex;flex-direction:column;align-items:center}
.invitation__names-en{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:1.25rem;color:var(--steel)}
.invitation__names-en i{color:var(--champ-ink)}
.invitation__when{margin:2.2rem 0 2.4rem}
.invitation__when .hairline{margin:0 auto 1.4rem}
.invitation__when p{font-family:var(--ff-ar-display);font-size:1.3rem}
.invitation__when p.en{font-size:1.05rem;color:var(--steel)}
.invitation__venue{font-family:var(--ff-ar)!important;font-size:1rem!important;color:var(--steel);margin-top:.5rem}
.invitation__closing{font-family:var(--ff-ar-display);font-size:1.25rem}
.invitation__closing-en{font-family:var(--ff-lat);font-style:italic;font-weight:300;color:var(--steel);margin-top:.2rem}
@media (min-width:1000px){
  .invitation__branch{width:min(30vw,520px);left:4vw;top:2rem;transform:rotate(-8deg)}
  .invitation .ch__inner{width:min(60vw,720px)}
}

/* =========================================================
   02 — OUR STORY
   ========================================================= */
.story{padding-bottom:clamp(7rem,18svh,11rem)}
.story__intro{font-weight:300;font-size:1.06rem;color:var(--ink-soft);max-width:24em;margin:0 auto 3rem}
.story__moments{display:flex;flex-direction:column;gap:clamp(3.5rem,9svh,6rem)}
.moment{display:grid;gap:1.4rem;text-align:start}
.moment__fig{position:relative;width:78%;margin:0;justify-self:start}
.moment:nth-child(even) .moment__fig{justify-self:end}
.moment__fig::before{content:"";position:absolute;inset:0;transform:translate(14px,14px);border:1px solid var(--champ);opacity:.7}
.moment__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ivory-s)}
.moment__img img{width:100%;height:100%;object-fit:cover}
.has-js .moment__img{clip-path:inset(100% 0 0 0);transition:clip-path 1.6s var(--ease-silk)}
.has-js .moment.in .moment__img{clip-path:inset(0)}
.moment__ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(160deg,#F5F0E8,#E9E1D5)}
.moment__ph img{position:absolute;width:160%;left:-30%;top:22%;opacity:.9;object-fit:contain;height:auto}
.moment__ph span{position:relative;font-family:var(--ff-lat);font-style:italic;color:var(--steel);font-size:.95rem;letter-spacing:.08em}
.moment__cap{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:.92rem;color:var(--steel);margin-top:1.1rem}
.moment__label{font-family:var(--ff-ar-display);font-size:1.5rem}
.moment__label .en{font-size:.95rem;color:var(--champ-ink);margin-inline-start:.6em}
.moment__text{font-weight:300;color:var(--ink-soft);margin-top:.4rem;max-width:26em}
.has-js .moment .moment__body{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease-silk) .35s,transform 1.2s var(--ease-silk) .35s}
.has-js .moment.in .moment__body{opacity:1;transform:none}
.story__fabric{position:absolute;z-index:1;width:max(130vw,900px);max-width:none;bottom:-6rem;left:-20vw;opacity:.75;pointer-events:none}
@media (min-width:900px){
  .story .ch__inner{width:min(84vw,1040px)}
  .moment{grid-template-columns:1fr 1fr;align-items:center;gap:4rem}
  .moment__fig{width:86%}
  .moment:nth-child(even) .moment__fig{order:2}
}

/* =========================================================
   CANDLELIGHT TRANSITION
   ========================================================= */
.candle-scene{position:relative;background:var(--ivory)}
.candle-stage{background:var(--ivory)}
.js-motion .candle-scene{height:236svh}          /* Stage D: was 260svh; same pace per timeline unit, the line arrives with the first flame */
.candle-stage{position:relative;height:100svh;overflow:hidden}
.js-motion .candle-stage{position:sticky;top:0}
.candle__night{position:absolute;inset:0;background:var(--navy)}
/* the ivory's warming is a #D9CBB8 veil faded in (same colours as tweening the stage background, without a repaint) */
.candle__warm{position:absolute;inset:0;background:#D9CBB8;opacity:0}
/* Performance (Stage A): every layer the scrubbed timeline moves or fades is composited */
.js-motion .candle__warm,.js-motion .candle__night,.js-motion .candle__bloom,.js-motion .candles--scene,
.js-motion .candles--scene .candles__floor,.js-motion .candle__line{will-change:opacity}
.js-motion .candle__dim{will-change:transform}
.js-motion .candle__line{will-change:opacity,transform}
/* Performance (Stage A): same vignette, laid out at its final on-screen size (240vmax × 0.42 = 100.8vmax) and
   scaled from 5.714 (= 2.4 / 0.42) down to 1, so its layer is small; the gradient proportions are unchanged */
.candle__dim{position:absolute;left:50%;top:64%;width:100.8vmax;height:100.8vmax;margin:-50.4vmax 0 0 -50.4vmax;pointer-events:none;
  background:radial-gradient(circle,rgba(23,38,56,0) 0%,rgba(23,38,56,0) 17%,rgba(23,38,56,.5) 24%,#172638 33%);transform:scale(5.7143)}
.no-motion .candle__dim{display:none}
.js-motion .candle__night{opacity:0}
.candle__bloom{position:absolute;left:50%;bottom:6svh;width:120vmin;height:80vmin;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 70%,rgba(232,190,140,.32),rgba(201,173,152,.08) 40%,rgba(201,173,152,0) 70%)}
.candle__bloom::after{content:"";position:absolute;inset:20%;background:radial-gradient(ellipse at 50% 70%,rgba(255,214,160,.22),rgba(255,214,160,0) 65%);animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}45%{opacity:1;transform:scale(1.04)}70%{opacity:.85;transform:scale(.99)}}
.js-motion .candles--scene,.js-motion .candle__bloom,.js-motion .candle__line{opacity:0}
.candle__line{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 15svh);text-align:center;padding:0 8%;color:var(--ivory-s);
  font-family:var(--ff-ar-display);font-size:clamp(1.4rem,6vw,2rem);line-height:1.7}
.candle__line .en{display:block;font-size:.62em;color:var(--champ-w);margin-top:.4rem}

/* =========================================================
   03 — THE DATE
   ========================================================= */
.date{padding-top:clamp(3rem,8svh,5rem)}
.date__mono{margin-bottom:3rem}
.date__weekday{font-size:1.1rem;font-weight:300;color:#E6DCCF}
.date__weekday .en{color:var(--champ-w);margin-inline-start:.4em}
.date__day{font-family:var(--ff-lat);font-weight:300;font-size:clamp(8rem,42vw,14rem);line-height:.92;font-variant-numeric:lining-nums;
  background:linear-gradient(180deg,#F6F0E6 20%,#C9AD98 110%);-webkit-background-clip:text;background-clip:text;color:transparent;margin:.4rem 0 .2rem}
.date__month{font-family:var(--ff-ar-display);font-size:2rem}
.date__year{font-family:var(--ff-lat);font-weight:300;letter-spacing:.12em;color:var(--champ);font-variant-numeric:lining-nums;margin-inline-start:.3em}
.date__month-en{font-family:var(--ff-lat);font-style:italic;font-weight:300;color:var(--champ-w);font-size:1.1rem}
.date__time{margin-top:1rem;font-weight:300;color:var(--ice);font-size:.98rem}
.countdown-wrap{padding:2.4rem 0;border-top:1px solid rgba(201,173,152,.22);border-bottom:1px solid rgba(201,173,152,.22)}
.countdown__title{font-family:var(--ff-ar-display);font-size:1.3rem;margin-bottom:1.4rem}
.countdown{display:grid;grid-template-columns:repeat(4,1fr)}
.countdown__cell{display:flex;flex-direction:column;align-items:center;gap:.15rem;border-inline-start:1px solid rgba(201,173,152,.22)}
.countdown__cell:first-child{border-inline-start:0}
.countdown__cell strong{font-family:var(--ff-lat);font-weight:300;font-size:clamp(2.2rem,10vw,3.2rem);line-height:1.05;font-variant-numeric:lining-nums tabular-nums;color:var(--ivory-s)}
.countdown__cell span{font-size:.85rem;color:var(--champ)}
.countdown__cell small{font-family:var(--ff-lat);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ice);opacity:.7}
.countdown__state{font-family:var(--ff-ar-display);font-size:1.4rem;color:var(--champ)}
.calendar{margin-top:2.6rem}
.calendar__title{font-family:var(--ff-ar-display);font-size:1.2rem;margin-bottom:1.1rem}
.calendar__actions{display:flex;flex-direction:column;gap:.75rem;align-items:center}
.calendar__actions .line-btn{width:min(100%,320px)}
.calendar__note{color:var(--ice);font-size:.92rem;margin-top:.6rem}
@media (min-width:1000px){
  .date__inner{width:min(84vw,1080px);display:grid;grid-template-columns:1.1fr 1fr;column-gap:5rem;align-items:center}
  .date .ch__head{grid-column:1/-1}
  .date__mono{grid-row:2/4;margin:0}
  .calendar__actions .line-btn{width:min(100%,340px)}
}

/* =========================================================
   04 — THE CELEBRATION
   ========================================================= */
.celebration{padding-bottom:clamp(8rem,22svh,13rem)}
.timeline{position:relative;text-align:start;max-width:520px;margin:0 auto}
.timeline__track{position:absolute;inset-inline-start:21px;top:10px;bottom:10px;width:1px;background:rgba(201,173,152,.22)}
.timeline__track i{position:absolute;inset:0;background:linear-gradient(180deg,var(--champ),rgba(201,173,152,.4));transform-origin:50% 0;transform:scaleY(0)}
.no-motion .timeline__track i{transform:none}
.timeline__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.6rem}
.tl{position:relative;padding-inline-start:68px}
.tl__icon{position:absolute;inset-inline-start:0;top:.1rem;width:43px;height:43px;border-radius:50%;border:1px solid rgba(201,173,152,.55);background:var(--navy);display:grid;place-items:center;transition:background .6s,border-color .6s}
.tl__icon svg{width:21px;height:21px;fill:none;stroke:var(--champ);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s}
.tl__time{font-family:var(--ff-lat);font-weight:300;font-size:1.45rem;color:var(--champ);font-variant-numeric:lining-nums;line-height:1.2}
.tl__title{font-family:var(--ff-ar-display);font-size:1.45rem;line-height:1.5;margin-top:.1rem}
.tl__title .en{font-size:.68em;color:var(--champ-w);margin-inline-start:.5em}
.tl__text{font-weight:300;color:var(--ice);font-size:.98rem;margin-top:.15rem}
.has-js .tl{opacity:.35;transform:translateY(14px);transition:opacity 1s var(--ease-silk),transform 1s var(--ease-silk)}
.has-js .tl.seen{opacity:1;transform:none}

/* =========================================================
   05 — THE VENUE
   ========================================================= */
.venue{background:linear-gradient(180deg,#152335,#121e2d)}
.venue__inner{display:flex;flex-direction:column;gap:2.6rem}
.venue__figure{position:relative;margin:0 auto;width:min(82vw,440px)}
.venue__figure::before{content:"";position:absolute;inset:0;transform:translate(-14px,14px);border:1px solid rgba(201,173,152,.45)}
.venue__figure img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;background:#15212f}
.venue__name{font-family:var(--ff-ar-display);font-weight:700;font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.35}
.venue__name-en{font-family:var(--ff-lat);font-style:italic;font-weight:300;color:var(--champ-w);font-size:1.15rem}
.venue__address{font-style:normal;font-weight:300;color:var(--ice);margin:1.1rem auto 0;max-width:22em;line-height:1.9;padding-top:1.1rem;border-top:1px solid rgba(201,173,152,.22)}
.venue__desc{font-weight:300;color:#D9D2C8;margin-top:1rem}
.venue .line-btn{margin-top:2rem;flex-wrap:wrap}
.line-btn--solid{background:rgba(201,173,152,.12)}
.venue__note{margin-top:1.6rem;color:var(--ice);font-size:.95rem}
@media (min-width:1000px){
  .venue__inner{width:min(84vw,1040px);flex-direction:row;align-items:center;gap:5rem}
  .venue__figure{flex:0 0 42%;width:auto}
  .venue__info{flex:1}
}

/* =========================================================
   06 — THE SECRET BLOOM
   ========================================================= */
.bloom{background:radial-gradient(ellipse 80% 55% at 50% 55%,#1c2e44 0%,#121e2d 70%)}
.bloom__stage{position:relative;width:min(88vw,440px);aspect-ratio:4/5;margin:0 auto}
.bloom__branch{position:absolute;width:74%;max-width:none;pointer-events:none}
.bloom__branch--a{left:-20%;bottom:-8%;transform:rotate(-14deg)}
.bloom__branch--b{right:-20%;top:-10%;transform:scaleX(-1) rotate(-14deg)}
.bloom__petals{position:absolute;inset:0;pointer-events:none}
.bloom__petals img{position:absolute;width:var(--w,44px);height:auto;max-width:none;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--r,0deg));filter:drop-shadow(0 3px 6px rgba(5,10,18,.35))}
.bloom__message{position:absolute;z-index:4;inset:20% 11%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;text-align:center;opacity:0;pointer-events:none}
.bloom__text{max-width:100%;text-wrap:balance;font-family:var(--ff-ar-display);font-size:clamp(1.45rem,6.2vw,1.95rem);line-height:1.85;color:var(--ivory-s);text-shadow:0 2px 20px rgba(5,10,18,.6)}
.bloom__text-en{font-family:var(--ff-lat);font-style:italic;font-weight:300;color:var(--champ-w);font-size:1.1rem}
.bloom__touch{position:absolute;inset:0;background:none;border:0;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bloom__touch:focus-visible{outline:1px solid var(--champ);outline-offset:-12%}
.bloom.is-open .bloom__touch{cursor:default}
.bloom__hint{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin-top:1.6rem;color:#E6DCCF;font-size:.98rem;transition:opacity .8s}
.bloom__hint .en{color:var(--champ-w);font-size:.95rem}
.bloom.is-open .bloom__hint{opacity:0}
.ripple--light::before{background:var(--champ)}
.ripple--light i{border-color:var(--champ)}

/* navy -> ivory: the fabric returns */
.sweep{position:relative;height:56svh;overflow:hidden;background:linear-gradient(180deg,#121e2d 0%,#2a3442 28%,#9c9890 58%,var(--ivory) 92%)}
.sweep__fabric{position:absolute;top:8%;left:-30%;width:max(150vw,1100px);max-width:none;opacity:.85;transform:rotate(-5deg);pointer-events:none}
.sweep__fabric--b{top:42%;left:-10%;opacity:.7;transform:rotate(4deg)}

/* =========================================================
   07 — RSVP
   ========================================================= */
.rsvp{padding-top:clamp(3rem,8svh,5rem)}
.rsvp__inner{width:min(90vw,560px)}
.rsvp__text{font-weight:300;font-size:1.06rem;color:var(--ink-soft);max-width:24em;margin:0 auto}
.rsvp__text-en{font-family:var(--ff-lat);font-style:italic;font-weight:300;color:var(--steel);max-width:26em;margin:.4rem auto 0}
.rsvp__form{margin-top:2.6rem;text-align:start}
.rsvp__choices{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.choice{position:relative;min-height:104px;padding:1rem .8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;text-align:center;
  font:inherit;color:var(--ink);background:rgba(255,253,249,.45);border:1px solid rgba(23,38,56,.2);cursor:pointer;transition:background .4s,color .4s,border-color .4s,opacity .4s}
.choice:hover{border-color:rgba(23,38,56,.45)}
.choice:focus-visible{outline:2px solid var(--champ-ink);outline-offset:3px}
.choice__mark{width:14px;height:14px;border-radius:50%;border:1px solid currentColor;margin-bottom:.45rem;opacity:.6;transition:background .4s,box-shadow .4s}
.choice__ar{font-family:var(--ff-ar-display);font-size:1.15rem;line-height:1.5}
.choice__en{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:.95rem;color:var(--steel);transition:color .4s}
.rsvp__choices.has-choice .choice[aria-checked="false"]{opacity:.55}
.choice--accept[aria-checked="true"]{background:var(--navy);color:var(--ivory-s);border-color:var(--navy)}
.choice--accept[aria-checked="true"] .choice__en{color:var(--champ)}
.choice--accept[aria-checked="true"] .choice__mark{background:var(--champ);border-color:var(--champ);opacity:1;box-shadow:0 0 0 4px rgba(201,173,152,.25)}
.choice--decline[aria-checked="true"]{background:rgba(73,105,135,.1);border-color:var(--steel);border-width:1.5px}
.choice--decline[aria-checked="true"] .choice__mark{background:var(--steel);border-color:var(--steel);opacity:1;box-shadow:0 0 0 4px rgba(73,105,135,.18)}
.rsvp__details{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease-silk)}
.rsvp__details.is-open{grid-template-rows:1fr}
.rsvp__details-inner{overflow:hidden;min-height:0}
.rsvp__details:not(.is-open) .rsvp__details-inner{visibility:hidden}
.rsvp__details.is-open .rsvp__details-inner{padding-top:2rem}
.input{display:block;margin-bottom:1.4rem}
.input__label{display:block;font-size:.88rem;color:var(--steel);margin-bottom:.35rem}
.input input,.input textarea{width:100%;font-family:var(--ff-ar);font-size:1.08rem;color:var(--ink);background:rgba(255,253,249,.55);border:1px solid rgba(23,38,56,.22);border-radius:0;padding:.85rem .9rem;
  -webkit-appearance:none;appearance:none;transition:border-color .3s,background .3s}
.input textarea{resize:vertical;min-height:120px;line-height:1.7}
.input input:focus,.input textarea:focus{outline:none;border-color:var(--champ-ink);background:#FFFDF9;box-shadow:0 0 0 3px rgba(201,173,152,.25)}
.input [aria-invalid="true"]{border-color:#8E4A44}
.input textarea::placeholder,.input input::placeholder{color:#8a95a2}
.field-err{color:#8E4A44;font-size:.9rem;margin:-.9rem 0 1.2rem}
.rsvp__choices+.field-err{margin:.7rem 0 0}
.send-btn{width:100%;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;padding:.7rem 1rem;
  font:inherit;font-weight:500;font-size:1.06rem;color:var(--ivory-s);background:var(--navy);border:0;cursor:pointer;transition:background .3s}
.send-btn small{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:.92rem;color:var(--champ)}
.send-btn:hover{background:#1e324a}
.send-btn:focus-visible{outline:2px solid var(--champ-ink);outline-offset:3px}
.rsvp__note{font-size:.86rem;color:var(--steel);text-align:center;margin-top:.9rem}
.rsvp__note .en{display:block;font-size:.95rem}
.rsvp__status{margin-top:1.6rem;padding:1.1rem 1.2rem;border-inline-start:2px solid var(--champ-ink);background:rgba(255,253,249,.6);font-size:.96rem;color:var(--ink)}
.rsvp__status pre{white-space:pre-wrap;font-family:var(--ff-ar);font-size:.92rem;margin:.7rem 0 0;padding:.8rem;background:rgba(23,38,56,.05);direction:auto;unicode-bidi:plaintext}
.rsvp__status a{color:var(--ink);font-weight:500}
@media (max-width:359px){.rsvp__choices{grid-template-columns:1fr}}

/* =========================================================
   CLOSING
   ========================================================= */
.closing{padding:clamp(7rem,18svh,10rem) 0 0;background:radial-gradient(ellipse 90% 60% at 50% 70%,#F7F1E7 0%,var(--ivory) 50%,#E8DFD2 100%)}
.closing__fabric{position:absolute;z-index:1;top:-4rem;left:-25vw;width:max(150vw,1100px);max-width:none;opacity:.8;transform:rotate(-4deg);pointer-events:none}
.closing__inner{padding-top:4rem}
.closing__line{font-family:var(--ff-ar-display);font-size:clamp(1.4rem,6vw,1.9rem);line-height:1.8}
.closing__line-en{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:1.15rem;color:var(--steel);margin-top:.3rem}
.closing__names{font-family:var(--ff-ar-display);font-weight:700;font-size:clamp(2.6rem,12vw,4.4rem);line-height:1.25;margin:2.6rem 0 .8rem;display:flex;flex-direction:column;align-items:center}
.closing__date{font-family:var(--ff-lat);font-weight:300;font-size:1.5rem;letter-spacing:.18em;color:var(--champ-ink);font-variant-numeric:lining-nums}
.closing__families{margin-top:1.2rem;color:var(--ink-soft)}
.closing__hashtag{margin-top:.6rem;color:var(--steel);font-family:var(--ff-lat)}
.closing__remind{margin-top:2rem;font-size:.95rem;color:var(--ink-soft)}
.closing__remind a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--champ)}
.contacts{margin-top:2.6rem}
.contacts__title{font-size:.92rem;color:var(--steel);margin-bottom:.9rem}
.contact{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem 0;border-top:1px solid rgba(23,38,56,.12)}
.contact b{font-family:var(--ff-ar-display);font-weight:400;font-size:1.1rem}
.contact__btns{display:flex;gap:.5rem}
.contact__btns a{min-height:44px;min-width:76px;display:inline-flex;align-items:center;justify-content:center;padding:0 .9rem;border:1px solid rgba(23,38,56,.25);color:var(--ink);text-decoration:none;font-size:.92rem}
.closing__ground{position:relative;height:clamp(220px,34svh,340px);margin-top:3rem}
.closing__branch{position:absolute;bottom:-14%;left:-8%;width:min(64vw,420px);transform:rotate(58deg);transform-origin:50% 50%;opacity:.95}
.closing__petals img{position:absolute;bottom:var(--b);left:var(--x);width:var(--w);transform:rotate(var(--r));opacity:.95;filter:drop-shadow(0 4px 5px rgba(60,48,35,.18))}

/* =========================================================
   NAVIGATION, PROGRESS, MUSIC
   ========================================================= */
.progress{position:fixed;z-index:62;top:0;left:0;right:0;height:2px;pointer-events:none;opacity:0;transition:opacity .8s}
.progress i{position:absolute;inset:0;background:linear-gradient(270deg,var(--champ),rgba(201,173,152,.5));transform-origin:100% 50%;transform:scaleX(0)}
.is-opened .progress{opacity:1}
.music-btn{position:fixed;z-index:60;top:calc(env(safe-area-inset-top) + 14px);left:14px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(240,234,226,.42);background:rgba(23,38,56,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .8s ease,background .5s,border-color .5s}
.music-btn.is-shown{opacity:1}
.music-btn:focus-visible,.nav-btn:focus-visible{outline:1px solid var(--champ);outline-offset:3px}
.music-btn__bars{display:flex;align-items:center;gap:3px;height:16px}
.music-btn__bars i{width:1.5px;height:100%;background:var(--ivory-s);transform-origin:50% 50%;animation:bar 1.1s ease-in-out infinite;transition:background .5s}
.music-btn__bars i:nth-child(2){animation-delay:.25s}.music-btn__bars i:nth-child(3){animation-delay:.5s}.music-btn__bars i:nth-child(4){animation-delay:.15s}
@keyframes bar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.music-btn.is-muted .music-btn__bars i{animation:none;transform:scaleY(.18)}
.nav-btn{position:fixed;z-index:60;top:calc(env(safe-area-inset-top) + 14px);right:14px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(240,234,226,.42);background:rgba(23,38,56,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .8s ease,background .5s,border-color .5s}
.nav-btn.is-shown{opacity:1}
.nav-btn__lines{display:flex;flex-direction:column;gap:6px}
.nav-btn__lines i{display:block;width:16px;height:1px;background:var(--ivory-s);transition:background .5s}
.nav-btn__lines i+i{width:10px;margin-inline-start:6px}
/* on light chapters the controls turn ivory with navy ink */
.on-light .music-btn,.on-light .nav-btn{background:rgba(243,237,225,.72);border-color:rgba(23,38,56,.28)}
.on-light .music-btn__bars i,.on-light .nav-btn__lines i{background:var(--navy)}
.nav{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(16,27,41,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .5s ease}
.nav.is-open{opacity:1}
.nav__inner{width:min(86vw,420px);max-height:100svh;overflow:auto;padding:4.5rem 0 3rem}
.nav__title{font-family:var(--ff-lat);font-style:italic;color:var(--champ);text-align:center;margin-bottom:1.6rem;letter-spacing:.06em}
.nav__list{list-style:none;margin:0;padding:0;counter-reset:n}
.nav__list a{display:flex;align-items:baseline;gap:1rem;padding:.8rem .4rem;border-bottom:1px solid rgba(201,173,152,.16);color:var(--ivory-s);text-decoration:none;min-height:48px}
.nav__list a:hover,.nav__list a:focus-visible{background:rgba(201,173,152,.07);outline:none}
.nav__list .n{font-family:var(--ff-lat);font-style:italic;color:var(--champ);width:2.2em;flex:none;font-variant-numeric:lining-nums}
.nav__list .ar{font-family:var(--ff-ar-display);font-size:1.3rem;flex:1}
.nav__list .en{font-size:.95rem;color:var(--ice);opacity:.8}.nav__close{position:fixed;top:calc(env(safe-area-inset-top) + 14px);right:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(240,234,226,.42);background:transparent;color:var(--ivory-s);font-size:1.6rem;line-height:1;cursor:pointer}
.nav__close:focus-visible{outline:1px solid var(--champ);outline-offset:3px}

.nojs{position:fixed;inset:auto 0 0;z-index:99;padding:1rem;background:var(--ivory);color:var(--ink);text-align:center}
@media (max-width:360px){.names{font-size:2.3rem}.gate__line{font-size:.92rem}}

@media (prefers-reduced-motion:reduce){
  .cover__sheen,.ripple i,.scroll-hint__rail i,.music-btn__bars i,.candle__bloom::after{animation:none}
  .scroll-hint.is-idle .scroll-hint__touch{animation:none;opacity:.9;transform:translateY(-30px)}
  .gate__copy>*,.gate__hint{animation-duration:.01s;animation-delay:0s}
  .hr{transform:none;filter:none}
  .hero-scroll.is-in .hr{transition:opacity .6s ease}
  .has-js .rv,.has-js .tl,.has-js .moment .moment__body{transform:none;transition:opacity .5s ease}
  .has-js .moment__img{clip-path:none}
}

/* English accents set inline beside Arabic: they are dir=ltr spans, so use symmetric spacing */
.tl__title .en,.moment__label .en,.hl-date__month .en,.hl-date__kicker .en,.date__weekday .en{margin-inline-start:0;margin-left:.45em;margin-right:.45em}

/* =========================================================
   THE DATE — light travelling through the composition (scroll-driven)
   ========================================================= */
.date__inner{position:relative}
.date__inner>*:not(.date-light){position:relative;z-index:1}
.date-light{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.no-motion .date-light{display:none}
.dl-base{fill:none;stroke:rgba(201,173,152,.18);stroke-width:1}
.dl-trail{fill:none;stroke:rgba(222,196,166,.62);stroke-width:1}
.dl-glow{fill:none;stroke:rgba(255,214,164,.9);stroke-width:5;stroke-linecap:round;filter:url(#dlBlur)}
.dl-core{fill:none;stroke:#FFF4E2;stroke-width:1.4;stroke-linecap:round}
.date__wash{position:absolute;left:50%;top:46%;width:150%;height:120%;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(ellipse 50% 45% at 50% 50%,rgba(214,182,150,.16),rgba(201,173,152,.05) 45%,rgba(201,173,152,0) 72%)}
.no-motion .date__wash{opacity:.6}
.countdown__cell strong{text-shadow:0 0 calc(var(--hl,0) * 20px) rgba(255,214,168,calc(var(--hl,0) * .55))}
.js-motion .countdown__cell{opacity:var(--on,1)}
.calendar{padding:2rem 1.4rem 2.2rem}
.calendar__title{text-shadow:0 0 calc(var(--hl,0) * 18px) rgba(255,214,168,calc(var(--hl,0) * .5))}
.calendar__glow{position:absolute;left:50%;bottom:.8rem;width:110%;height:8.5rem;transform:translateX(-50%);opacity:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 50% 50% at 50% 55%,rgba(255,204,150,.15),rgba(201,173,152,.05) 50%,rgba(201,173,152,0) 75%)}
.calendar .line-btn{transition:background .35s,border-color .9s ease,box-shadow .9s ease}
.calendar.is-lit .line-btn{border-color:rgba(232,204,170,.9);box-shadow:0 0 22px rgba(255,200,140,.10),inset 0 0 12px rgba(255,214,168,.05)}
@media (prefers-reduced-motion:reduce){.dl-glow,.dl-core{display:none}}
/* Performance (Stage A): the parts the Date light moves or fades are composited, so a scroll frame
   repaints only the thin light itself, not the monumental date and the countdown around it */
.js-motion .date-light{will-change:transform}
.js-motion .date__mono>*,.js-motion .countdown__cell,.js-motion .countdown__title,.js-motion .calendar__glow,
.js-motion .date__wash,.js-motion .calendar__title,.js-motion .calendar__actions{will-change:opacity}
.js-motion .timeline__track i{will-change:transform}

/* =========================================================
   CELEBRATION — the line illuminates event by event (one scroll driver)
   ========================================================= */
.timeline__track i{background:linear-gradient(180deg,rgba(201,173,152,.55),rgba(232,204,170,.95))}
.timeline__head{position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:#FFF0DA;opacity:0;
  box-shadow:0 0 6px 2px rgba(255,210,160,.55),0 0 18px 6px rgba(255,200,140,.18);will-change:transform}
.no-motion .timeline__head{display:none}
.js-motion .tl__time,.js-motion .tl__title,.js-motion .tl__text{transition:opacity .7s ease,color .7s ease}
.js-motion .tl.is-future .tl__time,.js-motion .tl.is-future .tl__title,.js-motion .tl.is-future .tl__text{opacity:.42}
.js-motion .tl.is-future .tl__icon{border-color:rgba(201,173,152,.22)}
.js-motion .tl.is-future .tl__icon svg{stroke:rgba(201,173,152,.42)}
.js-motion .tl.is-past .tl__time,.js-motion .tl.is-past .tl__title,.js-motion .tl.is-past .tl__text{opacity:.82}
.js-motion .tl.is-past .tl__icon{background:#22324a;border-color:rgba(201,173,152,.7)}
.js-motion .tl.is-past .tl__icon svg{stroke:var(--champ)}
.js-motion .tl.is-active .tl__icon{background:var(--champ);border-color:var(--champ);box-shadow:0 0 0 5px rgba(201,173,152,.12),0 0 26px rgba(255,206,150,.32)}
.js-motion .tl.is-active .tl__icon svg{stroke:var(--navy)}
.js-motion .tl.is-active .tl__title{color:#FBF6EE}
.tl__icon{transition:background .7s ease,border-color .7s ease,box-shadow .9s ease}

/* fine grain over large dark gradients: dithers away 8-bit banding rings */
.candle-stage::after,.date::after,.bloom::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.5;mix-blend-mode:overlay;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.calendar .line-btn{white-space:nowrap}

/* Our Story as a photographic sequence (moments without words): layered, asymmetric, overlapping */
.story__moments:has(.moment--photo){gap:0}
.moment--photo{display:block}
.moment--photo .moment__fig{width:76%}
.moment--photo:nth-child(odd) .moment__fig{margin-inline-start:0;margin-inline-end:auto}
.moment--photo:nth-child(even) .moment__fig{margin-inline-start:auto;margin-inline-end:0;width:68%}
.moment--photo+.moment--photo{margin-top:-14%}
.moment--photo:nth-child(even){position:relative;z-index:2}
.moment--photo:nth-child(3n) .moment__fig{width:84%;margin-inline:auto}
/* Stage E — on phones the photographs overlap by design; their offset hairline frames used to be painted over
   the neighbouring photo. Here every frame sits on one layer beneath every photograph (frames 0, odd photos 1,
   even photos 2: the same stacking order of photos as before), so a frame only shows where it is not covered.
   Desktop (≥900px) has no overlap and keeps its original rules. */
@media (max-width:899px){
  .story__moments:has(.moment--photo){position:relative;isolation:isolate}
  .moment--photo:nth-child(even){position:static;z-index:auto}
  .moment--photo .moment__fig::before{z-index:0}
  .moment--photo:nth-child(odd) .moment__img{z-index:1}
  .moment--photo:nth-child(even) .moment__img{z-index:2}
}
@media (min-width:900px){
  .story__moments:has(.moment--photo){display:grid;grid-template-columns:repeat(6,1fr);column-gap:2.4rem;row-gap:0;align-items:start}
  .moment--photo,.moment--photo+.moment--photo{margin-top:0}
  .moment--photo .moment__fig,.moment--photo:nth-child(n) .moment__fig{width:100%;margin:0}
  .moment--photo:nth-child(1){grid-column:1/4;grid-row:1}
  .moment--photo:nth-child(2){grid-column:5/7;grid-row:1;margin-top:20vh}
  .moment--photo:nth-child(3){grid-column:2/5;grid-row:2;margin-top:7rem}
  .moment--photo:nth-child(4){grid-column:1/3;grid-row:3;margin-top:6rem}
  .moment--photo:nth-child(5){grid-column:4/7;grid-row:3;margin-top:14vh}
  .moment--photo:nth-child(n+6){grid-column:span 3;margin-top:3rem}
}