/* rings (V3: their two raised right hands side by side, one shared artboard): 6:30 PM, the shabka. A 180svh section with a sticky 100svh stage; the guest taps each ring in
   the open box and it flies onto a right ring finger. The stage is never mirrored in RTL; its text is. */
@layer sections{
[data-section="rings"].rings-root{display:block;padding:0;min-height:calc(var(--vh-small) * 1.8);direction:ltr}
[data-section="rings"] .rings-fallback{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-section="rings"] .rings-pin{position:sticky;top:0;height:var(--vh-small);width:100%;overflow:hidden;contain:layout paint}
[data-section="rings"] .rings-panel{position:absolute;inset:0;opacity:0;pointer-events:none}
[data-section="rings"] .rings-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform-origin:50% 45%}
/* 6:30 PM dusk: a rosy, warming wash over the velvet, deeper at the foot of the frame */
[data-section="rings"] .rings-dusk{position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c-champagne-hi) 34%,transparent) 0%,transparent 34%,color-mix(in srgb,var(--c-rose) 16%,transparent) 72%,color-mix(in srgb,var(--c-rose-800) 26%,transparent) 100%)}
/* candlelight bokeh: soft warm discs drifting, never string lights */
[data-section="rings"] .rings-bokeh{position:absolute;inset:0}
[data-section="rings"] .rings-bk{position:absolute;display:block;border-radius:50%;opacity:.5;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c-flame) 70%,transparent) 0%,color-mix(in srgb,var(--c-glow) 40%,transparent) 55%,transparent 100%);
  animation:rings-drift 9s var(--ease-silk) infinite alternate}
[data-section="rings"] .rings-bk-1{left:6%;top:16%;width:54px;height:54px;animation-duration:11s}
[data-section="rings"] .rings-bk-2{left:78%;top:12%;width:38px;height:38px;animation-delay:-3s}
[data-section="rings"] .rings-bk-3{left:64%;top:30%;width:66px;height:66px;opacity:.32;animation-duration:13s}
[data-section="rings"] .rings-bk-4{left:16%;top:40%;width:30px;height:30px;animation-delay:-5s}
[data-section="rings"] .rings-bk-5{left:86%;top:52%;width:46px;height:46px;opacity:.38;animation-duration:10s}
[data-section="rings"] .rings-bk-6{left:2%;top:64%;width:62px;height:62px;opacity:.34;animation-delay:-7s}
[data-section="rings"] .rings-bk-7{left:44%;top:8%;width:26px;height:26px;animation-duration:8s}
[data-section="rings"] .rings-hands{position:absolute;left:0;top:0;width:393px;height:540px;transform-origin:0 0}
[data-section="rings"] .rings-hand{position:absolute;left:0;top:0;width:393px;height:540px;transform-origin:0 0}
[data-section="rings"] .rings-cv-a,[data-section="rings"] .rings-cv-box,[data-section="rings"] .rings-cv{position:absolute;left:0;top:0}
[data-section="rings"] .rings-box-back,[data-section="rings"] .rings-box-front{position:absolute;left:0;top:0;width:300px;height:150px;transform-origin:0 0}
[data-section="rings"] .rings-flash{position:absolute;inset:0;opacity:0;background:radial-gradient(120% 70% at var(--rings-fx,0%) 0%,var(--c-ivory) 0%,transparent 42%),radial-gradient(120% 70% at calc(100% - var(--rings-fx,0%)) 100%,var(--c-ivory) 0%,transparent 40%)}
/* Mabrouk (after Ahmed's ring): forest with a silver hairline, on a soft cream halo (a gradient, no live blur) */
[data-section="rings"] .rings-mabrouk{position:absolute;height:auto;opacity:0;overflow:visible;pointer-events:none;transition:opacity var(--dur-card) var(--ease-out-soft)}
[data-section="rings"] .rings-mabrouk path{fill:var(--c-forest);fill-opacity:0;stroke:var(--c-silver-500);stroke-width:.9;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;paint-order:stroke fill}
[data-section="rings"] .rings-mab-halo{position:absolute;opacity:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,253,248,.96) 0%,rgba(255,251,244,.82) 38%,rgba(252,247,240,.42) 68%,rgba(250,246,240,0) 100%);transition:opacity var(--dur-card) var(--ease-out-soft)}
[data-section="rings"] .rings-gem{display:inline-flex;vertical-align:-1px;margin:0 .55em}
/* will-change only while the ritual is on screen; the candle bokeh pauses off screen */
[data-section="rings"] .rings-pin.is-live .rings-bg,[data-section="rings"] .rings-pin.is-live .rings-hands{will-change:transform}
[data-section="rings"] .rings-pin:not(.is-live) .rings-bk{animation-play-state:paused}
/* text: the time, one clear instruction line, four dots */
[data-section="rings"] .rings-text{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(52px + var(--safe-t));text-align:center;pointer-events:none;opacity:0;transition:opacity var(--dur-card) var(--ease-out-soft);
  background:radial-gradient(64% 76% at 50% 46%,var(--c-halo) 0%,color-mix(in srgb,var(--c-halo) 62%,transparent) 48%,transparent 78%);padding:var(--sp-2) var(--sp-4) var(--sp-3)}
[data-section="rings"] .rings-pin.is-on .rings-text{opacity:1}
:root[dir="rtl"] [data-section="rings"] .rings-text{direction:rtl}
[data-section="rings"] .rings-eyebrow{margin:0;font:600 var(--fs-label)/1.4 var(--font-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-silver-ink)}
:root[lang="ar"] [data-section="rings"] .rings-eyebrow{letter-spacing:0;text-transform:none}
[data-section="rings"] .rings-line{margin:var(--sp-1) auto 0;max-width:30ch;min-height:1.4em;font:italic 500 var(--fs-lead)/1.32 var(--font-serif);color:var(--c-ink);transition:opacity var(--dur-micro) linear}
:root[lang="ar"] [data-section="rings"] .rings-line{font-style:normal}
[data-section="rings"] .rings-line.is-in{animation:rings-in var(--dur-text) var(--ease-out-soft) both}
[data-section="rings"] .rings-line.is-out{opacity:0}
[data-section="rings"] .rings-dots{display:flex;justify-content:center;gap:10px;margin:var(--sp-2) 0 0;padding:0;list-style:none;direction:ltr;transition:opacity var(--dur-micro) linear}
/* the dots follow the box (gold first, at the left) in both languages: never mirrored */
[data-section="rings"] .rings-dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--c-silver-500);background:transparent;transition:background-color var(--dur-micro) linear,transform var(--dur-micro) var(--ease-pop)}
[data-section="rings"] .rings-dot.is-next{transform:scale(1.35);border-color:var(--c-forest)}
[data-section="rings"] .rings-dot.is-on{background:var(--c-forest);border-color:var(--c-forest);transform:none}
[data-section="rings"] .rings-dot-his{margin-inline-start:6px}
[data-section="rings"] .rings-dot-his.is-on{background:var(--c-silver-700);border-color:var(--c-silver-700)}
[data-section="rings"] .rings-text.is-hold .rings-line,[data-section="rings"] .rings-text.is-hold .rings-dots{opacity:0;animation:none}
[data-section="rings"] .rings-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* huge, honest hit areas over each slot: real buttons, tap only, never a scroll trap */
[data-section="rings"] .rings-hits{position:absolute;inset:0;pointer-events:none}
[data-section="rings"] .rings-hit{position:absolute;min-width:56px;min-height:56px;padding:0;border:0;border-radius:var(--r-card);background:transparent;pointer-events:auto;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;visibility:hidden}
[data-section="rings"] .rings-pin.is-on .rings-hit{visibility:visible}
[data-section="rings"] .rings-hit[hidden]{display:none}
[data-section="rings"] .rings-hit.is-press{transform:scale(.97)}
/* the next ring: a soft silver halo breathes around its slot (the canvas glow carries the light) */
[data-section="rings"] .rings-hit::after{content:"";position:absolute;left:50%;top:var(--ry,50%);width:var(--rd,52px);height:var(--rd,52px);transform:translate(-50%,-50%);border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--c-ivory) 90%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--c-ivory) 70%,transparent);opacity:0;pointer-events:none}
[data-section="rings"] .rings-pin.is-on .rings-hit.is-next::after{animation:rings-halo 1.8s var(--ease-silk) infinite}
:root.is-reduced [data-section="rings"] .rings-pin.is-on .rings-hit.is-next::after{animation:none;opacity:.7}
@keyframes rings-halo{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}35%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)}}
/* the bottom control row sits beside the collapsed dock */
[data-section="rings"] .rings-row{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 6px);height:44px;visibility:hidden;pointer-events:none}
/* R1: the pill sits centred under the box (equal margins); the music disc keeps its dock corner */
[data-section="rings"] .rings-watch{position:absolute;bottom:calc(var(--safe-b) + 6px);left:50%;transform:translateX(-50%);height:44px;max-width:calc(100% - 2 * (var(--gutter) + 72px));padding:0 var(--sp-3);
  border:1px solid color-mix(in srgb,var(--c-silver-500) 55%,transparent);border-radius:var(--r-btn);background:color-mix(in srgb,var(--c-ivory) 88%,transparent);color:var(--c-forest);
  font:600 14px/1 var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  opacity:0;visibility:hidden;transition:opacity var(--dur-micro) linear,visibility 0s linear var(--dur-micro)}
:root[dir="rtl"] [data-section="rings"] .rings-watch{direction:rtl}
[data-section="rings"] .rings-pin.is-on .rings-watch{opacity:1;visibility:visible;transition:opacity var(--dur-micro) linear,visibility 0s}
[data-section="rings"] .rings-pin.is-on .rings-watch.is-gone{opacity:0;visibility:hidden;pointer-events:none}
[data-section="rings"] .rings-watch::before{content:"";display:inline-block;width:0;height:0;margin-inline-end:8px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--c-forest);vertical-align:-1px}
[data-section="rings"] .rings-watch.is-replay::before{width:9px;height:9px;border:1.5px solid var(--c-forest);border-left-color:transparent;border-radius:50%;vertical-align:-2px}
/* R2: the collapsed dock is a transparent full-width strip over the pill: let taps through to "Watch it happen" and
   "Watch again" (only the music disc stays live). The sections layer beats ui.css's base layer. */
.dock.is-collapsed{pointer-events:none}
.dock.is-collapsed .dock-rec{pointer-events:auto}
[data-section="rings"] .rings-sil{position:absolute;left:0;top:0;width:60px;height:60px;opacity:0;transform-origin:30px 30px;pointer-events:none}
.rings-spot{display:none}
@keyframes rings-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rings-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(10px,-8px,0)}}
:root.is-reduced [data-section="rings"] .rings-line.is-in{animation-duration:1ms}
[data-section="rings"] .rings-pin.is-rec .rings-text,[data-section="rings"] .rings-pin.is-rec .rings-line,[data-section="rings"] .rings-pin.is-rec .rings-dots,[data-section="rings"] .rings-pin.is-rec .rings-mabrouk{transition:none}
[data-section="rings"] .rings-pin.is-rec .rings-hits{display:none}
:root.is-reduced [data-section="rings"] .rings-bk{animation:none}
}