/*
  Layout
  Containers, sections, responsive grid
*/

/* Container */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem; /* 24px mobile */
}

/* Header */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: calc(env(safe-area-inset-top) + var(--space-sm)) 0 var(--space-sm);
  transition: background-color var(--duration-normal) ease;
}

.header-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Sections */
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--section-gap) 0;
}

/* Section-specific layouts */

/* HERO */
.section-hero {
  min-height: 100vh; /* Full viewport height */
  padding-top: var(--space-2xl); /* Account for header */
  padding-bottom: var(--space-xl);
  text-align: center;
  /* Use flex to center vertically if content is short, or allow scroll */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md); /* Reduced gap to fit everything */
  max-width: 800px;
  margin: 0 auto;
}

.hero-symbol {
  width: clamp(150px, 30vw, 200px);
  height: auto;
}

.hero-text {
  font-weight: var(--weight-light);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-wide);
}

.scroll-indicator {
  margin-top: var(--space-xl);
  color: var(--color-accent);
  opacity: 0;
  animation: fade-in-up 1s ease-out 1s forwards, bounce 2s infinite 2s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* TENSION */
.section-tension {
  text-align: center;
}

.tension-content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* explicit centering of children */
  gap: var(--space-md);
}

.tension-line-1 {
  font-size: var(--size-subheading);
  font-weight: var(--weight-light);
  color: var(--color-text);
}

.countdown-line {
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  margin: var(--space-md) 0;
}

.tension-line-2 {
  font-size: var(--size-body);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* SYMBOLIKA */
.section-symbols {
  padding: var(--space-xl) 0;
  min-height: auto;
}

.symbols-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-lg);
  max-width: 800px;
  margin: 0 auto;
}

.symbol-item {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duration-normal) ease;
}

.symbol-item svg {
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.symbol-item:hover svg {
  transform: scale(1.05);
}

/* CTA */
.section-cta {
  text-align: center;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* explicit centering of children */
  gap: var(--space-md);
  align-items: center;
}

.cta-heading {
  font-weight: var(--weight-light);
  color: var(--color-text);
}

/* STATUS */
.section-status {
  min-height: auto;
  padding: var(--space-lg) 0;
}

.status-content {
  text-align: center;
}

.status-text {
  font-size: var(--size-small);
  color: var(--color-text-muted);
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  justify-content: center;
}

.status-dot {
  opacity: 0.5;
  animation: pulse 2s ease-in-out infinite;
}

.countdown-text {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* FOOTER */
.section-footer {
  min-height: auto;
  padding: var(--space-lg) 0;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.footer-toggles {
  display: none; /* Hidden in footer, moved to header */
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  opacity: 0.5;
  transition: opacity var(--duration-normal) ease;
}

.footer-social a:hover,
.footer-social a:focus {
  opacity: 1;
}

.footer-copyright {
  font-size: var(--size-small);
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* Responsive Breakpoints */

@media (min-width: 480px) {
  .container {
    padding: 0 2rem;
  }
}

@media (min-width: 768px) {
  .container {
    padding: 0 3rem;
  }

  .symbols-grid {
    grid-template-columns: repeat(3, 1fr);
    justify-items: center; /* Ensure items are centered in their cells */
  }

  .symbol-item:nth-child(1) {
    grid-column: 1 / -1;
    margin-bottom: var(--space-md);
  }

  .symbol-item:nth-child(1) svg {
    width: 144px; /* 120px + 20% */
    height: 144px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 4rem;
  }

  .footer-content {
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
}

/* Canvas Background Layers */
.canvas-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allow clicks to pass through */
}

#canvas-layer-1 {
  z-index: -2; /* Further back */
}

#canvas-layer-2 {
  z-index: -1; /* Slightly forward */
}