/* Stowe Holdings: splash screen (index.html, once per browser session)
   Moved out of landing.css so the Enterprise Balanced home page can use it on its own.
   Markup lives at the top of <body> in index.html; behaviour is assets/js/components/splash.js.
   The black logo lands on warm ivory while gold and teal orbits (echoing the rings in
   the mark) draw around it, a glint sweeps across it, the tagline pops in word by word
   over a gold rule, then the panel lifts away into the page. */
.splash {
  --vw: 1vw;
  --vh: 1vh;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(50% 45% at 50% 45%, rgba(216, 185, 121, 0.18), transparent 70%),
    radial-gradient(70% 55% at 50% 115%, rgba(117, 185, 176, 0.14), transparent 70%),
    #f8f5ef;
  color: #102936;
  cursor: pointer;
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1), visibility 0.9s;
}
.splash-stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.5s ease;
}

/* Logo with a glint clipped to its own shape */
.splash-mark {
  position: relative;
  isolation: isolate;
  animation: splash-focus 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.splash-orbits {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 128%;
  height: auto;
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}
.splash-orbit {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: splash-trace 1s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
.splash-orbit-a { stroke: rgba(184, 148, 79, 0.75); animation-delay: 0.15s; }
.splash-orbit-b { stroke: rgba(117, 185, 176, 0.65); animation-delay: 0.3s; }
.splash-comet {
  fill: #b8944f;
  filter: drop-shadow(0 0 6px rgba(216, 185, 121, 0.9));
  animation: splash-in 0.4s 0.55s ease-out both;
}
.splash-logo {
  display: block;
  width: clamp(220px, calc(30 * var(--vw)), 480px);
  max-width: calc(72 * var(--vw));
  height: auto;
}
.splash-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(216, 185, 121, 0.95) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  -webkit-mask: url("../../logos/stowe-logo-clear.png") center / 100% 100% no-repeat;
  mask: url("../../logos/stowe-logo-clear.png") center / 100% 100% no-repeat;
  animation: splash-glint 0.8s 0.55s ease-in-out both;
}

.splash-rule {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b8944f, transparent);
  animation: splash-draw 0.6s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.splash-line {
  margin: 0;
  font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #4a5d6b;
}
.splash-line span {
  display: inline-block;
  animation: splash-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: calc(0.7s + var(--i) * 0.09s);
}
.splash-line i { font-style: normal; color: #b8944f; padding: 0 0.5em; animation: splash-in 0.4s 0.7s ease-out both; }
.splash-stamp {
  margin: -6px 0 0;
  padding: 6px 12px;
  border: 1px solid rgba(184, 148, 79, 0.55);
  border-radius: 100px;
  font: italic 500 15px/1 Newsreader, Georgia, serif;
  color: #8a6a32;
  animation: splash-stamp 0.5s 1.1s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

/* Exit: the panel lifts away, the logo drifting up a little faster */
.splash.is-done { transform: translateY(-100%); visibility: hidden; pointer-events: none; }
.splash.is-done .splash-stage { transform: translateY(calc(-14 * var(--vh))); opacity: 0; }

html.splash-lock, html.splash-lock body { overflow: hidden; }

@keyframes splash-focus { from { opacity: 0; transform: scale(0.86); filter: blur(10px); } }
@keyframes splash-trace { to { stroke-dashoffset: 0; } }
@keyframes splash-pop { from { opacity: 0; transform: translateY(0.9em) scale(0.8); } }
@keyframes splash-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.4); } }
@keyframes splash-glint { to { background-position: 150% 0; } }
@keyframes splash-draw { from { transform: scaleX(0); opacity: 0; } }
@keyframes splash-in { from { opacity: 0; } }

@media (max-width: 640px) {
  .splash-line { font-size: 10px; letter-spacing: 0.18em; }
}
@media (prefers-reduced-motion: reduce) {
  .splash *, .splash *::before { animation: none !important; }
  .splash-shine, .splash-comet { display: none; }
  .splash-orbit { stroke-dashoffset: 0; }
  .splash, .splash-stage { transition: opacity 0.4s ease, visibility 0.4s; }
  .splash.is-done { transform: none; opacity: 0; }
}