/* ============================================================
   splash.css - Vail Digital splash screen
   Shared by every page. Pairs with /assets/splash.js.

   Markup each page needs (replaces the old inline block):
     <div id="preloader" role="status" aria-label="Loading"></div>

   #preloader must exist AT PARSE TIME. The mobile hero script
   reads it synchronously at end of body and pins its reveal
   until #preloader gets .loaded - see the contract in splash.js.

   CACHE
   -----
   Every page links this file with ?v=<date>. After editing it, bump that
   query on ALL pages or returning visitors keep the old copy until their
   cache expires. Current: v=20260915c

     python3 - <<'EOF'
     import re, glob
     V = 'YYYYMMDD'
     p = re.compile(r'((?:href|src)=")(/assets/(?:flow|splash)\.(?:css|js))(\?v=[^"]*)?(")')
     for f in glob.glob('*.html'):
         s = open(f).read()
         open(f, 'w').write(p.sub(lambda m: m.group(1) + m.group(2) + '?v=' + V + m.group(4), s))
     EOF

   ============================================================ */

#preloader{
  position:fixed;inset:0;z-index:99999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  background:radial-gradient(120% 80% at 50% 120%, var(--cyan-glow, rgba(0,229,204,.12)) 0%, transparent 60%), var(--bg-deep, #06080d);
  transition:opacity .42s ease, visibility .42s ease;
}
#preloader.loaded{opacity:0;visibility:hidden}
#preloader img{display:block}

/* Scroll lock while the splash is up. Without this the page can be
   scrolled behind the curtain, which breaks the whole effect. */
html.splash-locked, html.splash-locked body{overflow:hidden;overscroll-behavior:none}

/* ---------- shared pieces ---------- */
.sp-mark{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 6px 24px rgba(0,0,0,.45))}
.sp-word{
  font-family:'Outfit',sans-serif;font-size:.75rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--text-muted,#7c9499);padding-left:.42em;white-space:nowrap;
}
.sp-word .scr{color:var(--cyan,#00e5cc);opacity:.55}

/* ============ VARIANT: current (default) ============ */
#preloader[data-variant="current"] .sp-mark{
  opacity:0;transform:translateY(10px) scale(.94);
  animation:sp-in .8s cubic-bezier(.2,.8,.2,1) forwards .15s;
}
#preloader[data-variant="current"] .sp-word{opacity:0;animation:sp-fade .5s ease forwards .8s}
.sp-bar{width:180px;height:2px;background:var(--border,rgba(255,255,255,.15));border-radius:2px;overflow:hidden;position:relative}
.sp-bar::after{
  content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--cyan,#00e5cc),transparent);
  animation:sp-sweep 1.1s ease-in-out infinite;
}
.sp-range{position:absolute;bottom:0;left:0;right:0;width:100%;height:38%;opacity:.5}
.sp-range .fill{fill:var(--cyan,#00e5cc);opacity:.06}
.sp-range .ridge{
  fill:none;stroke:var(--cyan,#00e5cc);opacity:.28;stroke-width:1.5;
  stroke-dasharray:1200;stroke-dashoffset:1200;animation:sp-ridge 2.2s ease forwards .2s;
}

/* ============ VARIANT: B - footage / still ============ */
#preloader[data-variant="b"]{gap:20px}
.sp-video,.sp-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.sp-still{transform:scale(1.06);animation:sp-drift 6s ease-out forwards}
.sp-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,13,.55),rgba(6,8,13,.9))}
#preloader[data-variant="b"] .sp-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px}
#preloader[data-variant="b"] .sp-mark{opacity:0;transform:scale(1.08);animation:sp-bin 1s cubic-bezier(.2,.8,.2,1) forwards .15s}
.sp-title{
  font-family:'Syne','Outfit',sans-serif;font-weight:800;font-size:2rem;color:#fff;
  opacity:0;animation:sp-fade .7s ease forwards .55s;
}
.sp-sub{
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan,#00e5cc);
  padding-left:.32em;opacity:0;animation:sp-fade .6s ease forwards .8s;
}
@media (max-width:820px){
  #preloader[data-variant="b"] .sp-mark{width:150px;height:150px}
  .sp-title{font-size:1.6rem}
}

/* ============ VARIANT: C - mark flies to the nav ============ */
#preloader[data-variant="c"]{background:none}
.sp-ground{
  position:absolute;inset:0;transition:opacity .62s cubic-bezier(.4,0,.2,1);
  background:radial-gradient(120% 80% at 50% 120%, var(--cyan-glow,rgba(0,229,204,.12)) 0%, transparent 60%), var(--bg-deep,#06080d);
}
.sp-ring{
  position:absolute;top:50%;left:50%;width:230px;height:230px;margin:-115px 0 0 -115px;
  border:1px solid rgba(0,229,204,.3);border-radius:50%;
  opacity:0;transform:scale(.7);animation:sp-ring 1.1s ease forwards .1s;
}
/* Parked at its FINAL slot, inverted to centre by transform. Only transform
   animates, so the flight is compositor-driven. */
.sp-flyer{
  position:absolute;z-index:3;object-fit:contain;opacity:0;
  transform-origin:50% 50%;will-change:transform;
  animation:sp-cin .45s ease forwards .05s;
}
#preloader[data-variant="c"] .sp-word{
  position:absolute;z-index:3;left:0;right:0;text-align:center;
  opacity:0;animation:sp-fade .38s ease forwards .26s;transition:opacity .22s ease;
}
/* The page settles in behind rather than being uncovered. */
.splash-settle{transition:transform .95s cubic-bezier(.3,0,.2,1),opacity .7s ease}

@keyframes sp-in{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sp-bin{to{opacity:1;transform:scale(1)}}
@keyframes sp-cin{to{opacity:1}}
@keyframes sp-fade{to{opacity:1}}
@keyframes sp-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(330%)}}
@keyframes sp-ridge{to{stroke-dashoffset:0}}
@keyframes sp-drift{to{transform:scale(1)}}
@keyframes sp-ring{60%{opacity:.9}to{opacity:0;transform:scale(1.5)}}

@media (prefers-reduced-motion:reduce){
  #preloader *{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .sp-range .ridge{stroke-dashoffset:0}
  .sp-bar::after{width:100%}
  .splash-settle{transition:none}
}