/* pool (fx module): lotus lights, the guest's own light, the "Tap the sky" prompt */
@layer systems{
  .pool-lotus-host{position:absolute;inset:0;pointer-events:none;z-index:5}
  /* every lotus moves on the compositor: a slow drift (translate) on the outer box, a bob (transform) on the
     inner one, a breathing glow; phases and durations are set once per lotus (pool.js) */
  .pool-lotus{position:absolute;aspect-ratio:120/84;transform:translate(-50%,-62%);animation:pool-drift var(--dd,12s) var(--ddl,0s) ease-in-out infinite alternate}
  .pool-lotus-bob{position:absolute;inset:0;animation:pool-bob var(--bd,6s) var(--bdl,0s) ease-in-out infinite alternate}
  .pool-lotus-img{position:absolute;inset:0;width:100%;height:100%;display:block}
  .pool-lotus-glow{position:absolute;left:50%;top:62%;width:150%;height:auto;transform:translate(-50%,-34%);transform-origin:50% 34%;opacity:.85;display:block;
    animation:pool-glow var(--gd,2s) var(--gdl,0s) ease-in-out infinite alternate}
  @keyframes pool-drift{from{translate:calc(var(--dx,12px) * -1) 0}to{translate:var(--dx,12px) 0}}
  @keyframes pool-bob{from{transform:translateY(-1.5px) rotate(-1.2deg)}to{transform:translateY(1.5px) rotate(1.2deg)}}
  @keyframes pool-glow{from{opacity:.74;transform:translate(-50%,-34%) scale(.95,.86)}to{opacity:.95;transform:translate(-50%,-34%) scale(1.05,1.1)}}
  .pool-lotus-host:is(.is-paused,.is-idle) :is(.pool-lotus,.pool-lotus-bob,.pool-lotus-glow,.pool-lotus-halo){animation-play-state:paused}
  :root.is-reduced :is(.pool-lotus,.pool-lotus-bob,.pool-lotus-glow){animation:none}
  @media (prefers-reduced-motion:reduce){:is(.pool-lotus,.pool-lotus-bob,.pool-lotus-glow){animation:none}}
  /* the guest's own light: a quarter bigger, warmer and brighter, a soft additive halo about twice the others'
     glow, and their initial in silver on the centre petals, well above the waterline */
  .pool-lotus--own{z-index:2;scale:1.25}
  .pool-lotus--own .pool-lotus-img{filter:brightness(1.07) saturate(1.08)}
  .pool-lotus--own .pool-lotus-glow{opacity:1;width:185%}
  .pool-lotus-halo{position:absolute;left:50%;top:44%;width:190%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
    background:radial-gradient(closest-side,rgba(255,236,190,.9),rgba(255,214,150,.42) 46%,rgba(255,214,150,0))}
  .pool-lotus--own.is-landing .pool-lotus-halo{animation:pool-own-breathe 4s var(--ease-silk) 1 both}
  @keyframes pool-own-breathe{0%{transform:scale(.3);opacity:0}10%{transform:scale(1.55);opacity:1}32%{transform:scale(1.08)}54%{transform:scale(1.34)}78%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
  .pool-lotus-tag{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);font-family:'Cormorant Garamond','Amiri',serif;font-style:italic;font-weight:700;
    font-size:9.5px;line-height:1;color:var(--c-silver-ink);text-shadow:0 0 1.5px rgba(255,248,232,.95),0 .4px 0 rgba(255,255,255,.8);pointer-events:none}
  :root:lang(ar) .pool-lotus-tag{font-style:normal;font-family:'Amiri',serif;font-size:9.5px;top:53%}
  .pool-lotus-tag:empty{display:none}
  /* the card's lotus on its way to the pool (a copy, above everything, never in the way) */
  .pool-fly{position:absolute;z-index:60;pointer-events:none;transform-origin:50% 62%;will-change:transform}
  .pool-fly>:is(.rsvp-guest,.rsvp-back-guest){position:absolute;inset:0;width:100%;height:100%;margin:0}
  .pool-fly svg{display:block;width:100%;height:100%;overflow:visible}
  .pool-fly svg .rsvp-flame{transform-box:fill-box;transform-origin:50% 90%}
  .pool-fly .rsvp-initial{position:absolute;left:50%;top:46%;translate:-50% -50%;font:italic 700 12px/1 'Cormorant Garamond','Amiri',serif;color:var(--c-silver-ink);text-shadow:0 0 2px rgba(255,248,232,.95)}
  .pool-fly .rsvp-initial:empty{display:none}
  .pool-tapsky{position:absolute;left:0;right:0;top:214px;margin:0 auto;width:max-content;max-width:280px;padding:6px 18px;border-radius:var(--r-chip);
    background:radial-gradient(closest-side,rgba(16,42,48,.5),rgba(16,42,48,0));color:var(--c-ivory);text-shadow:0 0 12px rgba(255,231,179,.55),0 1px 2px rgba(16,42,48,.6);
    font:500 var(--fs-lead)/1.3 var(--font-serif);font-style:italic;letter-spacing:.01em;opacity:0;transform:translateY(8px);
    transition:opacity var(--dur-card) var(--ease-out-soft),transform var(--dur-card) var(--ease-out-expo);pointer-events:none}
  /* a tiny four-point star breathes after the words: the sky is the thing to touch */
  .pool-tapsky::after{content:"";display:inline-block;width:9px;height:9px;margin-inline-start:8px;vertical-align:.15em;
    background:radial-gradient(closest-side,var(--c-diamond) 0 30%,rgba(255,255,255,0)),linear-gradient(var(--c-diamond),var(--c-diamond)) center/1px 100% no-repeat,linear-gradient(var(--c-diamond),var(--c-diamond)) center/100% 1px no-repeat;
    opacity:.9}
  .pool-tapsky.is-on::after{animation:pool-twinkle 1.6s var(--ease-silk) infinite alternate}
  @keyframes pool-twinkle{from{transform:scale(.6) rotate(0);opacity:.5}to{transform:scale(1.15) rotate(45deg);opacity:1}}
  .pool-tapsky.is-on{opacity:1;transform:none}
  :root:lang(ar) .pool-tapsky{font-style:normal}
}