/* ============================================================
   Paranormal Passage — landing page
   Single-screen, no-scroll layout. Logo is the only element.
   ============================================================ */

:root {
  --bg: #000000;
  --bg-glow: #101014;          /* subtle center lift, static (not animated) */
  --gold: #c8a55c;             /* antique brass, matches logo + favicon */
  --text-muted: #a79d87;       /* aged parchment tone for the tagline */
  --font-serif: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua",
                Palatino, Georgia, "Times New Roman", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* mobile browser chrome safe */
  display: flex;
  align-items: center;     /* vertical centering   */
  justify-content: center; /* horizontal centering */
  overflow: hidden;        /* no scrolling, ever   */
  background: var(--bg) radial-gradient(ellipse at center, var(--bg-glow) 0%, var(--bg) 72%);
  color: var(--text-muted);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-align: center;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 3.5vh, 2.2rem);
  padding: 1.5rem;
  max-width: 100%;
}

/* --- Logo -------------------------------------------------- */

.logo-link {
  display: block;
  line-height: 0;
  cursor: pointer;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}

.logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(78vw, 560px);  /* desktop + tablet sizing */
  max-height: 72vh;             /* logo is now the sole element */
  transition: transform 0.35s ease; /* the one and only animation */
  will-change: transform;
}

.logo-link:hover .logo,
.logo-link:focus-visible .logo {
  transform: scale(1.05); /* subtle 5% enlarge */
}

.logo-link:focus-visible {
  outline: 1px solid rgba(200, 165, 92, 0.65);
  outline-offset: 10px;
}

/* --- Small screens ------------------------------------------ */

@media (max-width: 480px) {
  .logo {
    max-width: 84vw;
    max-height: 70vh;
  }
}

/* Short landscape screens (phones rotated) — keep everything visible */
@media (max-height: 480px) {
  .logo {
    max-height: 58vh;
  }

  .stage {
    gap: 0.9rem;
  }
}

/* Respect users who prefer no motion: hover scale applies instantly */
@media (prefers-reduced-motion: reduce) {
  .logo {
    transition: none;
  }
}