/* Splash screen: the emblem's snakes wind round the staff beside the pharmacy name while the page loads. */
#splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#fff;transition:opacity .6s ease,visibility .6s ease}
#splash.is-hiding{opacity:0;visibility:hidden}
.no-splash #splash{display:none}
html.splash-on body{overflow:hidden}
.splash-inner{display:grid;justify-items:center;gap:34px;padding:24px}
.splash-row{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,32px);direction:ltr}
.splash-mark{position:relative;display:grid;place-items:center;flex:none}
.splash-ring{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,rgba(8,127,112,.12) 0,rgba(8,127,112,.04) 62%,rgba(8,127,112,0) 100%);animation:splash-ring 2.8s ease-in-out infinite}
.splash-emblem{position:relative;display:block;height:clamp(230px,42vh,350px);width:auto;aspect-ratio:360/850;overflow:visible;animation:splash-in 1s ease-in-out both}
.splash-top{transform-box:view-box;transform-origin:193px 283px;animation:splash-sway 3.2s ease-in-out 1s infinite}
.splash-top image{mix-blend-mode:multiply}
.splash-glow{transform-box:fill-box;transform-origin:center;animation:splash-glow 1.9s ease-in-out 1s infinite}
.splash-shine{opacity:0;animation:splash-shine 1.9s ease-in-out 1s infinite}
.splash-brand{display:grid;gap:6px;justify-items:start;text-align:start;animation:splash-wipe 1.3s ease-in-out 2s both}
.splash-name{font:800 clamp(34px,10vw,56px)/1 Inter,Arial,sans-serif;letter-spacing:.06em;color:transparent;background:linear-gradient(105deg,#172b2a 0,#172b2a 42%,#8fc9bf 50%,#172b2a 58%,#172b2a 100%) 140% 0/260% 100%;-webkit-background-clip:text;background-clip:text;animation:splash-sheen 1.3s ease-in-out 2.7s both}
.splash-sub{font:600 clamp(11px,3.2vw,15px)/1.2 Inter,Arial,sans-serif;letter-spacing:.42em;color:#087f70}
.splash-ar{font:700 clamp(18px,5vw,26px)/1.3 "Readex Pro",Tahoma,Arial,sans-serif;direction:rtl;color:#8c1d3a}
.splash-bar{position:relative;width:120px;height:3px;overflow:hidden;border-radius:3px;background:#e4eeeb;opacity:0;animation:splash-fade .6s ease .6s forwards}
.splash-bar::after{content:"";position:absolute;inset-block:0;inset-inline-start:-45%;width:45%;border-radius:3px;background:linear-gradient(90deg,#4aa63c,#087f70);animation:splash-bar 1.5s ease-in-out infinite}
html[dir="rtl"] .splash-bar::after{animation-name:splash-bar-rtl}
@keyframes splash-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes splash-ring{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.06);opacity:1}}
@keyframes splash-sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.6deg)}}
@keyframes splash-glow{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.18);opacity:1}}
@keyframes splash-shine{0%,100%{opacity:0}50%{opacity:.75}}
@keyframes splash-wipe{from{clip-path:inset(-10% 100% -10% -4%);opacity:0}to{clip-path:inset(-10% -4% -10% -4%);opacity:1}}
@keyframes splash-sheen{from{background-position:140% 0}to{background-position:-40% 0}}
@keyframes splash-bar{from{transform:translateX(0)}to{transform:translateX(340%)}}
@keyframes splash-bar-rtl{from{transform:translateX(0)}to{transform:translateX(-340%)}}
@keyframes splash-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #splash{transition-duration:.01ms}
  .splash-ring,.splash-emblem,.splash-top,.splash-glow,.splash-shine,.splash-brand,.splash-name,.splash-bar,.splash-bar::after{animation:none}
  .splash-name{color:#172b2a;background:none}
  .splash-bar{opacity:1}
  .splash-bar::after{inset-inline-start:0;width:100%}
}