/* ==========================================================================
   Quite Loud — landing page styles
   Palette: #41B649 (signal green) / #000000 (stage black) / #F3FFE9 (flyer cream)
   Type:    Permanent Marker (display) + Space Grotesk (body) via Google Fonts
   ========================================================================== */

:root {
  --green: #41b649;
  --black: #000000;
  --cream: #f3ffe9;
  --green-glow: rgba(65, 182, 73, 0.35);
  --green-faint: rgba(65, 182, 73, 0.12);
  --card: #060d07;

  --font-display: "Permanent Marker", cursive;
  --font-body: "Space Grotesk", system-ui, sans-serif;

  --max-width: 68rem;
  --radius: 0.75rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* ----- A11y helpers ----- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3.5rem;
  z-index: 100;
  background: var(--green);
  color: var(--black);
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0.75rem;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Header / nav (room for a future full menu)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--green-faint);
}

.site-nav {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1.25rem;
}

.nav-brand {
  text-decoration: none;
}

.nav-brand-mark {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--green);
  letter-spacing: 0.05em;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

/* ==========================================================================
   Ambient cicadas
   ========================================================================== */
.cicada-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.cicada {
  position: absolute;
  width: clamp(40px, 6vw, 72px);
  height: auto;
  /* the source image has a black background; screen blending drops it out */
  mix-blend-mode: screen;
  opacity: 0.8;
  filter: drop-shadow(0 0 10px var(--green-glow));
}

.cicada-1 {
  top: 12%;
  animation: fly-across 26s linear infinite;
}

.cicada-2 {
  top: 55%;
  animation: fly-across 38s linear infinite reverse;
  animation-delay: -14s;
}

.cicada-3 {
  top: 80%;
  animation: fly-across 31s linear infinite;
  animation-delay: -7s;
}

@keyframes fly-across {
  0% {
    transform: translateX(-12vw) translateY(0) rotate(8deg);
  }
  25% {
    transform: translateX(28vw) translateY(-4vh) rotate(-6deg);
  }
  50% {
    transform: translateX(60vw) translateY(3vh) rotate(10deg);
  }
  75% {
    transform: translateX(86vw) translateY(-3vh) rotate(-8deg);
  }
  100% {
    transform: translateX(112vw) translateY(0) rotate(8deg);
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: calc(100svh - 3.4rem);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3rem 1.25rem 4rem;
  isolation: isolate;
}

/* ==========================================================================
   Ambient smoke — drifts across the whole page, seamless loop
   (smoke-tile.webp is a mirrored tile, so repeat-x has no visible seam;
   animating transform keeps it on the GPU compositor — no repaints)
   ========================================================================== */
.smoke-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.smoke-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("../assets/smoke-tile.webp");
  background-repeat: repeat-x;
  background-position: left bottom;
  will-change: transform;
}

/* far layer: bigger tile, fainter, drifts right slowly */
.smoke-far {
  opacity: 0.55;
  width: calc(100% + 1920px);
  background-size: 1920px auto;
  animation: smoke-roll-right 110s linear infinite;
}

/* near layer: smaller tile, brighter, drifts left a bit faster */
.smoke-near {
  opacity: 0.75;
  width: calc(100% + 1280px);
  background-size: 1280px auto;
  animation: smoke-roll-left 60s linear infinite;
}

/* fog bank pinned to the bottom of the viewport, always visible.
   Sits above content (but below the header) with screen blending,
   so it reads as fog rolling over the stage floor. */
.smoke-floor {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24vh;
  z-index: 40;
  pointer-events: none;
  background-image: url("../assets/smoke-tile.webp");
  background-repeat: repeat-x;
  background-size: 960px auto;
  background-position: left bottom;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(to top, black 35%, transparent 100%);
  mask-image: linear-gradient(to top, black 35%, transparent 100%);
  animation: smoke-floor-roll 70s linear infinite;
  will-change: background-position;
}

/* Each layer loops by translating exactly one of its own tile widths —
   the mirrored tile makes the wrap-around invisible. */
@keyframes smoke-roll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-1280px); }
}

@keyframes smoke-roll-right {
  from { transform: translateX(-1920px); }
  to   { transform: translateX(0); }
}

/* The floor band loops via background-position (it's a thin strip,
   so the paint cost is negligible). 960px = one full tile width. */
@keyframes smoke-floor-roll {
  from { background-position: 0 bottom; }
  to   { background-position: -960px bottom; }
}

.hero-inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}

.hero-logo {
  width: clamp(160px, 32vw, 260px);
  filter: drop-shadow(0 0 24px var(--green-glow));
  animation: logo-in 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes logo-in {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-6deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.hero-tag {
  margin: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-tag-line {
  display: block;
}

.x-mark {
  color: var(--green);
}

/* Equalizer bars */
.hero-meter {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 42px;
  margin: 0;
}

.hero-meter .bar {
  width: 6px;
  background: var(--green);
  border-radius: 3px 3px 0 0;
  animation: meter 1.1s ease-in-out infinite alternate;
}

.hero-meter .bar:nth-child(odd) {
  animation-duration: 0.8s;
}

.hero-meter .bar:nth-child(3n) {
  animation-duration: 1.4s;
}

.hero-meter .bar:nth-child(4n) {
  animation-duration: 0.65s;
}

@keyframes meter {
  from {
    height: 18%;
  }
  to {
    height: 100%;
  }
}

.hero-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  color: var(--black);
  background: var(--green);
  text-decoration: none;
  padding: 0.8rem 1.8rem;
  border-radius: var(--radius);
  transform: rotate(-1.5deg);
  box-shadow: 0 0 0 0 var(--green-glow);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.hero-cta:hover {
  transform: rotate(1deg) scale(1.04);
  box-shadow: 0 0 32px 4px var(--green-glow);
}

/* ==========================================================================
   Sections (shared)
   ========================================================================== */
section {
  position: relative;
  z-index: 2;
}

.section-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 4.5rem 1.25rem;
}

.eyebrow {
  margin: 0 0 0.4rem;
  color: var(--green);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--cream);
}

.accent {
  color: var(--green);
}

/* Scroll-reveal (JS adds .revealed; no-JS users see everything) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   The single / streaming
   ========================================================================== */
.single {
  border-top: 1px solid var(--green-faint);
  background:
    radial-gradient(ellipse at 50% 0%, var(--green-faint), transparent 60%);
}

.single-copy {
  max-width: 46ch;
}

.stream-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  list-style: none;
  margin: 1.75rem 0 0.75rem;
  padding: 0;
}

.stream-link {
  display: inline-block;
  color: var(--cream);
  border: 2px solid var(--green);
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.stream-link:hover {
  background: var(--green);
  color: var(--black);
  transform: translateY(-2px);
}

.placeholder-note {
  font-size: 0.85rem;
  opacity: 0.75;
  margin: 0.25rem 0 0;
}

/* ==========================================================================
   Social beacon — the signature element
   ========================================================================== */
.beacon {
  text-align: center;
  border-top: 1px solid var(--green-faint);
}

.beacon-copy {
  max-width: 42ch;
  margin-inline: auto;
}

.beacon-dish {
  position: relative;
  width: min(420px, 86vw);
  aspect-ratio: 1;
  margin: 3rem auto 0;
  display: grid;
  place-items: center;
}

.beacon-rings .ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 2px solid var(--green);
  border-radius: 50%;
  opacity: 0;
  animation: pulse 3.6s ease-out infinite;
}

.ring-1 { width: 38%; height: 38%; animation-delay: 0s; }
.ring-2 { width: 38%; height: 38%; animation-delay: 1.2s; }
.ring-3 { width: 38%; height: 38%; animation-delay: 2.4s; }

@keyframes pulse {
  0% {
    transform: scale(0.55);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.beacon-core {
  width: 26%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px var(--green-glow));
  animation: core-buzz 5s ease-in-out infinite;
}

@keyframes core-buzz {
  0%, 100% { transform: rotate(0deg) scale(1); }
  45% { transform: rotate(3deg) scale(1.04); }
  55% { transform: rotate(-3deg) scale(1.04); }
}

.beacon-links {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

.orbit {
  position: absolute;
}

.orbit a {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  color: var(--cream);
  text-decoration: none;
  transform: translate(-50%, -50%);
  transition: color 0.2s ease;
}

.orbit a:hover {
  color: var(--green);
}

.orbit a:hover svg {
  transform: scale(1.18);
  filter: drop-shadow(0 0 12px var(--green-glow));
}

.orbit svg {
  background: var(--card);
  border: 2px solid var(--green);
  border-radius: 50%;
  padding: 0.7rem;
  width: clamp(44px, 8vw, 56px);
  height: clamp(44px, 8vw, 56px);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.orbit-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* five points around the circle (72° apart, starting at top) */
.orbit-1 { left: 50%;    top: 8%; }
.orbit-2 { left: 89.9%;  top: 37%; }
.orbit-3 { left: 74.7%;  top: 84%; }
.orbit-4 { left: 25.3%;  top: 84%; }
.orbit-5 { left: 10.1%;  top: 37%; }

/* ==========================================================================
   Feeds
   ========================================================================== */
.feeds {
  border-top: 1px solid var(--green-faint);
}

.feeds-copy {
  max-width: 52ch;
}

.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}

.feed-card {
  background: var(--card);
  border: 1px solid var(--green-faint);
  border-radius: var(--radius);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.feed-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
}

.feed-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0;
  color: var(--green);
}

.feed-card p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

.feed-load {
  margin-top: auto;
  font: 700 0.95rem var(--font-body);
  color: var(--black);
  background: var(--green);
  border: 2px solid var(--green);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.feed-load:hover {
  background: transparent;
  color: var(--green);
}

/* ==========================================================================
   About
   ========================================================================== */
.about {
  border-top: 1px solid var(--green-faint);
}

.about p {
  max-width: 60ch;
}

.about strong {
  color: var(--green);
  font-weight: 700;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--green-faint);
  text-align: center;
  padding: 3rem 1.25rem 2.5rem;
  position: relative;
  z-index: 2;
}

.footer-mark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--green);
  margin: 0 0 1rem;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.footer-social a {
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-social a:hover {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-fine {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.7;
}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media (max-width: 600px) {
  .nav-links {
    gap: 1rem;
  }

  .nav-links a {
    font-size: 0.82rem;
  }

  .orbit-label {
    font-size: 0.68rem;
  }

  .section-inner {
    padding: 3.25rem 1.1rem;
  }
}

/* ==========================================================================
   Reduced motion: keep it calm
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cicada-field {
    display: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}