/* Module `opening` v2, "first light": the sky above the venue at golden hour, alive from the first frame.
   Painted clouds drift, motes of light rise, the fountain's mist breathes and the couple's silver AH draws
   itself in light. All of it is CSS on the shell's own elements (the slots, the logo box, the pills), so the
   first paint needs no JS and no web font. On the tap, opening.js tilts the camera down through the clouds
   into the venue and lands on the song's drop. Rules target #opening (the module root) because the shell
   paints before the module mounts and sets data-section. */
@layer sections{
#opening{container-type:size;z-index:calc(var(--z-ui) - 1);background:transparent;
  --opening-logo:min(46cqw,22cqh);--opening-ly:31cqh;
  --opening-sky-top:color-mix(in srgb,var(--c-sage-300) 46%,var(--c-ice));
  --opening-sky-hi:color-mix(in srgb,var(--c-sage-200) 55%,var(--c-ice));
  --opening-sky-mid:color-mix(in srgb,var(--c-blush-100) 70%,var(--c-sage-50));
  --opening-sky-low:color-mix(in srgb,var(--c-blush-200) 55%,var(--c-glow));
  --opening-sky-end:color-mix(in srgb,var(--c-sage-200) 70%,var(--c-sage-100));
  --opening-light:color-mix(in srgb,var(--c-bulb) 92%,transparent)}
#opening .opening-slot{inset:0}
/* the sky: cool and high at the top, warming toward the sun below the frame */
/* (the plate runs 36cqh past the bottom edge and feathers out there: it melts into the venue's own sky while the
   camera tilts down, so the hand-off has no seam) */
#opening [data-slot="opening-bg"]{bottom:auto;height:136cqh;background:
  radial-gradient(70cqw 28cqh at 50% var(--opening-ly),color-mix(in srgb,var(--c-blush-200) 60%,transparent),transparent),
  radial-gradient(130cqw 40cqh at 50% 86cqh,color-mix(in srgb,var(--c-glow) 60%,transparent),transparent),
  linear-gradient(180deg,var(--opening-sky-top) 0,var(--opening-sky-hi) 18cqh,var(--opening-sky-mid) 44cqh,var(--opening-sky-low) 72cqh,var(--opening-sky-low) 86cqh,var(--opening-sky-end) 104cqh,color-mix(in srgb,var(--opening-sky-end) 0%,transparent) 136cqh)}
/* painted clouds (two depths), drifting at different speeds */
/* review 1: two clearly different speeds (about 12 and 24 px/s on a phone), so the sky is alive from the first frame */
#opening [data-slot="opening-back"]{inset:-3% -12%;background:url(../../assets/img/opening-clouds-back.webp) 50% 100%/cover no-repeat;
  animation:opening-drift-a 14s cubic-bezier(.37,0,.63,1) -7s infinite alternate both}
#opening [data-slot="opening-card"]{inset:-3% -16%;background:url(../../assets/img/opening-clouds-front.webp) 50% 100%/cover no-repeat;
  animation:opening-drift-b 12s cubic-bezier(.37,0,.63,1) -6s infinite alternate both}
/* round 2: each bank is two halves (complementary feathered masks, re-joined exactly by plus-lighter), so on the
   tap the clouds part left and right like a camera move through them; while idle they read as one plate */
#opening .opening-half{position:absolute;inset:0;pointer-events:none}
#opening [data-slot="opening-back"] .opening-half{background:url(../../assets/img/opening-clouds-back.webp) 50% 100%/cover no-repeat}
#opening [data-slot="opening-card"] .opening-half{background:url(../../assets/img/opening-clouds-front.webp) 50% 100%/cover no-repeat}
#opening .opening-half-l{-webkit-mask:linear-gradient(90deg,#000 42%,transparent 58%);mask:linear-gradient(90deg,#000 42%,transparent 58%)}
#opening .opening-half-r{-webkit-mask:linear-gradient(90deg,transparent 42%,#000 58%);mask:linear-gradient(90deg,transparent 42%,#000 58%);mix-blend-mode:plus-lighter}
#opening [data-slot].opening-split{background:none}
#opening [data-slot="opening-card"] .opening-half{animation:opening-push 14s cubic-bezier(.37,0,.63,1) infinite alternate both}
/* motes of light, two seamless rising layers (each tile is half the layer, so -50% loops cleanly) */
#opening [data-slot="opening-front"],#opening [data-slot="opening-flap"]{top:-4%;bottom:auto;height:216cqh;background-size:100% 50%;background-repeat:repeat-y}
#opening [data-slot="opening-front"]{background-image:
  radial-gradient(circle at 12% 9%,var(--c-silver-hi) 0 1.76px,transparent 3.38px),radial-gradient(circle at 31% 27%,var(--c-bulb) 0 2.16px,transparent 4.42px),
  radial-gradient(circle at 74% 14%,var(--c-silver-hi) 0 1.49px,transparent 3.12px),radial-gradient(circle at 88% 41%,var(--c-blush-100) 0 2.03px,transparent 4.16px),
  radial-gradient(circle at 57% 52%,var(--c-silver-hi) 0 1.35px,transparent 2.86px),radial-gradient(circle at 21% 66%,var(--c-bulb) 0 1.89px,transparent 3.9px),
  radial-gradient(circle at 66% 79%,var(--c-silver-hi) 0 2.16px,transparent 4.42px),radial-gradient(circle at 42% 91%,var(--c-ice) 0 1.62px,transparent 3.38px),
  radial-gradient(circle at 93% 85%,var(--c-silver-hi) 0 1.35px,transparent 2.86px);
  animation:opening-motes 23s linear infinite both,opening-twinkle 3.1s ease-in-out infinite alternate both}
#opening [data-slot="opening-flap"]{background-image:
  radial-gradient(circle at 6% 33%,var(--c-silver-hi) 0 1.22px,transparent 2.6px),radial-gradient(circle at 47% 18%,var(--c-silver-hi) 0 1.08px,transparent 2.34px),
  radial-gradient(circle at 81% 63%,var(--c-bulb) 0 1.35px,transparent 2.86px),radial-gradient(circle at 36% 74%,var(--c-silver-hi) 0 1.08px,transparent 2.34px),
  radial-gradient(circle at 62% 38%,var(--c-ice) 0 1.22px,transparent 2.6px),radial-gradient(circle at 15% 88%,var(--c-silver-hi) 0 1.35px,transparent 2.86px),
  radial-gradient(circle at 96% 8%,var(--c-blush-50) 0 1.22px,transparent 2.6px);
  animation:opening-motes 15s linear -4s infinite both,opening-twinkle 2.3s ease-in-out -1s infinite alternate both}
/* the light behind the mark */
#opening [data-slot="opening-seal"]{left:50%;top:var(--opening-ly);right:auto;bottom:auto;width:calc(var(--opening-logo) * 2.3);height:calc(var(--opening-logo) * 2.3);
  margin:calc(var(--opening-logo) * -1.15) 0 0 calc(var(--opening-logo) * -1.15);border-radius:50%;
  background:url(../../assets/img/opening-bloom.webp) 50% 50%/100% 100% no-repeat;
  animation:opening-in 1.8s ease-out both,opening-bloom 3s ease-in-out 1.8s infinite alternate both}
#opening [data-slot="opening-seal"]::before{content:none}
/* the couple's AH draws itself in light (the SVG animates itself, even before any JS) */
#opening .opening-env{left:calc(50% - var(--opening-logo) / 2);top:calc(var(--opening-ly) - var(--opening-logo) / 2);width:var(--opening-logo);height:var(--opening-logo);
  transform:none;border-radius:0;box-shadow:none;background:url(../../assets/svg/opening-logo.svg) 50% 50%/contain no-repeat;
  animation:opening-hover 5.3s ease-in-out 2.4s infinite alternate both}
#opening .opening-env::before{content:none}
#opening .opening-seal{left:calc(50% - var(--opening-logo) / 2);top:calc(var(--opening-ly) - var(--opening-logo) / 2);width:var(--opening-logo);height:var(--opening-logo);
  transform:none;background:none;box-shadow:none;z-index:2}
#opening .opening-seal img{display:none}
/* the type: an editorial reveal, a soft-edged wipe in each script's reading direction */
#opening .opening-title{top:47cqh;gap:12px;color:var(--c-forest)}
#opening .opening-title svg{-webkit-mask:linear-gradient(90deg,var(--c-ink) 42%,transparent 58%) 0 0/250% 100% no-repeat;mask:linear-gradient(90deg,var(--c-ink) 42%,transparent 58%) 0 0/250% 100% no-repeat}
#opening .opening-title .out-invited-en{animation:opening-type 1.2s var(--ease-out-expo) .45s both,opening-wipe-ltr 1.35s cubic-bezier(.33,.1,.2,1) .4s both}
#opening .opening-title .out-invited-ar{-webkit-mask-image:linear-gradient(270deg,var(--c-ink) 42%,transparent 58%);mask-image:linear-gradient(270deg,var(--c-ink) 42%,transparent 58%);
  -webkit-mask-position:100% 0;mask-position:100% 0;animation:opening-type 1.2s var(--ease-out-expo) .75s both,opening-wipe-rtl 1.35s cubic-bezier(.33,.1,.2,1) .7s both}
/* the language choice: two pearl pills that float on a breathing glow */
#opening .opening-langs{z-index:3;animation:opening-in-up 1.1s var(--ease-out-expo) 1s both}
/* the two pills never swap places when the page turns RTL */
#opening .opening-langs,#opening .opening-sound{direction:ltr}
#opening #lang-ar svg{scale:.88}
#opening .opening-langs::before{content:"";position:absolute;left:50%;top:50%;width:min(400px,100cqw);height:132px;margin:-66px 0 0 max(-200px,-50cqw);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--opening-light),color-mix(in srgb,var(--c-bulb) 30%,transparent) 55%,transparent);animation:opening-breathe 3.7s ease-in-out infinite alternate both}
#opening .opening-pill{position:relative;overflow:hidden;color:var(--c-forest);border:1px solid color-mix(in srgb,var(--c-silver-500) 70%,transparent);
  background:linear-gradient(162deg,var(--c-silver-hi) 0%,color-mix(in srgb,var(--c-blush-50) 75%,var(--c-silver-hi)) 34%,color-mix(in srgb,var(--c-ice) 50%,var(--c-silver-hi)) 68%,var(--c-ivory) 100%);
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--c-forest) 55%,transparent),inset 0 1px 0 color-mix(in srgb,var(--c-silver-hi) 85%,transparent);
  animation:opening-float 4.4s ease-in-out infinite alternate both;transition:scale var(--dur-press) var(--ease-out-soft)}
#opening .opening-pill+.opening-pill{animation-delay:-2.2s}
#opening .opening-pill::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;pointer-events:none;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--c-silver-hi) 90%,transparent) 50%,transparent);
  transform:translateX(-150%) skewX(-18deg);animation:opening-sheen 5.6s cubic-bezier(.45,0,.2,1) 2.2s infinite both}
#opening .opening-pill+.opening-pill::after{animation-delay:3s}
#opening .opening-pill svg{position:relative;z-index:1}
#opening .opening-pill:active{scale:.965}
#opening .opening-sound{color:var(--c-ink-2);animation:opening-in 1.2s ease-out 1.5s both}
/* live elements added by opening.js */
#opening .opening-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#opening .opening-fx-top{z-index:5}
#opening.opening-film .opening-langs,#opening.opening-film .opening-sound{visibility:hidden}
/* each video is in one language: the film shows only its own line of the title */
html:lang(en) #opening.opening-film .out-invited-ar,html:lang(ar) #opening.opening-film .out-invited-en{display:none}
#opening .opening-ripple{position:absolute;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,transparent 72%,color-mix(in srgb,var(--c-silver-hi) 85%,transparent) 86%,color-mix(in srgb,var(--c-bulb) 40%,transparent) 93%,transparent),
  radial-gradient(closest-side,color-mix(in srgb,var(--c-bulb) 22%,transparent),transparent)}
#opening .opening-veil{position:absolute;left:-8%;top:0;width:116%;height:100%;object-fit:cover;object-position:50% 100%;opacity:0;max-width:none}
#opening .opening-bloom{position:absolute;inset:0;opacity:0;background:radial-gradient(90cqw 50cqh at 50% 58%,color-mix(in srgb,var(--c-silver-hi) 80%,transparent),color-mix(in srgb,var(--c-bulb) 35%,transparent) 50%,transparent)}
#opening .opening-star{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;opacity:0}
#opening .opening-star svg{display:block;width:100%;height:100%;overflow:visible}
#opening .opening-star-halo{fill:var(--c-ice);opacity:.6}
#opening .opening-star-ray{fill:var(--c-silver-hi)}
#opening .opening-star-x{opacity:.85}
#opening .opening-star-core{fill:var(--c-diamond)}
#opening .opening-spark{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;opacity:0;pointer-events:none;will-change:transform,opacity}
#opening .opening-spark svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px rgba(220,235,242,.9))}
#opening .opening-trail svg{filter:none}
#opening .opening-dglow{position:absolute;left:0;top:0;width:150px;height:110px;opacity:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,253,246,.95),rgba(220,235,242,.55) 38%,rgba(246,213,196,.18) 70%,transparent)}
#opening .opening-inline{position:absolute;inset:0}
#opening .opening-inline svg{display:block;width:100%;height:100%}
#opening.opening-has-inline .opening-env{background:none}
#opening.opening-go .opening-langs,#opening.opening-go .opening-seal,#opening.opening-go .opening-sound{pointer-events:none}
#opening.opening-go .opening-env{animation:none}
html[data-film] #opening .opening-langs,html[data-film] #opening .opening-sound{visibility:hidden}
/* Calm mode (set by opening.js): everything rests in its final, visible state */
#opening.opening-still *,#opening.opening-still *::before,#opening.opening-still *::after{animation:none}
#opening.opening-still .opening-env{background-image:url(../../assets/svg/logo.svg)}
@media (prefers-reduced-motion:reduce){
  #opening .opening-env{background-image:url(../../assets/svg/logo.svg)}
}
@media (max-height:700px){
  #opening{--opening-logo:min(42cqw,22cqh);--opening-ly:30cqh}
  #opening .opening-title{top:46cqh;gap:10px}
}
@media (min-width:900px){
  #opening{--opening-logo:min(40cqw,21cqh);--opening-ly:31cqh}
  #opening .opening-title{top:48cqh}
}
@keyframes opening-drift-a{from{transform:translate3d(-21px,0,0)}to{transform:translate3d(21px,-4px,0)}}
@keyframes opening-drift-b{from{transform:translate3d(60px,0,0)}to{transform:translate3d(-60px,-8px,0)}}
@keyframes opening-push{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes opening-bloom{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.04)}}
@keyframes opening-motes{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes opening-twinkle{from{opacity:.55}to{opacity:1}}
@keyframes opening-spin{to{transform:rotate(360deg)}}
@keyframes opening-halo{from{transform:scale(.95)}to{transform:scale(1.05)}}
@keyframes opening-hover{from{translate:0 0}to{translate:0 -4px}}
@keyframes opening-in{from{opacity:0}}
@keyframes opening-in-up{from{opacity:0;transform:translate3d(0,16px,0)}}
@keyframes opening-type{from{opacity:0;transform:translate3d(0,12px,0)}}
@keyframes opening-wipe-ltr{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes opening-wipe-rtl{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:100% 0;mask-position:100% 0}}
@keyframes opening-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-3px,0)}}
@keyframes opening-breathe{from{opacity:.4}to{opacity:.9}}
@keyframes opening-sheen{0%{transform:translateX(-150%) skewX(-18deg)}24%,100%{transform:translateX(380%) skewX(-18deg)}}
}
/* V2: the diamond flares on the tap (sunburst + shock-ring), and a glint sweeps the silver mark while it waits */
@layer sections{
#opening .opening-burst{position:absolute;left:0;top:0;width:400px;height:400px;opacity:0;pointer-events:none;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(closest-side,var(--c-diamond) 0,var(--c-diamond) 3%,color-mix(in srgb,var(--c-bulb) 75%,transparent) 9%,color-mix(in srgb,var(--c-blush-200) 40%,transparent) 26%,transparent 62%),
    repeating-conic-gradient(from 3deg,var(--c-diamond) 0deg 1.1deg,transparent 1.1deg 9deg,color-mix(in srgb,var(--c-bulb) 85%,transparent) 9deg 9.8deg,transparent 9.8deg 17deg,color-mix(in srgb,var(--c-ice) 90%,transparent) 17deg 17.6deg,transparent 17.6deg 24deg);
  -webkit-mask:radial-gradient(closest-side,var(--c-ink) 4%,color-mix(in srgb,var(--c-ink) 55%,transparent) 30%,transparent 100%);mask:radial-gradient(closest-side,var(--c-ink) 4%,color-mix(in srgb,var(--c-ink) 55%,transparent) 30%,transparent 100%)}
#opening .opening-shock{position:absolute;left:0;top:0;width:300px;height:300px;opacity:0;pointer-events:none;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(closest-side,transparent 78%,color-mix(in srgb,var(--c-silver-hi) 90%,transparent) 90%,color-mix(in srgb,var(--c-blush-100) 50%,transparent) 95%,transparent)}
#opening .opening-env::after{content:none}
#opening.opening-go .opening-env::after,#opening.opening-still .opening-env::after{animation:none;opacity:0}
@keyframes opening-glint{0%{background-position:100% 0;opacity:1}38%,100%{background-position:0 0;opacity:1}}
@media (prefers-reduced-motion:reduce){#opening .opening-env::after{animation:none;opacity:0}}
}
/* review 1: the logo's solitaire throws one sharp ice-white four-point glint about every 3 s while it waits */
@layer sections{
#opening .opening-seal::after{content:"";position:absolute;left:calc(var(--opening-dx,18.1%) - 15px);top:calc(var(--opening-dy,41.1%) - 15px);width:30px;height:30px;pointer-events:none;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath fill='%23FFFFFF' d='M0-12C.55-1.3 1.3-.55 12 0C1.3.55.55 1.3 0 12C-.55 1.3-1.3.55-12 0C-1.3-.55-.55-1.3 0-12Z'/%3E%3Cpath fill='%23DCEBF2' d='M0-12C.55-1.3 1.3-.55 12 0C1.3.55.55 1.3 0 12C-.55 1.3-1.3.55-12 0C-1.3-.55-.55-1.3 0-12Z' transform='rotate(45) scale(.42)'/%3E%3Ccircle r='1.6' fill='%23FFFFFF'/%3E%3C/svg%3E") 50% 50%/contain no-repeat,
    radial-gradient(closest-side,color-mix(in srgb,var(--c-ice) 70%,transparent),transparent 70%);
  animation:none;display:none}
#opening.opening-go .opening-seal::after,#opening.opening-still .opening-seal::after{animation:none;opacity:0}
@keyframes opening-solitaire{0%,60%{opacity:0;transform:scale(.2) rotate(0deg)}68%{opacity:1;transform:scale(1.15) rotate(18deg)}78%{opacity:.55;transform:scale(.7) rotate(32deg)}90%,100%{opacity:0;transform:scale(.2) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){#opening .opening-seal::after{animation:none;opacity:0}}
}