/* ============================================================
   ParkieVault V2 — css/pages/landing.css
   Landing page — entry screen only.
   Full-screen hero, JIMIN title, taglines, enter CTA.
   ============================================================ */

/* ══════════════════════════════════════════
   BODY
   Lock scroll — this is a single full-screen view
   ══════════════════════════════════════════ */

.landing-body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  background: #000;
}

/* ══════════════════════════════════════════
   BACKGROUND
   Artist photo fills the full viewport.
   A layered gradient darkens toward the
   bottom so the CTA area stays legible.
   ══════════════════════════════════════════ */

.landing-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: url('../images/Hero_bg.jpg') center top / cover no-repeat;
  opacity: 0.60;

  /* Very subtle scale-in on load for depth */
  animation: landingBgReveal 1.2s var(--ease-out) both;
}

.landing-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* Dark at edges, lighter in the center where the face is,
     heavier at the bottom to frame the CTA */
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.20)  0%,
      rgba(0,0,0,0.05)  35%,
      rgba(0,0,0,0.30)  65%,
      rgba(0,0,0,0.72)  100%
    );
}

/* ══════════════════════════════════════════
   MAIN
   Centres the content block vertically
   in the lower half of the viewport —
   matching the screenshot exactly.
   ══════════════════════════════════════════ */

.landing-main {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14vh;
}

/* ══════════════════════════════════════════
   CONTENT BLOCK
   Title + taglines + button, all centered
   ══════════════════════════════════════════ */

.landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  padding: 0 24px;

  /* Staggered entrance */
  animation: fadeUp 0.70s 0.15s var(--ease-snap) both;
}

/* ══════════════════════════════════════════
   TITLE
   ══════════════════════════════════════════ */

.landing-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 12vw, 144px);
  letter-spacing: 14px;
  line-height: 1;
  color: #fff;
  margin: 0 0 20px;

  /* Glow identical to home page title */
  text-shadow:
    0 0 10px  rgba(255,255,255,0.65),
    0 0 30px  rgba(255,255,255,0.45),
    0 0 70px  rgba(168,120,255,0.38),
    0 0 130px rgba(168,120,255,0.22);
  animation: titleGlowPulse 4s ease-in-out infinite;
}

/* ══════════════════════════════════════════
   TAGLINES
   ══════════════════════════════════════════ */

.landing-taglines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 36px;
  animation: fadeUp 0.70s 0.28s var(--ease-snap) both;
}

.landing-tagline {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.72);
  margin: 0;
  line-height: 1.5;
}

.landing-tagline-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.50);
}

/* ══════════════════════════════════════════
   ENTER BUTTON
   Uses btn-enter from buttons.css.
   Small animation delay for stagger.
   ══════════════════════════════════════════ */

.landing-cta {
  animation: fadeUp 0.70s 0.42s var(--ease-snap) both;
}

/* ══════════════════════════════════════════
   EXIT TRANSITION
   Applied via JS when the button is clicked.
   Page fades out before navigating.
   ══════════════════════════════════════════ */

.landing-exit {
  animation: landingFadeOut 0.38s var(--ease-out) both;
}

/* ══════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════ */

@keyframes landingBgReveal {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 0.60; transform: scale(1); }
}

@keyframes landingFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 760px) {
  .landing-main {
    padding-bottom: 12vh;
  }

  .landing-title {
    font-size: clamp(60px, 18vw, 100px);
    letter-spacing: 8px;
    margin-bottom: 16px;
  }

  .landing-tagline     { font-size: 14px; }
  .landing-tagline-sub { font-size: 13px; }

  .landing-taglines { margin-bottom: 30px; }
}

@media (max-width: 400px) {
  .landing-title {
    font-size: 54px;
    letter-spacing: 6px;
  }
}

/* ══════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .landing-bg,
  .landing-content,
  .landing-taglines,
  .landing-cta,
  .landing-title {
    animation: none;
  }
  .landing-exit {
    opacity: 0;
    transition: opacity 0.2s;
  }
}