/* Landing page — hero (radial pulsing rings), atmosphere, sections.
   Scoped entirely to .landing-shell (bare-layout body). */

.landing-shell {
  min-height: 100vh;
  background-color: var(--surface-0);
  display: flex;
  flex-direction: column;
}

/* Minimal glass nav — logo left, Sign In right.
   No backdrop-filter here: blur-behind-scrolling-content forces the browser
   to recompute the blurred backdrop on every scroll frame for as long as the
   sticky nav is on screen, which is most of a scroll session on this page. A
   flat, slightly more opaque background gets the same "floating panel" read
   for a fraction of the cost. */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background-color: rgba(21, 16, 10, 0.9);
  background-image: var(--starfield-bg);
  background-size: var(--starfield-size);
  border-bottom: 1px solid var(--border-subtle);
}

.landing-nav__logo {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-amber);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  text-decoration: none;
}

.landing-nav__cta { flex-shrink: 0; }

/* ── Hero: full viewport, radial pulsing rings + typography ── */
.landing-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: var(--space-16) var(--space-6) var(--space-24);
  background-color: var(--surface-0);
  background-image: var(--starfield-bg);
  background-size: var(--starfield-size);
}

/* Organic noise/grain texture overlay */
.landing-hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: var(--z-base);
}

/* Ambient orbs — slow drifting light behind the sun */
.landing-hero__orb {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-base);
}

/* Both orbs are tuned to the shader sun's honey/apricot palette so nothing
   in the hero fights the sun's warmth. The lower orb used to be moss-green,
   which visibly clashed with a warm sun. */
.landing-hero__orb--amber {
  top: -10%;
  width: 600px;
  height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(224, 169, 58, 0.10), transparent 70%);
}

.landing-hero__orb--moss {
  bottom: -15%;
  left: 42%;
  width: 400px;
  height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(227, 149, 85, 0.06), transparent 70%);
}

/* Radial pulsing rings — concentric strokes centred on the hero,
   staggered in phase so the composite reads like a slow sound-wave
   visualiser. Rings are pure CSS: bordered squares clipped to circles,
   scaled + faded via transform/opacity so animation stays on the GPU
   composite layer and never touches layout or paint. */
.landing-hero__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75vmin;
  height: 75vmin;
  z-index: var(--z-base);
  pointer-events: none;
  display: grid;
  place-items: center;
  color: var(--color-sunflower);
}

/* Warm radial glow behind the rings — same technique as the retired
   sun-wrap glow so the hero still feels lit from the middle. */
.landing-hero__rings::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 200, 66, 0.16), rgba(224, 169, 58, 0.05) 45%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.landing-hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid currentColor;
  will-change: transform, opacity;
  transform-origin: center;
}

/* Static resting sizes — each ring occupies a fixed fraction of the
   available circle. Opacities decay outward so the innermost ring reads
   as the "source" and outer rings feel like echoes. */
.landing-hero__ring--1    { width: 22%; height: 22%; opacity: 0.55; }
.landing-hero__ring--2    { width: 42%; height: 42%; opacity: 0.35; border-color: var(--color-honey); }
.landing-hero__ring--3    { width: 66%; height: 66%; opacity: 0.22; border-color: var(--color-honey); }
.landing-hero__ring--4    { width: 92%; height: 92%; opacity: 0.12; border-color: var(--color-ember); }
.landing-hero__ring--core {
  width: 10%;
  height: 10%;
  background: radial-gradient(circle, var(--color-cream), var(--color-sunflower) 55%, transparent 100%);
  border: none;
  opacity: 0.9;
}

/* Text + buttons above sun */
.landing-hero__inner {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 860px;
}

.landing-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 8.4vw, 7.5rem);
  font-weight: 700;
  color: var(--color-parchment);
  /* Tighter tracking than the loose 0.2em uniform-caps default — display
     type wants deliberate spacing that reads as "styled" instead of
     a browser default. Line-height is deliberately tight for display copy;
     body copy stays 1.55-1.7 elsewhere per the type-contrast research. */
  letter-spacing: 0.14em;
  line-height: 1.02;
  text-shadow: 0 0 60px rgba(224, 169, 58, 0.32);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-title-glow {
    0%, 100% { text-shadow: 0 0 60px rgba(224, 169, 58, 0.32); }
    50%      { text-shadow: 0 0 90px rgba(224, 169, 58, 0.50); }
  }
  .landing-hero__title { animation: hero-title-glow 6.5s ease-in-out infinite; animation-delay: 1s; }
}

.landing-hero__tagline {
  font-size: var(--text-lg);
  color: var(--color-ash);
  font-style: italic;
  max-width: 480px;
  line-height: var(--leading-snug);
}

.landing-hero__founding {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-ash);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
}

.landing-hero__actions {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-12);
}

/* Site-wide .btn--ghost is a 10%-parchment border which vanishes against the
   sun's honey glow. Scope a fully opaque honey border and a real dark fill
   here so the archive CTA reads clearly. Global ghost style untouched. */
.landing-hero__actions .btn--ghost {
  border-color: var(--color-sunflower);
  border-width: 1.5px;
  background-color: rgba(26, 18, 9, 0.72);
  color: var(--color-sunflower);
  font-weight: 600;
}
.landing-hero__actions .btn--ghost:hover {
  border-color: var(--color-sunflower);
  background-color: rgba(245, 200, 66, 0.18);
  color: var(--color-sunflower);
}

/* Pending-approval status banner — replaces the primary CTA when the
   signed-in user hasn't been approved yet. Calm/informational, not a warning. */
.pending-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 36px;
  padding: 12px 24px;
  background-color: var(--color-bark);
  border: 1px solid var(--color-amber-30);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

@media (prefers-reduced-motion: no-preference) {
  .pending-banner:hover {
    border-color: var(--color-amber);
    transform: translateY(-1px);
  }
}

.pending-banner__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-amber);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes pending-banner-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 200, 66, 0.4); }
    70%  { box-shadow: 0 0 0 6px rgba(245, 200, 66, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 200, 66, 0); }
  }
  .pending-banner__dot { animation: pending-banner-pulse 2.2s ease infinite; }
}

.pending-banner__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-parchment);
}

.pending-banner__chevron { color: var(--color-ash); flex-shrink: 0; }

/* Scroll chevron */
.landing-hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-ash);
  opacity: 0.5;
  text-decoration: none;
  transition: opacity var(--transition-slow);
  z-index: var(--z-raised);
}

/* ── Entry + idle animations (skipped for prefers-reduced-motion) ── */

@media (prefers-reduced-motion: no-preference) {
  @keyframes rings-enter {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  /* Waveform pulse — outward scale + gentle fade, no border-width
     change so paint stays cheap. Each ring uses the same keyframes
     but a different delay/duration so peaks stagger. */
  @keyframes ring-pulse {
    0%   { transform: scale(0.94); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(0.94); }
  }

  @keyframes ring-pulse-opacity-1 { 0%,100% { opacity: 0.55; } 50% { opacity: 0.72; } }
  @keyframes ring-pulse-opacity-2 { 0%,100% { opacity: 0.35; } 50% { opacity: 0.52; } }
  @keyframes ring-pulse-opacity-3 { 0%,100% { opacity: 0.22; } 50% { opacity: 0.36; } }
  @keyframes ring-pulse-opacity-4 { 0%,100% { opacity: 0.12; } 50% { opacity: 0.22; } }
  @keyframes core-pulse-opacity   { 0%,100% { opacity: 0.85; } 50% { opacity: 1;    } }

  @keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes hero-fade-up-sm {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes bounce-down {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
  }

  .landing-hero__rings {
    animation: rings-enter 1.4s var(--ease-out) both;
  }

  /* Two animations per ring: scale on transform, opacity on its own
     axis, both GPU-composited. Staggered delays feel like a wave. */
  .landing-hero__ring--1    { animation: ring-pulse 3.2s ease-in-out 0.4s infinite,    ring-pulse-opacity-1 3.2s ease-in-out 0.4s infinite; }
  .landing-hero__ring--2    { animation: ring-pulse 4.0s ease-in-out 0.6s infinite,    ring-pulse-opacity-2 4.0s ease-in-out 0.6s infinite; }
  .landing-hero__ring--3    { animation: ring-pulse 5.2s ease-in-out 0.8s infinite,    ring-pulse-opacity-3 5.2s ease-in-out 0.8s infinite; }
  .landing-hero__ring--4    { animation: ring-pulse 6.8s ease-in-out 1.0s infinite,    ring-pulse-opacity-4 6.8s ease-in-out 1.0s infinite; }
  .landing-hero__ring--core { animation: ring-pulse 2.6s ease-in-out 0s   infinite,    core-pulse-opacity  2.6s ease-in-out 0s   infinite; }

  .landing-hero__tagline {
    animation: hero-fade-up-sm 600ms var(--ease-out) 600ms both;
  }

  .landing-hero__founding {
    animation: hero-fade-up-sm 600ms var(--ease-out) 700ms both;
  }

  .landing-hero__actions {
    animation: hero-fade-up 400ms var(--ease-out) 800ms both;
  }

  .landing-hero__scroll {
    animation: bounce-down 1.8s ease-in-out 1200ms infinite;
  }
}

/* Landing sections — base container.
   Note: spacing is intentionally varied per section (see the .landing-strip
   and .landing-lore rules below). Uniform vertical rhythm across every
   section is one of the AI-template tells from the research; each section
   gets a padding that matches how much visual weight it carries. */
.landing-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-20) var(--space-6) var(--space-12);
  width: 100%;
}

.landing-section__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.landing-section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-parchment);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: var(--space-2);
  text-align: center;
}

.landing-section__subtitle {
  font-size: var(--text-base);
  color: var(--color-ash);
  line-height: 1.6;
  text-align: center;
  margin-bottom: var(--space-10);
}

/* Split layout — header column on the left, body column on the right.
   Breaks the "identical centered stack" cadence the section grid used
   to have. Collapses to stacked on mobile. */
.landing-section--split {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: var(--space-10);
  align-items: start;
}

.landing-section__header--left {
  padding-top: var(--space-2);
}

.landing-section__title--left {
  text-align: left;
  margin-bottom: var(--space-3);
}

.landing-section__subtitle--left {
  text-align: left;
  margin-bottom: 0;
  max-width: 30ch;
}

@media (max-width: 767px) {
  .landing-section--split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ── Scroll reveal (Part 6) ── */
@media (prefers-reduced-motion: no-preference) {
  .landing-section,
  .landing-strip {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  }
  .landing-section.revealed,
  .landing-strip.revealed {
    opacity: 1;
    transform: translateY(0);
  }
  .landing-section.revealed > *,
  .landing-strip.revealed > * {
    animation: hero-fade-up-sm 400ms var(--ease-out) both;
    animation-delay: var(--reveal-delay, 0ms);
  }

  /* Where the browser supports scroll-driven animations, drive the reveal
     natively per-child instead of via the IntersectionObserver + JS-set
     --reveal-delay above — reveal_controller.js skips its observer entirely
     in this case (see reveal_controller.js), so this is the whole mechanism
     for these visitors, not a visual layer on top of the JS path. */
  @supports (animation-timeline: view()) {
    .landing-section,
    .landing-strip {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .landing-section > *,
    .landing-strip > * {
      animation: hero-fade-up-sm linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

/* Servers on landing — grid fills whatever column the split gives it. */
.landing-servers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.landing-server-card {
  background-color: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.landing-server-card:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-2);
}

.landing-server-card--empty {
  border-style: dashed;
  border-color: var(--border-amber);
  max-width: 767px;
  margin: 0 auto;
  align-items: center;
  text-align: center;
}

.landing-server-card__empty-text {
  color: var(--color-ash);
  font-size: var(--text-sm);
}

.landing-server-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.landing-server-card__game {
  font-size: var(--text-xs);
  color: var(--color-ash);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
}

.landing-server-card__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-parchment);
  font-weight: 600;
}

.landing-server-card__count {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.landing-server-card__count-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-amber);
  line-height: 1;
  font-weight: 700;
}
.landing-server-card__count-label {
  font-size: var(--text-xs);
  color: var(--color-ash);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.landing-server-card__offline {
  font-size: var(--text-sm);
  color: var(--color-ash);
}

/* Stats strip — full-bleed horizontal band, deliberately compact so it
   reads as a rhythm break between the split "Active Worlds" section and
   the featured "Chronicles" card below. The numbers sit inline with an
   eyebrow so it doesn't repeat the title/subtitle/grid skeleton. */
.landing-strip {
  background-color: var(--surface-1);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-8) var(--space-6);
}

.landing-strip__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.landing-strip__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  flex-shrink: 0;
}

.landing-strip__stats {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
  align-items: baseline;
}

.landing-strip-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.landing-strip-stat__number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-amber);
  line-height: 1;
  font-weight: 700;
}

.landing-strip-stat__label {
  font-size: var(--text-xs);
  color: var(--color-ash);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
}

@media (max-width: 767px) {
  .landing-strip__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .landing-strip__stats { gap: var(--space-6); }
}

/* Lore teaser — the "featured" moment on the page, so it earns the wider
   padding and the honey top-edge glow (a decorative accent used once,
   deliberately, not on every section per the "reserve strong accent
   treatment for actually important moments" research finding). */
.landing-lore {
  background-color: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  max-width: 767px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.landing-lore::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-amber-30), transparent);
}

.landing-lore__eyebrow {
  font-size: var(--text-xs);
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.landing-lore__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-parchment);
  margin-bottom: var(--space-5);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.landing-lore__excerpt {
  margin-bottom: var(--space-6);
  line-height: 1.7;
}

.landing-lore__link { align-self: flex-start; }

/* Landing footer */
.landing-footer {
  background-color: var(--surface-1);
  border-top: 1px solid var(--border-accent);
  padding: var(--space-8) var(--space-6);
  margin-top: auto;
}

.landing-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}

.landing-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.landing-footer__logo {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-amber);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

.landing-footer__tagline {
  font-size: var(--text-sm);
  font-style: italic;
  font-family: var(--font-body);
  color: var(--color-ash);
}

.landing-footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.landing-footer__link {
  font-size: var(--text-sm);
  color: var(--color-ash);
  transition: color var(--transition-fast);
}
.landing-footer__link:hover { color: var(--color-parchment); }

.landing-footer__copy {
  justify-self: end;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--color-ash);
  opacity: 0.5;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 767px) {
  .landing-hero__rings { width: 95vmin; height: 95vmin; }
  .landing-hero__title { letter-spacing: 0.08em; }
  .landing-hero__actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--space-3);
  }
  .landing-hero__actions .btn { width: 100%; max-width: 320px; }
  .landing-hero__scroll { display: none; }

  .landing-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-6);
  }
  .landing-footer__brand { align-items: center; }
  .landing-footer__links { order: 2; }
  .landing-footer__copy {
    order: 3;
    justify-self: center;
    text-align: center;
    font-size: var(--text-xs);
  }
}

/* Landscape phone: 100vh hero can trap users in a full-viewport panel where the
   content doesn't fit and the scroll cue is off-screen. Drop min-height so the
   hero shrinks to fit and the page below is reachable. */
@media (max-height: 500px) and (orientation: landscape) {
  .landing-hero { min-height: auto; padding: var(--space-8) var(--space-4); }
  .landing-hero__scroll { display: none; }
}