/* layout.css — dual-layer page architecture, fixed header, section layout, grid, three breakpoints.
   Layers (architecture.md section 6): z-0 fixed galaxy stage, z-1 scrolling content, z-10 header/overlays.
   Breakpoints are mobile-first (design-spec section 6): base = mobile <768, 768 = tablet, 1280 = desktop. */

/* ---- Layer 0: fixed galaxy background ---- */

.galaxy-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Silhouette placeholder (S0): pure CSS gradients + inline SVG, part of initial DOM (architecture.md 5.4) */
.galaxy-silhouette {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 233 196 / 20%) 0%, transparent 18%),
    radial-gradient(ellipse 70% 40% at 50% 50%, rgb(157 180 255 / 14%) 0%, transparent 70%),
    radial-gradient(ellipse 95% 60% at 50% 50%, rgb(74 63 120 / 25%) 0%, transparent 75%);
}

.galaxy-silhouette svg {
  width: min(80vmin, 640px);
  opacity: 0.55;
}

.galaxy-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Static degrade image (T7): injected by loader.js on reduced-motion / WebGL
   unavailable / Three.js load failure; sits under the (then empty) canvas. */
.galaxy-static-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.galaxy-static-img.gs-static-visible {
  opacity: 1;
}

/* Silhouette fade-out class (T7): added by loader.js once the 3D galaxy or the
   static image is ready. The opacity transition lives in the no-preference
   block below; reduced-motion gets an instant swap via the base.css guard. */
.galaxy-silhouette.gs-silhouette-hidden {
  opacity: 0;
}

/* Transparent drag surface for the 3D galaxy inside #home; events wired in T8 */
.galaxy-input-layer {
  position: absolute;
  inset: 0;
  touch-action: none;
}

/* ---- Layer 1: scrolling content ---- */

.site-main {
  position: relative;
  z-index: 1;
}

.section {
  position: relative;
  padding-block: 48px;
  scroll-margin-top: var(--gs-scroll-margin-top);
}

/* Semi-transparent scrim panel so text stays readable over the galaxy (design-spec 7.1) */
.section-panel {
  background-color: var(--gs-color-scrim);
}

/* M6 "You Are Here" visual climax: the only gold-tinted section (design-spec 4.6) */
.section-you-are-here {
  background-image: radial-gradient(circle at 50% 20%, rgb(255 209 102 / 8%), transparent 60%);
}

/* ---- Container grid (design-spec 3.2) ---- */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---- M8 fixed header (design-spec 4.4) ---- */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  height: var(--gs-header-height);
  border-bottom: 1px solid transparent;
}

/* Glass state after scrolling > 80px; class toggled by nav.js in T6 */
.site-header.is-scrolled {
  background-color: var(--gs-glass-bg);
  border-bottom-color: var(--gs-color-border);
  backdrop-filter: blur(var(--gs-glass-blur));
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--gs-space-4);
  height: 100%;
}

.site-logo {
  font-family: var(--gs-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gs-color-text-primary);
}

/* Mobile-first: nav is a full-screen drawer (design-spec 4.4 mobile row) */
.site-nav {
  display: none;
}

.site-nav.is-open {
  position: fixed;
  inset: var(--gs-header-height) 0 0;
  z-index: 9;
  display: block;
  overflow-y: auto;
  padding: var(--gs-space-5);
  background-color: var(--gs-color-surface);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--gs-space-2);
}

.nav-link {
  display: block;
  padding: var(--gs-space-3) var(--gs-space-4);
  border-radius: 8px;
  color: var(--gs-color-text-secondary);
}

.nav-link:hover {
  color: var(--gs-color-text-primary);
  background-color: var(--gs-color-surface-hover);
}

/* Current section highlight (scroll spy in T6 adds .is-active) */
.nav-link.is-active {
  color: var(--gs-color-text-primary);
}

.nav-toggle {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--gs-color-text-primary);
  background-color: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

/* ---- M8 language switcher, segmented control (design-spec 4.3) ---- */

.lang-switch {
  display: inline-flex;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid var(--gs-color-border);
  border-radius: 8px;
}

.lang-option {
  /* Touch target: 44px on mobile (design-spec section 6); pointer devices
     relax to 36px in the >= 768px block below. */
  height: 44px;
  padding-inline: var(--gs-space-4);
  font-size: 0.875rem;
  color: var(--gs-color-text-secondary);
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.lang-option[aria-pressed="true"] {
  color: var(--gs-color-bg);
  font-weight: 600;
  background-color: var(--gs-color-accent-blue);
}

/* ---- M1 Hero (S1, 100vh stage) ---- */

.hero {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  padding-block: calc(var(--gs-header-height) + var(--gs-space-6)) var(--gs-space-9);
  text-align: center;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* Keep the title at AA contrast over moving particles (design-spec 7.1) */
.hero-title {
  text-shadow: 0 2px 8px rgb(5 6 15 / 80%);
}

.hero-subtitle {
  margin-top: var(--gs-space-4);
  color: var(--gs-color-text-secondary);
  font-size: var(--gs-font-size-body-lg);
}

/* ---- M2 control panel overlay (compact state; full behavior in T9) ---- */

.control-panel {
  position: absolute;
  right: var(--gs-space-4);
  bottom: var(--gs-space-8);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
  padding: var(--gs-space-3);
  background-color: var(--gs-glass-bg);
  border: 1px solid var(--gs-color-border);
  border-radius: var(--gs-card-radius);
  backdrop-filter: blur(var(--gs-glass-blur));
}

.control-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--gs-color-text-primary);
  background-color: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.control-btn:hover {
  background-color: var(--gs-color-surface-hover);
}

.zoom-group {
  display: flex;
  gap: var(--gs-space-2);
}

.speed-slider {
  width: 120px;
  accent-color: var(--gs-color-accent-blue);
}

/* ---- M4 card grid: 1 column on mobile (design-spec 3.2) ---- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gs-space-4);
  margin-top: var(--gs-space-5);
}

/* ---- Scroll hint (design-spec 5.2: floating chevron) ---- */

.scroll-hint {
  position: absolute;
  bottom: var(--gs-space-5);
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gs-space-2);
  color: var(--gs-color-text-secondary);
  font-size: 0.875rem;
  transform: translateX(-50%);
}

/* ---- Skip link ---- */

.skip-link {
  position: fixed;
  top: var(--gs-space-2);
  left: var(--gs-space-2);
  z-index: 20;
  padding: var(--gs-space-2) var(--gs-space-4);
  background-color: var(--gs-color-bg-elevated);
  border: 1px solid var(--gs-color-border-strong);
  border-radius: 8px;
  transform: translateY(-300%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---- Footer ---- */

.site-footer {
  position: relative;
  z-index: 1;
  padding-block: var(--gs-space-6);
  background-color: var(--gs-color-scrim);
  border-top: 1px solid var(--gs-color-border);
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gs-space-4);
}

.footer-copy {
  color: var(--gs-color-text-tertiary);
  font-size: 0.8125rem;
}

.back-to-top,
.copy-link {
  /* Oversized hit area via symmetric padding + negative margins: keeps the
     footer row visually unchanged while reaching the 44px touch target. */
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  color: var(--gs-color-accent-blue);
  font-size: 0.875rem;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

/* ---- Motion (design-spec 5.3: transitions/animations only in no-preference media) ---- */

@media (prefers-reduced-motion: no-preference) {
  .site-header {
    transition: background-color var(--gs-duration-base) var(--gs-ease-standard), border-color var(--gs-duration-base) var(--gs-ease-standard);
  }

  .galaxy-silhouette {
    transition: opacity var(--gs-duration-slow) var(--gs-ease-out);
  }

  .galaxy-static-img {
    transition: opacity var(--gs-duration-slow) var(--gs-ease-out);
  }

  .skip-link {
    transition: transform var(--gs-duration-fast) var(--gs-ease-out);
  }

  .scroll-hint svg {
    animation: gs-scroll-hint-float 2s ease-in-out infinite;
  }

  /* Mobile drawer entrance (design-spec 5.2: drawer 250ms ease-standard) */
  .site-nav.is-open {
    animation: gs-drawer-in var(--gs-duration-base) var(--gs-ease-standard);
  }
}

@keyframes gs-drawer-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gs-scroll-hint-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

/* ---- Tablet breakpoint: 768–1279 (design-spec 3.2 / 6) ---- */

@media (width >= 768px) {
  :root {
    --gs-header-height: 64px;
  }

  .container {
    padding-inline: 24px;
  }

  .section {
    padding-block: 64px;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Horizontal navigation replaces the drawer */
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    margin-left: auto;
  }

  .site-nav.is-open {
    position: static;
    overflow: visible;
    padding: 0;
    background-color: transparent;
  }

  .nav-list {
    flex-direction: row;
    gap: var(--gs-space-1);
  }

  .nav-link {
    padding: var(--gs-space-2) var(--gs-space-3);
  }

  /* Current-section indicator: 2px accent-blue bar under the item */
  .nav-link.is-active {
    border-radius: 0;
    box-shadow: inset 0 -2px 0 var(--gs-color-accent-blue);
  }

  .lang-switch {
    margin-left: 0;
  }

  .lang-option {
    height: 36px;
  }
}

/* ---- Desktop breakpoint: >= 1280 (design-spec 3.2 / 6) ---- */

@media (width >= 1280px) {
  .container {
    max-width: var(--gs-container-max);
  }

  .section {
    padding-block: 96px;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gs-space-5);
  }
}