/* ============================================
   ReadVenture Landing & Corridor
   Corridor animation, Unicorn runner, Entry transition
   ============================================ */

/* ── Corridor Scene ── */
#landingDrawer {
  background: var(--bg-white-wall);
  overflow: hidden;
}

.corridor-scene {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-corridor);
}

.corridor-roof {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(180deg, #d4c4a8, transparent);
  z-index: 5;
}

.corridor-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(0deg, #c9b896, transparent);
  z-index: 5;
}

/* ── Wainscoting ── */
.wainscoting {
  position: absolute;
  bottom: 20%;
  left: 0; right: 0;
  height: 60%;
  z-index: 3;
  display: flex;
  gap: 0;
}

.wainscoting-panel {
  flex: 1;
  height: 100%;
  background: var(--bg-white-wall);
  border: 1px solid var(--border-wall);
  box-shadow: inset 0 0 8px var(--glass-8);
}

/* ── Art Frames on Walls ── */
.wall-art-frame {
  position: absolute;
  z-index: 4;
  width: 60px;
  height: 80px;
  background: var(--card-darker);
  border: 3px solid var(--gold-frame-mid);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--anim-slow), box-shadow var(--anim-slow);
}
.wall-art-frame:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-frame);
}

/* ── Door ── */
.corridor-door {
  position: absolute;
  z-index: 4;
  width: 80px;
  height: 140px;
  background: linear-gradient(180deg, #8b6f47, #6b4f2f);
  border: 3px solid #5a3d20;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.door-knob {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
  background: var(--gold-frame-light);
  box-shadow: 0 0 6px var(--gold-30);
}

/* ── Unicorn Runner ── */
.unicorn-entry {
  position: absolute;
  z-index: 8;
  font-size: var(--text-48);
  animation: unicornRun 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  pointer-events: none;
}

@keyframes unicornRun {
  0% { transform: translateX(-80px) scaleX(1); }
  70% { transform: translateX(calc(100vw - 80px)) scaleX(1); }
  85% { transform: translateX(calc(100vw - 60px)) scaleX(1); }
  100% { transform: translateX(calc(100vw + 80px)) scaleX(1); }
}

.unicorn-dust {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

@keyframes dustSparkle {
  0% { opacity: 1; transform: scale(0); }
  100% { opacity: 0; transform: scale(1.5) translateY(-20px); }
}

/* ── Book Entry (飞书) ── */
.book-fly {
  position: absolute;
  z-index: 10;
  font-size: var(--text-32);
  pointer-events: none;
  animation: bookFlyIn 2s var(--ease-smooth) forwards;
}

@keyframes bookFlyIn {
  0% { transform: translateY(100%) scale(0.5); opacity: 0; }
  50% { opacity: 1; transform: translateY(-10%) scale(1.1); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Welcome Text Overlay ── */
.landing-welcome {
  position: absolute;
  bottom: 20%;
  left: 0; right: 0;
  text-align: center;
  z-index: 15;
  animation: fadeInUp 0.8s var(--ease-smooth) both;
  animation-delay: 1.5s;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.landing-welcome h1 {
  font-size: var(--text-32);
  font-weight: 800;
  color: var(--text-dark-bg);
  margin-bottom: var(--space-xs);
}

.landing-welcome p {
  font-size: var(--text-15);
  color: var(--text-muted);
}