/* =========================================
   INTRO SCREEN
========================================= */

#intro-screen {
  position: fixed;
  inset: 0;

  background: #0b0b0b;
  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;

  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}

#intro-screen::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at center,
    rgba(255, 200, 120, 0.15),
    rgba(0, 0, 0, 0.95)
  );

  z-index: 0;
}

#intro-screen.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.5s ease, visibility 1.5s ease;
}

/* =========================================
   BOOK WRAPPER
========================================= */

.book-wrapper {
  position: relative;
  z-index: 2;

  width: 420px;
  height: 280px;

  perspective: 2000px;
  transform-style: preserve-3d;
}

/* =========================================
   BOOK COVERS
========================================= */

.book-cover {
  position: absolute;

  width: 50%;
  height: 100%;

  top: 0;

  background:
    linear-gradient(
      145deg,
      #3e2d20,
      #5b4434,
      #2b2118
    );

  border: 2px solid rgba(255, 215, 160, 0.15);

  box-shadow:
    0 0 40px rgba(0,0,0,0.6),
    inset 0 0 20px rgba(255,255,255,0.05);

  transition: transform 2.5s ease;
}

/* LEFT */

.left-cover {
  left: 0;
  border-radius: 18px 0 0 18px;
  transform-origin: left center;
}

/* RIGHT */

.right-cover {
  right: 0;
  border-radius: 0 18px 18px 0;
  transform-origin: right center;
}

/* =========================================
   OPEN STATE
========================================= */

#intro-screen.open .left-cover {
  transform: rotateY(-130deg);
}

#intro-screen.open .right-cover {
  transform: rotateY(130deg);
}

/* =========================================
   BOOK CENTER
========================================= */

.book-center {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  opacity: 0;
  transform: scale(0.8);

  transition:
    opacity 1.5s ease,
    transform 1.5s ease;

  transition-delay: 1.3s;
}

#intro-screen.open .book-center {
  opacity: 1;
  transform: scale(1);
}

/* =========================================
   GLOW
========================================= */

.book-glow {
  position: absolute;

  width: 250px;
  height: 250px;

  background:
    radial-gradient(circle,
      rgba(255, 210, 120, 0.35),
      transparent 70%);

  filter: blur(30px);

  animation: pulseGlow 4s infinite ease-in-out;
}

/* =========================================
   LOGO
========================================= */

.intro-logo {
  width: clamp(70px, 20vw, 120px);
  z-index: 2;
  filter: drop-shadow(0 0 25px rgba(255,220,150,0.5));
}

/* =========================================
   CREDIT
========================================= */

.intro-credit {
  margin-top: 20px;
  color: #f1d8b5;
  font-size: clamp(10px, 3vw, 14px);
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 2;
  text-align: center;
  padding: 0 10px;
}

/* =========================================
   GLOW ANIMATION
========================================= */

@keyframes pulseGlow {
  0%   { transform: scale(1);    opacity: 0.5; }
  50%  { transform: scale(1.15); opacity: 1;   }
  100% { transform: scale(1);    opacity: 0.5; }
}

/* =========================================
   FADE OUT
========================================= */

#intro-screen.fade-out {
  opacity: 0;
  transition: opacity 1.5s ease;
}