/*
 * Yachty loading screen. Single source of truth for BOTH the instant pre-React splash in index.html (#boot-splash)
 * and the React <SplashScreen> (src/components/SplashScreen.tsx), which render the same DOM so the hand-off is seamless.
 * Always dark: it is a brand moment, independent of the Dark/Daylight app theme.
 *
 *  .ys-enter   on the root = play the entrance animations (the boot version omits it: it is already in its final state)
 *  [data-phase="out"]      = fade out
 */
:root { --ys-logo: clamp(128px, 36vmin, 208px); }
html { background: #071B2A; }

.ys-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: #F8FBFD;
  font-family: 'Space Grotesk', system-ui, 'Segoe UI', sans-serif;
  background: radial-gradient(ellipse 100% 75% at 50% 36%, #123a5c 0%, #0b263c 36%, #071B2A 62%, #040f19 100%);
  -webkit-user-select: none; user-select: none;
}
.ys-splash[data-phase="out"] { animation: ys-out .6s cubic-bezier(.4, 0, .2, 1) forwards; pointer-events: none; }
@keyframes ys-out { to { opacity: 0; transform: scale(1.035); } }

.ys-group {
  position: relative; display: flex; flex-direction: column; align-items: center;
  transform: translateY(-3vh); padding: 0 24px; text-align: center;
}

/* ── logo + halo ── */
.ys-mark { position: relative; width: var(--ys-logo); height: var(--ys-logo); display: grid; place-items: center; }
.ys-glow {
  position: absolute; inset: -34%; border-radius: 50%;
  background: radial-gradient(circle, rgba(53,214,248,.30) 0%, rgba(53,214,248,.10) 38%, rgba(53,214,248,0) 66%);
  animation: ys-breathe 3.6s ease-in-out infinite;
}
@keyframes ys-breathe { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }

/* sonar pings expanding from the mark */
.ys-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(53,214,248,.5); opacity: 0;
  animation: ys-ping 3.9s cubic-bezier(.22,.6,.3,1) infinite;
}
.ys-ring-2 { animation-delay: 1.3s; }
.ys-ring-3 { animation-delay: 2.6s; }
@keyframes ys-ping { 0% { transform: scale(.62); opacity: 0; } 12% { opacity: .5; } 100% { transform: scale(2.5); opacity: 0; } }

/* compass orbit: a slow dotted ring plus a bright arc that sweeps round */
.ys-orbit { position: absolute; inset: -7%; width: 114%; height: 114%; overflow: visible; }
.ys-orbit circle { fill: none; transform-box: view-box; transform-origin: center; }
.ys-orbit-dots { stroke: rgba(154,238,255,.35); stroke-width: .5; stroke-dasharray: .6 3.2; stroke-linecap: round; animation: ys-spin 40s linear infinite; }
.ys-orbit-arc { stroke: #35D6F8; stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 34 268; animation: ys-spin 2.8s linear infinite; filter: drop-shadow(0 0 3px rgba(53,214,248,.9)); }
@keyframes ys-spin { to { transform: rotate(360deg); } }

.ys-logo { position: relative; width: 100%; height: 100%; object-fit: contain; filter: blur(0px) drop-shadow(0 6px 22px rgba(53,214,248,.28)); }
/* light sweep that only shows inside the logo silhouette */
.ys-sweep {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/yachty-logo.png) center / contain no-repeat; mask: url(/yachty-logo.png) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%) 160% 0 / 300% 100% no-repeat;
  animation: ys-sweep 3s ease-in-out 1.2s infinite;
}
@keyframes ys-sweep { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }

/* ── wordmark, tagline, progress ── */
.ys-word {
  display: flex; margin: clamp(20px, 5vmin, 34px) -.22em 0 0;
  font-weight: 700; font-size: clamp(30px, 8vmin, 46px); letter-spacing: .22em; line-height: 1; text-transform: uppercase;
  color: #35D6F8; text-shadow: 0 0 26px rgba(53,214,248,.45);
}
.ys-word span { display: inline-block; }
.ys-tag { margin: 14px 0 0; font-size: clamp(13px, 3.4vmin, 16px); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(248,251,253,.72); }
.ys-bar { position: relative; margin-top: clamp(26px, 7vmin, 44px); width: min(220px, 56vw); height: 3px; border-radius: 3px; background: rgba(53,214,248,.16); overflow: hidden; }
.ys-bar i {
  position: absolute; inset: 0 auto 0 0; width: 42%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(53,214,248,0), #35D6F8 40%, #9AEEFF 60%, rgba(154,238,255,0));
  animation: ys-bar 1.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes ys-bar { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.ys-status { margin: 12px 0 0; min-height: 1.4em; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8EA0B8; }
.ys-status span { display: inline-block; animation: ys-swap .5s ease-out both; }
@keyframes ys-swap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── drifting waves along the bottom ── */
.ys-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; pointer-events: none; }
.ys-wave { position: absolute; left: 0; right: 0; bottom: 0; display: block; background-repeat: repeat-x; background-size: 1200px 100%; }
.ys-wave-1 {
  height: 100%; animation: ys-wave 16s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 62C150 22 300 102 450 62S750 22 900 62S1050 102 1200 62V120H0Z' fill='%2335D6F8' fill-opacity='.07'/%3E%3C/svg%3E");
}
.ys-wave-2 {
  height: 76%; animation: ys-wave 11s linear infinite reverse;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C200 40 400 100 600 70S1000 40 1200 70V120H0Z' fill='%2335D6F8' fill-opacity='.11'/%3E%3C/svg%3E");
}
@keyframes ys-wave { to { background-position-x: -1200px; } }

/* ── login page brand panel: the splash backdrop without the fixed full-screen positioning ── */
.ys-brand-panel {
  color: #F8FBFD;
  font-family: 'Space Grotesk', system-ui, 'Segoe UI', sans-serif;
  background: radial-gradient(ellipse 100% 75% at 50% 36%, #123a5c 0%, #0b263c 36%, #071B2A 62%, #040f19 100%);
}

.ys-headline { margin: 48px 0 0; max-width: 20rem; font-size: 26px; font-weight: 700; line-height: 1.2; color: #F8FBFD; }
.ys-trust { font-size: 12px; color: rgba(248,251,253,.7); }
.ys-trust-star { color: #35D6F8; opacity: .8; }

/* ── entrance (React splash when there was no boot splash to hand off from) ── */
.ys-enter .ys-logo { animation: ys-logo-in 1s cubic-bezier(.22,1,.36,1) both; }
@keyframes ys-logo-in {
  from { opacity: 0; transform: scale(.82) translateY(10px); filter: blur(10px) drop-shadow(0 6px 22px rgba(53,214,248,.28)); }
  to   { opacity: 1; transform: none; filter: blur(0px) drop-shadow(0 6px 22px rgba(53,214,248,.28)); }
}
.ys-enter .ys-orbit { animation: ys-fade .8s .5s both; }
.ys-enter .ys-word span { animation: ys-letter .7s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.75s + var(--i, 0) * .07s); }
@keyframes ys-letter { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.ys-enter .ys-tag { animation: ys-fade .8s 1.35s both; }
.ys-enter .ys-bar, .ys-enter .ys-status { animation: ys-fade .6s 1.5s both; }
@keyframes ys-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ys-glow, .ys-orbit-dots, .ys-sweep, .ys-wave { animation: none; }
  .ys-ring { display: none; }
  .ys-orbit-arc { animation-duration: 9s; }
  .ys-bar i { animation: none; width: 100%; opacity: .45; }
  .ys-enter *, .ys-status span { animation-duration: .01s !important; animation-delay: 0s !important; }
}