/* ───────────────────────────────────────────────
   Extra Section Styles – About / Collective / Video
   Each section gets its own semi‑transparent layer of black so
   the vivid cosmic background is muted but still visible.
   ----------------------------------------------------------- */

/* ABOUT – slightly lighter overlay (60% opacity) */
.about-section {
  position: relative;
  padding: 80px 20px;
  color: #e8e8e8;
  z-index: 1;
  text-align: center;
}
.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(2px);
  /* subtle glass effect to diffuse the frenetic bg colours */
  z-index: -1;
}

/* CTA wrapper for Join button */
.collective-cta{ margin-top:18px; text-align:center; }

/* JOIN THE COLLECTIVE – deeper overlay (75% opacity) */
.collective-section {
  position: relative;
  padding: 80px 20px;
  color: #f0f0f0;
  z-index: 1;
  text-align: center;
}
.collective-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(3px);
  z-index: -1;
}

/* Inline subscribe next to button */
.subscribe-inline{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 10px;
}

.subscribe-inline .email-input{
  padding:12px 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
  color:#f0f0f0;
  min-width:260px;
}

.subscribe-inline .email-input::placeholder{
  color:#bdbdbd;
}

/* Success state that replaces the inline subscribe UI */
.subscribe-success{
  margin-top: 12px;
  padding: 16px 18px;
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(51,204,255,.35);
  border-radius: 10px;
  box-shadow: inset 0 0 24px rgba(51,204,255,.20), 0 0 14px rgba(51,204,255,.15);
}
.subscribe-success h4{
  margin: 0 0 6px 0;
  color: #f2fcff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  animation: textGlow 3s infinite alternate;
}
.subscribe-success p{
  margin: 0;
  color: #c9c9c9;
}

/* Responsive stack */
@media (max-width: 600px){
  .subscribe-inline{
    flex-direction:column;
    align-items:stretch;
  }
}

/* Modal overlay/base */
.modal-overlay{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* explicit for older browsers */
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,.65);
  display: none; /* toggled to grid in JS */
  align-items: center; /* flex fallback */
  justify-content: center; /* flex fallback */
  place-items: center; /* grid centering */
  z-index: 9999;
}

.modal{
  position: relative;
  width: min(620px, 92vw);
  background: rgba(20,20,20,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 22px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  max-height: 85vh;
  overflow: auto;
}

.modal h3{ margin-top:0; color:#f2fcff; text-transform:uppercase; letter-spacing:1px; }
.modal p{ color:#c9c9c9; }

.modal .form-row{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.modal label{ font-size:.9rem; color:#d8d8d8; }
.modal input, .modal select, .modal textarea{
  padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25); color:#f2f2f2;
}

.modal .actions{ display:flex; justify-content:flex-end; }

.modal-close{
  position:absolute; top:10px; right:14px; background:transparent; border:none; color:#f0f0f0; font-size:28px; cursor:pointer;
}

/* Prevent background scroll when modal is open */
body.modal-open{ overflow: hidden; }

/* ---------- ARCHIVE / VIDEO WRAPPER (70% opacity) ---------- */
.archive-section {
  position: relative;
  padding: 80px 20px 60px;
  color: #eaeaea;
  z-index: 0;
}
.archive-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  /* DO NOT blur – keeps text crisp */
  z-index: -1;
  border-radius: 6px;
}

/* Optional: add inner shadow around the video only */
.archive-section .responsive-video {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.archive-section .responsive-video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}

/* Shared heading style tweaks (optional) */
.about-section h2,
.collective-section h2 {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 2rem;
  color: #f2fcff;
  animation: textGlow 3s infinite alternate;
}

/* If the timeline/scrollytell makes the text too close to the edge on mobile */
@media (max-width: 768px) {
  .about-section,
  .collective-section {
    padding: 60px 15px;
  }
}