/* ANORA — شاشة الافتتاح «الموجة الذهبية».
   Self-contained on purpose: loaded by the homepage (home.css) AND by
   booking.php / account.php (anora.css), so it must not rely on either
   stylesheet's custom properties. Runs purely on CSS animations. */
/* ═══════════ splash — الموجة الذهبية (أول دخول في الجلسة) ═══════════
   Runs entirely on CSS animations: if JavaScript never executes, the splash
   still opens and disappears on its own. The only JS is the session gate. */
#splash{position:fixed;inset:0;z-index:9999;display:none;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#FFF6E2,#EFE3CE)}
html.splash #splash{display:grid;animation:spOut .5s cubic-bezier(.19,1,.22,1) .95s forwards}
@keyframes spOut{to{clip-path:circle(150% at 50% 45%);opacity:0;visibility:hidden}}
#splash i{position:absolute;display:block}
#splash .sun{top:-14%;inset-inline-start:-8%;width:46vmax;height:46vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(246,200,106,.55),rgba(246,200,106,0) 65%);opacity:0;
  animation:spFade .5s ease forwards}
#splash .wave{inset-inline:-12%;bottom:0;height:78%;border-radius:44% 46% 0 0 / 16% 15% 0 0;transform:translateY(102%)}
#splash .w1{background:linear-gradient(180deg,rgba(226,201,148,.96),rgba(194,154,78,.97) 55%,rgba(150,105,52,.98));
  animation:spSwell 1.15s cubic-bezier(.16,1,.3,1) forwards}
#splash .w2{background:linear-gradient(180deg,rgba(243,228,193,.85),rgba(217,190,134,.7));inset-inline:-18%;height:72%;
  animation:spSwell2 1.15s cubic-bezier(.16,1,.3,1) .09s forwards}
#splash .ring{top:47%;left:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;
  border:2px solid rgba(194,154,78,.9);opacity:0;z-index:4;animation:spRipple .9s cubic-bezier(.16,1,.3,1) forwards}
#splash .ring:nth-of-type(3){border-color:rgba(140,97,48,.75);animation-delay:.12s}
#splash .ring:nth-of-type(4){animation-delay:.24s}
#splash .bub{bottom:6%;width:16px;height:16px;border-radius:50%;z-index:4;opacity:0;
  background:radial-gradient(circle at 34% 30%,#fff,rgba(255,248,232,.6) 40%,rgba(217,190,134,.45));
  box-shadow:0 0 0 1px rgba(255,250,238,.65) inset;animation:spRise 1.05s ease-out forwards}
#splash .bub:nth-of-type(5){left:16%;width:22px;height:22px;animation-delay:.04s}
#splash .bub:nth-of-type(6){left:33%;width:13px;height:13px;animation-delay:.19s}
#splash .bub:nth-of-type(7){left:59%;width:26px;height:26px;animation-delay:.1s}
#splash .bub:nth-of-type(8){left:78%;width:15px;height:15px;animation-delay:.26s}
#splash .logo{position:relative;z-index:5;display:block;width:min(280px,60vw);aspect-ratio:3.883/1;
  background-color:#14211A;opacity:0;transform:scale(.9);
  -webkit-mask:url(../brand/logo/anora-wordmark.png) no-repeat center/contain;
          mask:url(../brand/logo/anora-wordmark.png) no-repeat center/contain;
  animation:spPop .5s cubic-bezier(.34,1.56,.64,1) .16s forwards}
@keyframes spSwell{0%{transform:translateY(102%)}55%{transform:translateY(34%)}100%{transform:translateY(56%)}}
@keyframes spSwell2{0%{transform:translateY(104%)}55%{transform:translateY(46%)}100%{transform:translateY(68%)}}
@keyframes spRipple{0%{opacity:.95;transform:scale(.35)}100%{opacity:0;transform:scale(10)}}
@keyframes spRise{0%{opacity:0;transform:translateY(0) scale(.7)}22%{opacity:.95}100%{opacity:0;transform:translateY(-64vh) scale(1)}}
@keyframes spPop{to{opacity:1;transform:none}}
@keyframes spFade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){html.splash #splash{display:none}}