/* ============================================================
 *  01-splash.css — Velvet Room splash screen
 * ============================================================ */

#scene-splash {
  cursor: pointer;
  contain: paint;
}

.splash-prism,
.splash-rays {
  position: absolute;
  left: 50%;
  top: 27%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  contain: paint;
  will-change: transform, opacity;
}

.splash-prism {
  width: min(52vmin, 620px);
  height: min(52vmin, 620px);
  margin: calc(min(52vmin, 620px) * -0.5) 0 0 calc(min(52vmin, 620px) * -0.5);
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(255, 247, 220, 0.18) 0%,
      rgba(255, 231, 169, 0.1) 18%,
      rgba(108, 180, 255, 0.09) 42%,
      rgba(212, 175, 55, 0.08) 58%,
      rgba(255, 255, 255, 0) 76%),
    conic-gradient(
      from 210deg,
      rgba(255, 230, 160, 0) 0deg,
      rgba(255, 225, 145, 0.06) 42deg,
      rgba(108, 180, 255, 0.07) 118deg,
      rgba(212, 175, 55, 0.08) 198deg,
      rgba(255, 225, 145, 0.05) 286deg,
      rgba(255, 230, 160, 0) 360deg
    );
  filter: blur(14px);
  mix-blend-mode: screen;
}

.splash-rays {
  width: min(68vmin, 820px);
  height: min(68vmin, 820px);
  margin: calc(min(68vmin, 820px) * -0.5) 0 0 calc(min(68vmin, 820px) * -0.5);
  border-radius: 50%;
  background: conic-gradient(
    from 202deg,
    rgba(255, 220, 100, 0) 0deg,
    rgba(255, 236, 185, 0.22) 6deg,
    rgba(255, 220, 100, 0) 10deg,
    rgba(255, 220, 100, 0) 38deg,
    rgba(255, 236, 185, 0.16) 44deg,
    rgba(255, 220, 100, 0) 52deg,
    rgba(255, 220, 100, 0) 112deg,
    rgba(255, 236, 185, 0.14) 118deg,
    rgba(255, 220, 100, 0) 126deg,
    rgba(255, 220, 100, 0) 202deg,
    rgba(255, 236, 185, 0.1) 208deg,
    rgba(255, 220, 100, 0) 216deg,
    rgba(255, 220, 100, 0) 282deg,
    rgba(255, 236, 185, 0.12) 288deg,
    rgba(255, 220, 100, 0) 296deg,
    rgba(255, 220, 100, 0) 360deg
  );
  -webkit-mask-image: radial-gradient(circle at center, #000 0 36%, rgba(0,0,0,0.9) 50%, transparent 76%);
  mask-image: radial-gradient(circle at center, #000 0 36%, rgba(0,0,0,0.9) 50%, transparent 76%);
  filter: blur(3px);
  mix-blend-mode: screen;
  transform: rotate(-14deg);
}

/* ============ Clock ============ */
.splash-clock {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  width: 260px;
  height: 260px;
  z-index: 3;
  opacity: 0;
  contain: layout;
  overflow: visible;
  will-change: transform, opacity;
  isolation: isolate;
}

.splash-clock::before,
.splash-clock::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.splash-clock::before {
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 205deg,
      rgba(255, 236, 185, 0) 0deg,
      rgba(255, 236, 185, 0.2) 18deg,
      rgba(255, 236, 185, 0) 36deg,
      rgba(255, 236, 185, 0) 126deg,
      rgba(255, 236, 185, 0.12) 144deg,
      rgba(255, 236, 185, 0) 160deg,
      rgba(255, 236, 185, 0) 252deg,
      rgba(255, 236, 185, 0.09) 266deg,
      rgba(255, 236, 185, 0) 282deg,
      rgba(255, 236, 185, 0) 360deg
    );
  filter: blur(8px);
  opacity: 0.46;
  mix-blend-mode: screen;
  animation: splashClockAuraOrbit 18s linear infinite;
}

.splash-clock::after {
  width: 290px;
  height: 290px;
  margin: -145px 0 0 -145px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 244, 212, 0.06),
    0 0 34px rgba(201, 164, 97, 0.2),
    inset 0 0 28px rgba(108, 180, 255, 0.08);
  opacity: 0.72;
  animation: splashClockGlowPulse 5.4s ease-in-out infinite;
}

.splash-clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Thicker "bezel" like an ornate pocket-watch ring */
  border: 3px double rgba(214, 178, 92, 0.95);
  background:
    radial-gradient(circle at 38% 34%,
      rgba(48, 69, 145, 0.38) 0%,
      rgba(24, 39, 89, 0.18) 22%,
      rgba(0, 0, 0, 0) 44%),
    radial-gradient(circle at center,
      rgba(18, 32, 78, 0.96) 0%,
      rgba(10, 20, 56, 0.98) 62%,
      rgba(4, 9, 28, 0.88) 100%);
  box-shadow:
    0 0 0 1px rgba(245, 230, 200, 0.12),
    0 0 0 6px rgba(24, 39, 89, 0.3),
    0 0 0 7px rgba(201, 164, 97, 0.55),
    0 0 40px rgba(201, 164, 97, 0.28),
    inset 0 0 24px rgba(201, 164, 97, 0.14),
    inset 0 -6px 24px rgba(0, 0, 0, 0.4);
}

/* The engraved SVG takes over the old ::before/::after decoration */
.splash-clock-engraving {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.35));
}

/* Counter-rotating inner gear sigil */
.splash-clock-gear {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  pointer-events: none;
  opacity: 0.85;
  animation: splashClockGearSpin 40s linear infinite reverse;
}
.splash-clock-gear svg { width: 100%; height: 100%; }

@keyframes splashClockGearSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.splash-clock-face::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    linear-gradient(140deg,
      rgba(255, 248, 222, 0.16) 0%,
      rgba(255, 248, 222, 0.05) 22%,
      rgba(255, 248, 222, 0) 42%,
      rgba(255, 248, 222, 0) 100%);
  pointer-events: none;
  opacity: 0.75;
}

.splash-clock-numerals {
  position: absolute;
  inset: 0;
  font-family: var(--font-display);
  color: var(--vr-gold);
  font-size: 1.05rem;
  letter-spacing: 1px;
  font-weight: 600;
}
.splash-clock-numerals span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  text-align: center;
  margin-left: -14px;
  margin-top: -11px;
  text-shadow:
    0 0 10px rgba(201, 164, 97, 0.45),
    0 0 2px rgba(255, 248, 222, 0.5);
  opacity: 0.95;
}
/* 12 positions — recalibrated for a 260px face with the gear-tooth ring.
 * Numerals sit at ~70px from center so they stay inside the engraved band. */
.splash-clock-numerals span:nth-child(1)  { transform: translate(0, -85px); }    /* XII */
.splash-clock-numerals span:nth-child(2)  { transform: translate(42px, -74px); } /* I */
.splash-clock-numerals span:nth-child(3)  { transform: translate(74px, -42px); } /* II */
.splash-clock-numerals span:nth-child(4)  { transform: translate(85px, 0); }     /* III */
.splash-clock-numerals span:nth-child(5)  { transform: translate(74px, 42px); }  /* IV */
.splash-clock-numerals span:nth-child(6)  { transform: translate(42px, 74px); }  /* V */
.splash-clock-numerals span:nth-child(7)  { transform: translate(0, 85px); }     /* VI */
.splash-clock-numerals span:nth-child(8)  { transform: translate(-42px, 74px); } /* VII */
.splash-clock-numerals span:nth-child(9)  { transform: translate(-74px, 42px); } /* VIII */
.splash-clock-numerals span:nth-child(10) { transform: translate(-85px, 0); }    /* IX */
.splash-clock-numerals span:nth-child(11) { transform: translate(-74px, -42px); }/* X */
.splash-clock-numerals span:nth-child(12) { transform: translate(-42px, -74px); }/* XI */

.splash-clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  background:
    linear-gradient(180deg,
      rgba(255, 248, 222, 0.98) 0%,
      rgba(245, 210, 120, 0.95) 25%,
      rgba(212, 175, 55, 0.92) 55%,
      rgba(178, 135, 46, 0.92) 100%);
  transform-origin: 50% 100%;
  box-shadow:
    0 0 12px rgba(212, 175, 55, 0.55),
    inset 0 1px 0 rgba(255, 248, 222, 0.6);
  z-index: 3;
}
/* Xelor-style hour hand: diamond-shaft with a lanceolate arrow tip */
.splash-clock-hand--hour {
  width: 11px;
  height: 72px;
  transform: translateX(-50%) rotate(40deg);
  clip-path: polygon(
    50% 0%,
    100% 16%,
    75% 22%,
    68% 95%,
    50% 100%,
    32% 95%,
    25% 22%,
    0%  16%
  );
}
/* Minute hand: longer, slimmer, with a pointed tip and a small catch */
.splash-clock-hand--minute {
  width: 8px;
  height: 105px;
  transform: translateX(-50%) rotate(-110deg);
  clip-path: polygon(
    50% 0%,
    100% 10%,
    78% 18%,
    72% 80%,
    86% 88%,
    50% 100%,
    14% 88%,
    28% 80%,
    22% 18%,
    0%  10%
  );
}

.splash-clock-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  /* Inner sapphire dome cradled in a gold bezel */
  background:
    radial-gradient(circle at 35% 30%,
      rgba(220, 240, 255, 0.98) 0%,
      rgba(130, 170, 240, 0.95) 18%,
      rgba(52, 92, 180, 0.95) 48%,
      rgba(18, 36, 96, 0.98) 100%);
  box-shadow:
    0 0 0 2px rgba(255, 248, 222, 0.18),
    0 0 0 4px rgba(212, 175, 55, 0.95),
    0 0 0 5px rgba(178, 135, 46, 0.7),
    0 0 16px rgba(108, 180, 255, 0.55),
    0 0 26px rgba(212, 175, 55, 0.35),
    inset 0 1px 3px rgba(255, 255, 255, 0.4);
  z-index: 5;
}

/* Red second hand — thin, pointed tip, with a small counter-weight below the pivot */
.splash-clock-hand--second {
  width: 2px;
  /* Extended below the pivot — we translate the bottom up so a small tail
   * shows on the opposite side of the center. */
  height: 130px;
  bottom: 46%;
  background:
    linear-gradient(180deg,
      rgba(255, 140, 150, 0.95) 0%,
      rgba(255, 90, 110, 0.95) 14%,
      rgba(232, 0, 29, 0.92) 76%,
      rgba(232, 0, 29, 0.92) 84%,
      rgba(160, 0, 20, 0.85) 100%);
  border-radius: 999px;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 84%;
  box-shadow: 0 0 10px rgba(232, 0, 29, 0.65);
  clip-path: polygon(
    50% 0%,
    100% 3%,
    70% 8%,
    62% 82%,
    80% 84%,
    62% 100%,
    38% 100%,
    20% 84%,
    38% 82%,
    30% 8%,
    0%  3%
  );
  animation: splashSecondHand 60s steps(60, end) infinite;
  z-index: 4;
}

/* ============ Runic rings orbiting the clock ============ */
.splash-clock-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  animation: splashClockRingsFade 1.6s 0.3s ease-out forwards;
}
.splash-ring {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.splash-ring svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.28));
}
.splash-ring--outer { animation: splashRingSpinCW 72s linear infinite; }
.splash-ring--mid   { animation: splashRingSpinCCW 48s linear infinite; }
.splash-ring--inner {
  animation: splashRingSpinCW 30s linear infinite,
             splashRingInnerPulse 4.8s ease-in-out infinite;
}

/* A soft gold aura breathing behind the clock face */
.splash-clock-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle,
      rgba(212, 175, 55, 0.22) 0%,
      rgba(108, 180, 255, 0.12) 40%,
      transparent 72%);
  filter: blur(8px);
  opacity: 0;
  animation:
    splashClockAuraFade 1.4s 0.1s ease-out forwards,
    splashClockAuraBreathe 5s ease-in-out infinite 1.4s;
}

/* Ensure face sits above the aura and rings */
.splash-clock-face {
  position: relative;
  z-index: 3;
}

@keyframes splashSecondHand {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

@keyframes splashRingSpinCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes splashRingSpinCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes splashRingInnerPulse {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

@keyframes splashClockRingsFade {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes splashClockAuraFade {
  from { opacity: 0; }
  to   { opacity: 0.9; }
}
@keyframes splashClockAuraBreathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* Mobile scaling for the orbit rings */
@media (max-width: 820px) {
  .splash-clock-rings {
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
  }
  .splash-clock-aura {
    width: 280px;
    height: 280px;
    margin: -140px 0 0 -140px;
  }
}
@media (max-width: 500px) {
  .splash-clock-rings {
    width: 340px;
    height: 340px;
    margin: -170px 0 0 -170px;
  }
  .splash-clock-aura {
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
  }
}

/* Perf-lite: keep ring rotations (they're cheap) but disable pulses.
 * The ring spins and second hand are visual signatures of the clock —
 * killing them makes the scene feel broken. */
html.perf-lite .splash-clock-aura {
  animation: none !important;
}
html.perf-lite .splash-ring--inner {
  /* Keep spin, drop the opacity pulse */
  animation: splashRingSpinCW 30s linear infinite !important;
}

/* ============ Title block ============ */
.splash-title {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  width: 90%;
  contain: paint;
}

.splash-title-small {
  font-family: var(--font-display);
  color: var(--vr-gold);
  font-size: 1rem;
  letter-spacing: 8px;
  margin-bottom: 18px;
  text-shadow: 0 0 8px rgba(201, 164, 97, 0.5);
  opacity: 0;
}

.splash-title-big {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--vr-cream);
  font-size: 5.5rem;
  letter-spacing: 14px;
  line-height: 1.05;
  white-space: pre-line;
  text-shadow:
    0 0 16px rgba(201, 164, 97, 0.55),
    0 4px 0 var(--vr-blue-pale);
}
.splash-title-big::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(76vw, 560px);
  height: 26px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 248, 222, 0.14) 28%,
    rgba(255, 255, 255, 0.58) 50%,
    rgba(255, 248, 222, 0.14) 72%,
    rgba(255, 255, 255, 0)
  );
  filter: blur(3px);
  translate: -50% -50%;
  rotate: -8deg;
  mix-blend-mode: screen;
  animation: splashTitleSweep 6.2s ease-in-out infinite;
  pointer-events: none;
}

html.perf-lite .splash-prism {
  opacity: 0.26 !important;
  filter: blur(12px) !important;
}
html.perf-lite .splash-rays {
  opacity: 0.12 !important;
  filter: blur(2px) !important;
}
html.perf-lite .splash-clock-face {
  box-shadow:
    0 0 18px rgba(201, 164, 97, 0.28),
    inset 0 0 16px rgba(201, 164, 97, 0.14);
}
html.perf-lite .splash-clock-numerals span,
html.perf-lite .splash-title-small,
html.perf-lite .splash-title-big {
  text-shadow: 0 0 8px rgba(201, 164, 97, 0.22) !important;
}
html.perf-lite .splash-clock-hand,
html.perf-lite .splash-clock-center {
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.5) !important;
}
html.perf-lite .splash-press {
  text-shadow: 0 0 6px rgba(201, 164, 97, 0.18) !important;
}
html.perf-lite .splash-clock::before {
  opacity: 0.28 !important;
  animation-duration: 24s !important;
}
html.perf-lite .splash-clock::after {
  opacity: 0.46 !important;
}

@keyframes splashClockAuraOrbit {
  from { transform: translateZ(0) rotate(0deg); }
  to { transform: translateZ(0) rotate(360deg); }
}

@keyframes splashClockGlowPulse {
  0%, 100% { opacity: 0.52; transform: scale(0.96); }
  50% { opacity: 0.82; transform: scale(1.04); }
}
@keyframes splashTitleSweep {
  0%, 24% { opacity: 0; transform: translateX(-180px); }
  34% { opacity: 0.95; }
  56% { opacity: 0.9; transform: translateX(180px); }
  100% { opacity: 0; transform: translateX(180px); }
}

.splash-title-big .char {
  display: inline-block;
  opacity: 0;
}

/* ============ Press Start ============ */
.splash-press {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--vr-gold);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 8px;
  z-index: 3;
  opacity: 0;
  text-shadow: 0 0 8px rgba(201, 164, 97, 0.46);
}