/* =========================================
   intro.css — World Within
   Book opens like H4H — NO sliding.
   Covers rotate on hinge. Logo revealed inside.
========================================= */



#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;
}

/* =========================================
   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-cover {
  left: 0;
  border-radius: 18px 0 0 18px;
  transform-origin: left center;
}

.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(200px, 70vw, 320px);
  height: auto;
  display: block;
  z-index: 2;
  filter: drop-shadow(0 0 25px rgba(255,220,150,0.5));
}

.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;
}

.intro-welcome {
  margin-top: 4px;
  color: rgba(241,216,181,0.75);
  font-size: clamp(9px, 2.5vw, 12px);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  padding: 0 10px;
}

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

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


                              
/* =========================================
   INTRO SCREEN 2 — INVITATION
   Waits for button. Never auto-fades.
========================================= */
#intro-screen2 {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  height: 100dvh;
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 28px;
  background:
    radial-gradient(ellipse at 50% 32%,
    rgba(160,60,200,0.11) 0%, transparent 55%),
    rgba(3,2,10,0.97);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 2s ease, visibility 2s ease;
}

#intro-screen2.show {
  opacity: 1; visibility: visible; pointer-events: auto;
}

#intro-screen2.fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 1.2s ease, visibility 1.2s ease !important;
}

.intro-content2 {
  max-width: 680px; width: 100%;
  opacity: 0; transform: translateY(32px);
  transition: opacity 1.5s ease 0.3s, transform 1.5s ease 0.3s;
}
#intro-screen2.show .intro-content2 { opacity: 1; transform: translateY(0); }

.intro-title2 {
   
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1.06; margin-bottom: 28px;
  color: #fdf3e4; font-weight: 700; letter-spacing: -1px;
  text-shadow: 0 0 60px rgba(247,217,139,0.16), 0 0 120px rgba(200,130,255,0.09);
  opacity: 0; transform: translateY(22px);
  transition: opacity 1.2s ease 0.4s, transform 1.2s ease 0.4s;
}
#intro-screen2.show .intro-title2 { opacity: 1; transform: translateY(0); }

.intro-text2 {
  font-size: clamp(1rem, 3.2vw, 1.3rem);
  line-height: 2.1; margin-bottom: 52px;
  color: rgba(253,243,228,0.60); font-weight: 300;
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.2s ease 0.7s, transform 1.2s ease 0.7s;
}
#intro-screen2.show .intro-text2 { opacity: 1; transform: translateY(0); }

#enter-experience {
  padding: 22px 58px; border: none; border-radius: 999px;
  background: linear-gradient(135deg, #ff4fd8 0%, #a855f7 50%, #7b5cff 100%);
  color: white; font-size: clamp(0.95rem, 3vw, 1.1rem);
  font-weight: 600; font-family: 'Poppins', sans-serif;
  cursor: pointer; letter-spacing: 0.10em; text-transform: uppercase;
  box-shadow: 0 0 50px rgba(255,79,216,0.58), 0 0 100px rgba(168,85,247,0.28);
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.1s ease 1.0s, transform 1.1s ease 1.0s, box-shadow 0.4s ease;
}
#intro-screen2.show #enter-experience { opacity: 1; transform: translateY(0); }
#enter-experience:hover {
  transform: translateY(-6px) scale(1.05) !important;
  box-shadow: 0 0 80px rgba(255,79,216,0.85), 0 0 160px rgba(168,85,247,0.42) !important;
}

/* =========================================
   ANIMATIONS
========================================= */
@keyframes pulseGlow {
  0%,100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.18); opacity: 1;   }
}


@keyframes breatheLogo {
  0%,100% {
    filter: drop-shadow(0 0 10px rgba(255,220,160,0.30));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255,220,160,0.50));
    transform: scale(1.04);
  }
}
/* =========================================
   MOBILE
========================================= */
@media (max-width: 380px) {
  .book-wrapper { height: min(380px, 52dvh); }
  .intro-logo { width: 110px; }
}

   @media (max-width: 480px) {
  .book-wrapper {
    width: min(90vw, 380px);
    height: min(65vw, 260px);
  }
  .intro-logo { width: clamp(160px, 60vw, 260px); }
   }


/* =========================================
   ANTI-SLIDE SAFEGUARD
   
   The book intro is a DOOR OPENING — covers
   rotate in 3D (rotateY) revealing the logo
   from inside, like opening to a page.
   
   It is NEVER a slide (translateX/translateY).
   This rule explicitly overrides any
   conflicting "slide" keyframes that might
   exist in animations.css and accidentally
   target #intro-screen or .book-cover.
   
   This is Mazien's signature intro —
   used across every World Within site.
========================================= */

#intro-screen,
#intro-screen2,
.book-wrapper,
.book-cover,
.book-center {
  animation-name: none !important; /* no keyframe animations on these */
}

/* Re-apply the ONLY animations that should exist on these elements */
.book-glow   { animation: pulseGlow 4s ease-in-out infinite !important; }
.intro-logo  { animation: breatheLogo 4s ease-in-out infinite !important; }

/* The book-center and covers move ONLY via the
   .open class transitions defined above —
   transform + opacity, never position/translate. */