/* finale: the wide view at night, «نورتونا», the hashtag, the sign-off, Replay and the footer. Tokens only. */
@layer sections{
/* one viewport: the lockup in the sky band at the top, the couple's band kept clear below it */
[data-section="finale"].finale-on{min-height:var(--vh-small,100svh);justify-content:flex-start;align-items:center;text-align:center;
  padding-top:calc(40px + var(--safe-t));padding-bottom:calc(var(--dock-h,64px) + 30svh + var(--safe-b))}
[data-section="finale"] .finale-wrap{width:100%;max-width:var(--col-max);margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:0}
[data-section="finale"] .finale-halo{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding:var(--sp-2) var(--sp-4) var(--sp-4);width:100%;box-sizing:border-box}
/* a soft vertical night scrim behind the whole lockup (the finale is always at night) */
[data-section="finale"] .finale-halo::before{content:"";position:absolute;z-index:-1;inset:-28px -12px;pointer-events:none;border-radius:40px;
  background:linear-gradient(180deg,rgba(16,42,48,0),rgba(16,42,48,.45) 22%,rgba(16,42,48,.45) 78%,rgba(16,42,48,0))}

/* «مستنيينكم» (pre-event): silver light traces the outline, then forest ink fills it */
[data-section="finale"] .finale-ink-wrap{width:min(44vw,176px);aspect-ratio:306/182;margin:var(--sp-2) 0 var(--sp-1,4px)}
[data-section="finale"] .finale-ink-wrap svg{display:block;width:100%;height:100%;overflow:visible}
[data-section="finale"] .finale-ink{fill:var(--c-forest);fill-opacity:0;stroke:var(--c-silver-500);stroke-width:1.4px;stroke-linejoin:round;
  stroke-dasharray:1 1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}

[data-section="finale"] .finale-thanks{margin:0;text-wrap:balance;font-family:var(--font-display);font-weight:500;font-size:var(--fs-display);line-height:1.2;color:var(--c-forest)}
[data-section="finale"] .finale-waiting{margin:var(--sp-2) 0 0;font-style:italic;font-size:var(--fs-lead);color:var(--c-ink-2)}
[data-section="finale"]:lang(ar) .finale-waiting{font-style:normal}

/* the hashtag: a static rose line with Copy; unfolds once */
[data-section="finale"] .finale-tag{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:48px;margin-top:var(--sp-4);padding:0 var(--sp-4);
  border:0;border-radius:var(--r-chip);background:none;cursor:pointer;color:var(--c-rose-700)}
[data-section="finale"] .finale-tag-txt{position:relative;display:inline-flex;font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:var(--fs-tag);line-height:1;white-space:nowrap;letter-spacing:.01em}
[data-section="finale"] .finale-part{position:relative;display:inline-flex;will-change:transform}
[data-section="finale"] .finale-l{display:inline-block;transform-origin:50% 60%}
[data-section="finale"] .finale-apos{position:absolute;right:100%;top:0;color:var(--c-silver-ink);opacity:0;transform-origin:100% 40%}
[data-section="finale"] .finale-hana{transition:color 1.5s var(--ease-out-soft)}
[data-section="finale"] .finale-tag-txt.is-gold .finale-hana{color:var(--c-silver-ink)}
[data-section="finale"] .finale-hana-glow{position:absolute;inset:-40% -25%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(233,237,240,.75) 45%,rgba(233,237,240,0))}
[data-section="finale"] .finale-glint{position:absolute;top:-15%;bottom:-15%;left:0;width:24px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 50%,rgba(255,255,255,0))}
[data-section="finale"] .finale-tag-copy{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:var(--hairline);color:var(--c-forest);background:var(--c-ivory)}
[data-section="finale"] .finale-tag-copy .ico{width:16px;height:16px}

[data-section="finale"] .finale-signoff{margin:var(--sp-4) 0 0;font-family:var(--font-display);font-size:clamp(22px,6vw,26px);line-height:1.3;color:var(--c-forest)}
[data-section="finale"] .finale-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-3)}
[data-section="finale"] .finale-btn .ico{width:20px;height:20px}

/* the footer: the silver logo, whose solitaire keeps catching the light */
[data-section="finale"] .finale-foot{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:0;transform-origin:50% 40%}
[data-section="finale"] .finale-logo-wrap{position:relative;width:clamp(64px,19vw,84px);aspect-ratio:1}
[data-section="finale"] .finale-logo,[data-section="finale"] .finale-logo svg{display:block;width:100%;height:100%}
[data-section="finale"] .finale-star{position:absolute;left:50%;top:50%;width:46px;height:46px;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.5);will-change:transform,opacity}
[data-section="finale"] .finale-star-h,[data-section="finale"] .finale-star-v{position:absolute;left:50%;top:50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,1),rgba(255,255,255,.85) 35%,rgba(220,235,242,0))}
[data-section="finale"] .finale-star-h{width:46px;height:3px;margin:-1.5px 0 0 -23px}
[data-section="finale"] .finale-star-v{width:3px;height:46px;margin:-23px 0 0 -1.5px}
[data-section="finale"] .finale-star-c{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,1),rgba(255,255,255,.6) 45%,rgba(220,235,242,0))}
[data-section="finale"] .finale-foot-names{margin:0;font-family:var(--font-label);font-weight:600;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-forest)}
[data-section="finale"]:lang(ar) .finale-foot-names{text-transform:none;font-size:16px}
[data-section="finale"] .finale-credit{margin:0;font-size:13px;color:var(--c-ink-2)}

@media (hover:hover) and (pointer:fine){
  [data-section="finale"] .finale-tag:hover .finale-tag-copy{border-color:var(--c-silver-700)}
}
html.is-reduced [data-section="finale"] .finale-star{opacity:.55;transform:translate(-50%,-50%) scale(.7)}

/* night (core/tod.js): the finale is the deepest, candlelit hour. Ivory type on a soft deep-teal scrim, the
   «نورتونا» ink fills in ivory with its silver trace, the hashtag in blush; no cream fog over the scene */
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-halo{background:radial-gradient(farthest-side,rgba(16,42,48,.58),rgba(16,42,48,.40) 62%,rgba(16,42,48,0))}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-foot{background:radial-gradient(farthest-side,rgba(16,42,48,.5),rgba(16,42,48,.32) 60%,rgba(16,42,48,0))}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-ink{fill:var(--c-ivory);stroke:var(--c-silver-200)}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-thanks,html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-signoff{color:var(--c-ivory);text-shadow:0 1px 16px rgba(16,42,48,.6)}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-waiting{color:var(--c-silver-200)}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-tag{color:var(--c-blush-300)}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-tag-txt.is-gold .finale-hana,html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-apos{color:var(--c-silver-200)}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-foot-names{color:var(--c-ivory)}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-credit{color:var(--c-silver-200)}
}
[data-section="finale"] .finale-actions{flex-wrap:nowrap;margin-top:var(--sp-5)}
[data-section="finale"] .finale-btn{padding-inline:14px;white-space:nowrap}
[data-section="finale"] .finale-credit{margin-top:var(--sp-3)}
@media (max-width:370px){[data-section="finale"] .finale-actions{flex-wrap:wrap}}
/* phones: the couple's band starts at about the same height on every phone (the stage scales with the
   width), so the lockup keeps one compact size and always ends well above their heads */
@media (max-width:600px){
  [data-section="finale"] .finale-logo-wrap{width:58px}
  [data-section="finale"] .finale-ink-wrap{width:min(36vw,142px);margin-top:var(--sp-1)}
  [data-section="finale"] .finale-thanks{font-size:clamp(24px,6.6vw,28px)}
  [data-section="finale"] .finale-tag{margin-top:var(--sp-2);min-height:44px}
  [data-section="finale"] .finale-signoff{margin-top:var(--sp-2)}
  [data-section="finale"] .finale-actions{margin-top:var(--sp-4)}
  [data-section="finale"] .finale-credit{margin-top:var(--sp-2)}
}
@media (max-height:760px){
  [data-section="finale"] .finale-actions{margin-top:var(--sp-4)}
  [data-section="finale"] .finale-credit{margin-top:var(--sp-2)}
}

/* round 1: the lit beat. "Hana" stays rose (blush at night) with one silver sweep clipped to the letters;
   the rest of the line steps back. No box, no white haze over the glyphs. */
[data-section="finale"] .finale-tag{--fin-hana:var(--c-rose-700);--fin-rest:var(--c-silver-ink)}
[data-section="finale"] .finale-l{transition:color .45s var(--ease-out-soft, ease-out)}
[data-section="finale"] .finale-hana{color:var(--fin-hana)}
[data-section="finale"] .finale-tag-txt.is-sweep .finale-hana{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,var(--fin-hana) 30%,var(--c-silver-200) 45%,var(--c-diamond) 50%,var(--c-silver-200) 55%,var(--fin-hana) 70%);
  background-size:300% 100%;background-position:100% 0}
[data-section="finale"] .finale-tag-txt.is-lit .finale-l:not(.finale-hana){color:var(--fin-rest)}
[data-section="finale"] .finale-glint{display:none}
[data-section="finale"] .finale-hana-glow{background:radial-gradient(closest-side,rgba(255,243,246,.6),rgba(243,217,224,.36) 52%,rgba(243,217,224,0))}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-tag{--fin-hana:#F4B9CB;--fin-rest:rgba(235,195,207,.7)}
html:is([data-tod="twilight"],[data-tod="night"]) [data-section="finale"] .finale-hana-glow{background:radial-gradient(closest-side,rgba(235,195,207,.32),rgba(235,195,207,.14) 55%,rgba(235,195,207,0))}
/* short screens (WhatsApp's in-app browser, ~670 px): the whole lockup fits one view with the logo well
   clear of the top, and ends well above the couple's band. Arabic runs taller (the names line, the
   «وعقبال عندكم» sign-off), so it tightens a little more. The small header mark steps aside here (core/ui.js). */
@media (max-height:800px){
  [data-section="finale"].finale-on{padding-top:calc(28px + var(--safe-t));padding-bottom:calc(var(--dock-h,64px) + 26svh + var(--safe-b))}
  [data-section="finale"] .finale-halo{padding-top:var(--sp-1,4px)}
  [data-section="finale"] .finale-ink-wrap{width:min(30vw,120px)}
  [data-section="finale"] .finale-actions{margin-top:var(--sp-3)}
  [data-section="finale"] .finale-credit{margin-top:var(--sp-1,4px);line-height:1.4}
  [data-section="finale"]:lang(ar) .finale-foot-names{line-height:1.35}
  [data-section="finale"]:lang(ar) .finale-signoff{margin-top:var(--sp-1,4px);font-size:21px;line-height:1.25}
}
/* desktop: the lockup sits in the narrow top of the arch, where the halo's soft scrim spilled past the curve as
   a pale grey band. The night sky there is already deep, so the night halo alone carries the type */
@media (min-width:900px){[data-section="finale"] .finale-halo::before{display:none}}