/* ==========================================================================
   MANDM N FRIENDS — "The Return" launch page (single-page, flyer-matched)
   Locked palette only — Teal #042725 / Gold #FCC60E.
   Display font: Action Comics Black, matching the flyer's comic-poster
   lettering directly.
   Body/UI font: Poppins, as specified.
   Both self-hosted from /fonts — no external font requests at all.
   ========================================================================== */

@font-face {
  font-family: 'Action Comics';
  src: url('../fonts/action-comics-black-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --teal: #042725;
  --teal-2: #06110f;
  --gold: #FCC60E;
  --white: #F5F7F6;
  --muted: #9FB0AD;
  --muted-dim: #5d716e;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif;
  color: var(--white);
  background: var(--teal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

button { font-family: inherit; }

/* ---------- Textured backdrop ---------- */

.stage {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 0%, #0b3f3a 0%, var(--teal) 45%, var(--teal-2) 100%);
}

/* halftone dot layer */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.4px);
  background-size: 7px 7px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

/* fine grain layer */
.grain {
  position: absolute;
  inset: -20%;
  background-image: url('../images/grain.png');
  background-repeat: repeat;
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
  animation: grain-shift 9s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-2%,1%); }
  40%  { transform: translate(1%,-2%); }
  60%  { transform: translate(-1%,-1%); }
  80%  { transform: translate(2%,2%); }
  100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* faded performer/halftone watermark, screen-blended so blacks vanish */
.watermark {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 150%);
  max-width: none;
  opacity: 0.16;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* radiating faint scratch lines */
.scratches {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      100deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 90px
    );
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

/* grunge/scratch/halftone texture pack, screen-blended so its black vanishes */
.grunge {
  position: absolute;
  inset: 0;
  background-image: url('../images/grunge-overlay.jpg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.08;
  pointer-events: none;
  z-index: 2;
}

/* VHS/glitch noise layer, screen-blended, faint flicker */
.glitch-layer {
  position: absolute;
  inset: 0;
  background-image: url('../images/glitch-overlay.jpg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.07;
  pointer-events: none;
  z-index: 2;
  animation: glitch-flicker 6s ease-in-out infinite;
}
@keyframes glitch-flicker {
  0%, 92%, 100% { opacity: 0.07; }
  93% { opacity: 0.12; transform: translateX(-1px); }
  94% { opacity: 0.04; transform: translateX(1px); }
  95% { opacity: 0.1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .glitch-layer { animation: none; }
}

/* chrome shard ornaments, bottom corners */
.shard {
  position: absolute;
  bottom: -2%;
  width: min(46vw, 460px);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(0,0,0,0.5));
}
.shard-left { left: -6%; }
.shard-right { right: -6%; }

@media (max-width: 640px) {
  .shard { width: 58vw; opacity: 0.85; }
}

/* ---------- Content column ---------- */

.content {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px 26px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: clamp(18px, 4vh, 34px);
  flex-wrap: wrap;
}

.brand-row img {
  height: clamp(44px, 6vh, 64px);
  width: auto;
}

h1.headline {
  font-family: 'Action Comics', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1rem, 3vw, 1.7rem);
  line-height: 1.55;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(14px, 3vh, 22px);
  transform: skewX(-3deg);
  text-shadow: 0 3px 0 rgba(0,0,0,0.35);
}
h1.headline .accent {
  color: var(--gold);
  display: inline-block;
  white-space: nowrap;
}
h1.headline .accent::after {
  content: '';
  display: inline-block;
  width: 0.06em;
  margin-left: 0.05em;
  height: 0.8em;
  background: var(--gold);
  vertical-align: -0.08em;
  animation: caret-blink 0.9s step-end infinite;
}
@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  h1.headline .accent::after { animation: none; }
}

.date-line {
  font-family: 'Action Comics', sans-serif;
  font-weight: 400;
  color: var(--white);
  font-size: clamp(1.6rem, 5vw, 2.7rem);
  letter-spacing: 0.03em;
  line-height: 1.5;
  transform: skewX(-6deg);
  margin: 0 0 clamp(10px, 2vh, 16px);
  text-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

.location-line {
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 clamp(26px, 5vh, 40px);
}
.location-line strong { color: var(--white); font-weight: 600; }

.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 20px 44px;
  cursor: pointer;
  transition: transform 0.12s ease;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.28)) drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}
.cta-btn-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.cta-btn span {
  position: relative;
  z-index: 1;
  font-family: 'Action Comics', sans-serif;
  color: var(--teal);
  font-size: clamp(0.85rem, 2.4vw, 1.3rem);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cta-btn:hover { transform: translateY(-2px); }
.cta-btn:active { transform: translateY(1px); }

.micro-note {
  margin-top: clamp(14px, 2.6vh, 20px);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.partnership-line {
  margin-top: clamp(20px, 4vh, 32px);
  font-size: 0.85rem;
  color: var(--muted);
}
.partnership-line a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}

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

.site-footer {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 18px 20px clamp(22px, 4vh, 34px);
}

.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.footer-social a {
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(159,176,173,0.35);
  border-radius: 50%;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }

.footer-handle {
  font-size: 0.8rem;
  color: var(--muted-dim);
  letter-spacing: 0.04em;
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,15,14,0.82);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--teal-2);
  border: 1px solid rgba(252,198,14,0.25);
  border-top: 4px solid var(--gold);
  border-radius: 8px;
  padding: 30px 26px 26px;
  transform: translateY(14px);
  transition: transform 0.18s ease;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: translateY(0); }

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.modal-close:hover { color: var(--gold); }

.modal-box h2 {
  font-family: 'Action Comics', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gold);
  font-size: clamp(0.8rem, 3.2vw, 1.05rem);
  line-height: 1.5;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.modal-box .modal-sub {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 20px;
}

.field { margin-bottom: 14px; text-align: left; }
.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.field input {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid rgba(159,176,173,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
}
.field input::placeholder { color: var(--muted-dim); }
.field input:focus { outline: none; border-color: var(--gold); }

.hp-field { position: absolute; left: -9999px; opacity: 0; }

.modal-submit {
  width: 100%;
  margin-top: 6px;
  font-family: 'Action Comics', sans-serif;
  background: var(--gold);
  color: var(--teal);
  border: none;
  padding: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.modal-submit:hover { background: #ffd94d; }
.modal-submit:disabled { opacity: 0.6; cursor: default; }

.form-status {
  margin-top: 12px;
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
}
.form-status.error { color: #ff8b8b; }

.modal-success {
  text-align: center;
  padding: 10px 0 4px;
}
.modal-success .big-check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
  font-weight: 700;
}
.modal-success h3 {
  font-family: 'Action Comics', sans-serif;
  color: var(--white);
  text-transform: uppercase;
  margin: 0 0 8px;
  font-size: clamp(0.8rem, 3.2vw, 1.05rem);
  line-height: 1.5;
  white-space: nowrap;
}
.modal-success p { color: var(--muted); font-size: 0.9rem; margin: 0; }

[hidden] { display: none !important; }