/* =====================================================
   SPLASH SCREEN
   First-session only. Two temple-door panels that
   slide open to reveal the site underneath.

   The splash is now controlled by Splash.start() in
   js/splash.js — text animation only fires when the
   #splash element has the .is-active class. Until then
   the closed doors form the backdrop for the info
   overlay (see js/info-overlay.js).
   ===================================================== */

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  overflow: hidden;
}

/* ── Door panels ── */
.splash-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;

  /* Dark warm wood — subtle vertical grain via layered gradients */
  background-color: #0B0805;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 18px,
      rgba(255,255,255,0.012) 18px,
      rgba(255,255,255,0.012) 19px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 6px,
      rgba(0,0,0,0.08) 6px,
      rgba(0,0,0,0.08) 7px
    );

  will-change: transform;
  transition: transform 1.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.splash-door-left  { left: 0; transform-origin: left center; }
.splash-door-right { right: 0; transform-origin: right center; }

/* Inner panel recess — decorative border inset on each door half */
.splash-door::before {
  content: '';
  position: absolute;
  inset: 28px 18px;
  border: 0.5px solid rgba(186, 141, 66, 0.18);
  border-radius: 2px;
  pointer-events: none;
}

/* The centre seam — a hair-thin gold line where the two doors meet */
.splash-door-left::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 20%,
    rgba(186, 141, 66, 0.55) 80%,
    transparent 100%
  );
}

/* ── Text ── */
.splash-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #FFFFFF;
  font-family: 'Savor', 'Montserrat', serif;
  letter-spacing: 0.06em;
  user-select: none;
  gap: 10px;

  /* Hidden by default — animation runs only when #splash.is-active */
  opacity: 0;
}

.splash-text-jai {
  display: block;
  font-size: clamp(22px, 6vw, 36px);
  opacity: 0.75;
  letter-spacing: 0.18em;
}

.splash-text-name {
  display: block;
  font-size: clamp(40px, 11vw, 72px);
  letter-spacing: 0.06em;
}

.splash-text img {
  display: block;
  margin-bottom: 20px;
  width: clamp(80px, 18vw, 108px);
  height: auto;
}

@keyframes splash-text-appear {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Active state — runs the entrance animation */
#splash.is-active .splash-text {
  animation: splash-text-appear 2s ease forwards;
}

/* ── Open state — doors slide apart ── */
#splash.is-opening .splash-door-left  { transform: translateX(-100%); }
#splash.is-opening .splash-door-right { transform: translateX(100%); }

#splash.is-opening .splash-text {
  animation: splash-text-fade-out 0.4s ease forwards;
}

@keyframes splash-text-fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}

/* ── Gone — remove from paint tree ── */
#splash.is-gone {
  display: none;
}