/* ═══════════════════════════════════════════════════════════════
   CYNO.GG — Landing Page (Splash-Style Centered Design)
   ═══════════════════════════════════════════════════════════════ */

/* Background shell for post-splash landing */
.landing-bg-shell {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Subtle background image — very low opacity for depth */
.landing-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.07;
  filter: saturate(0.6) brightness(0.5) blur(2px);
  z-index: 0;
  animation: landingBgDrift 30s ease-in-out infinite alternate;
}

@keyframes landingBgDrift {
  0% {
    transform: scale(1.05) translate(0, 0);
    opacity: 0.06;
  }
  50% {
    transform: scale(1.08) translate(-1%, 1%);
    opacity: 0.08;
  }
  100% {
    transform: scale(1.05) translate(1%, -1%);
    opacity: 0.06;
  }
}

body[data-page="landing"] .landing-bg-shell {
  z-index: -1;
}

.landing-bg-shell .splash-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.landing-bg-shell .splash-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.landing-bg-shell .landing-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

.landing-bg-shell .splash-orb {
  position: absolute;
  z-index: 3;
}

/* Main landing shell — centered layout */
body[data-page="landing"].splash-scrollable {
  min-height: 100vh;
}

.landing-page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

.landing-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  /* Balanced vertical padding so the hero centres in the viewport the same way
     the splash logo does — this keeps cyno.gg in the exact same spot through
     the crossfade (no vertical jump). */
  padding: 24px;
}

/* Center content container.
   The hero block is taller than the splash (it has slogan + buttons + banner),
   so simple centering puts the cyno.gg logo higher than the splash logo and it
   appears to jump up after the crossfade. Nudging the block down aligns the
   logo with the splash position for a seamless handoff. */
.landing-center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: clamp(120px, 30vh, 240px);
  max-width: 600px;
  width: 100%;
  text-align: center;
}

/* ─ Force landing brand text visible ─ */
.landing-brand {
  margin: 0;
  /* Hold the logo at its resting glow (no breathing) through the crossfade so
     it matches the splash logo exactly — no glow "pop" at the handoff. The
     gentle breathe only begins once the whole intro has settled. */
  animation: none;
  text-shadow:
    0 0 8px rgba(123, 220, 255, 0.6),
    0 0 20px rgba(123, 220, 255, 0.4),
    0 0 40px rgba(123, 220, 255, 0.25),
    0 0 80px rgba(123, 220, 255, 0.12),
    0 0 120px rgba(123, 220, 255, 0.06);
}
body.is-landing-ready .landing-brand {
  animation: splashBreathe 3s ease-in-out infinite;
}

/* Override splash-letter hidden state */
.landing-brand .splash-letter {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  filter: blur(0) !important;
  animation: none !important;
}

/* Trigger the light sweep on landing brand.
   NOTE: do NOT force `opacity: 1` here — an !important opacity overrides the
   keyframe opacity values and parks the shine permanently over the text.
   The keyframes fade 0 → peak → 0 themselves; `both` fill keeps it invisible
   both before (during the delay) and after the sweep. */
.landing-brand::before {
  opacity: 0;
  animation: splashSmoothSweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both !important;
}

.landing-brand::after {
  opacity: 0;
  animation: splashGlowSmoothSweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both !important;
}

.landing-brand .sparkle-trail {
  opacity: 0;
  animation: sparkleTrailSmooth 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.72s both !important;
}

/* Tagline — force visible immediately */
.landing-tagline {
  margin: 0;
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}

/* Brand slogan — a quiet, glowing micro-line beneath the tagline.
   Understated and spaced to match cyno's minimal aesthetic. */
.landing-slogan {
  margin: 14px 0 0;
  font-family: var(--font-sans, "Manrope", sans-serif);
  font-size: clamp(0.62rem, 1.3vw, 0.74rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em; /* balance the trailing letter-spacing for true centering */
  color: rgba(207, 226, 255, 0.42);
  text-shadow: 0 0 18px rgba(123, 220, 255, 0.18);
  /* Hidden until the JS staggered reveal fades it in (see init.js). */
  opacity: 0;
  transform: translateY(10px);
}

/* CTA buttons centered */
.landing-cta-center {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.landing-cta-center .btn {
  min-width: 140px;
}

/* Access/banner note */
.landing-access-banner {
  margin-top: 4px;
  text-align: center;
  max-width: 480px;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 2;
  padding: 24px 24px 20px;
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 25%, transparent);
  margin-top: auto;
}

body[data-page="landing"] .site-footer {
  margin-top: 40px;
}

.site-footer-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-links a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--status-success);
}

.footer-copyright {
  font-size: 12px;
  color: var(--text-soft);
}

/* ── Topbar override for landing ──────────────────────────── */
/* The landing page shows its brand in the centered hero, and the nav is
   hidden for guests — so the topbar would render as an empty bar with just a
   background + bottom border. Hide it entirely on landing. */
body[data-page="landing"] .topbar {
  display: none !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .landing-shell {
    padding: 70px 16px 0;
  }

  .landing-center-content {
    gap: 16px;
  }

  .landing-brand {
    font-size: clamp(2rem, 10vw, 3.5rem);
    padding: 12px 20px;
    letter-spacing: 0.05em;
  }

  .landing-tagline {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
  }

  .landing-cta-center {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }

  .landing-cta-center .btn {
    width: 100%;
    justify-content: center;
  }

  .site-footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .landing-shell {
    padding: 60px 12px 0;
  }

  .landing-access-banner {
    font-size: 12px;
    padding: 10px 14px;
  }
}

/* ── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .landing-bg-shell .splash-bg,
  .landing-bg-shell .splash-grid,
  .landing-bg-shell .splash-particle,
  .landing-bg-shell .splash-orb {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .landing-brand {
    animation: none !important;
  }

  .landing-brand .splash-letter {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    filter: blur(0) !important;
  }

  .landing-brand::before {
    animation: none !important;
    opacity: 1 !important;
  }

  .landing-brand::after {
    animation: none !important;
    opacity: 1 !important;
  }

  .landing-brand .sparkle-trail {
    animation: none !important;
    opacity: 1 !important;
  }

  .landing-tagline {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ── Touch Devices ────────────────────────────────────────── */
@media (pointer: coarse) {
  .landing-bg-shell .landing-particles {
    display: none;
  }
}