/* =================================================================
   BattleBros Royale - styles.css
   Bright, arcade, toybox. Flat saturated colors, chunky rounded
   shapes, soft drop-shadows. Mobile-first.
   ================================================================= */

:root {
  /* ---- Style tokens ---- */
  --amber:  #FF9A3C;
  --orange: #FF6B2C;
  --sky:    #3FA9F5;
  --ink:    #1C1A22;
  --cream:  #FBF3E2;
  --green:  #7ED957;

  /* Soft sky blue used in the hero -> ink dusk blend */
  --sky-light: #7EC8F0;

  /* Derived shades for chunky 3D button shadows */
  --orange-deep: #D8521B;
  --green-deep:  #5BB23C;
  --orange-hi:   #FFB259; /* light top of the CTA gradient */

  /* Sunset fallback (also the hero gradient) */
  --sunset: linear-gradient(180deg, #FF9A3C 0%, #FF6B2C 45%, #3A2A5C 100%);

  /* Shape + motion */
  --radius:   16px;
  --radius-lg: 24px;
  --tap: 48px; /* minimum tap target */
  --shadow-soft: 0 10px 30px rgba(28, 26, 34, 0.18);
  --shadow-card: 0 18px 50px rgba(28, 26, 34, 0.22);

  --font-display: "Bowlby One", "Luckiest Guy", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ink); /* backdrop for the continuous dusk->ink page flow */
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* =================================================================
   BUTTONS - chunky, with a satisfying physical press
   ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 16px 30px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg, var(--amber), var(--orange));
  /* The solid offset shadow = the "thickness" of the button. */
  box-shadow: 0 6px 0 var(--orange-deep), 0 12px 22px rgba(216, 82, 27, 0.35);
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.05); }
.btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--orange-deep), 0 6px 12px rgba(216, 82, 27, 0.3);
}
.btn:focus-visible {
  outline: 4px solid rgba(63, 169, 245, 0.9);
  outline-offset: 3px;
}

/* Hero CTA: sleek, flat cream button with dark text. Understated, not toybox.
   Title case (the base uppercase transform is cancelled here). */
.btn-cta {
  font-size: 1.05rem;
  font-weight: 800;
  padding: 14px 30px;
  border-radius: 0;          /* sharp square box */
  letter-spacing: 0.01em;
  text-transform: none;
  margin-top: clamp(18px, 2.6vh, 26px); /* matches .hero-date for even rhythm */
  color: var(--ink);
  background: var(--cream);
  border: 1px solid rgba(28, 26, 34, 0.08);
  text-shadow: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-cta:hover {
  transform: translateY(-2px);
  filter: none;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}
.btn-cta:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28);
}

.btn-submit {
  width: 100%;
  font-size: 1.2rem;
  padding: 18px 30px;
  margin-top: 6px;
}

/* =================================================================
   1) HERO
   ================================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* better mobile viewport unit where supported */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* anchor content near the top, not centered */
  text-align: center;
  overflow: hidden;
  /* generous top padding drops the logo+tagline block into the top third */
  padding: clamp(56px, 13vh, 150px) 24px 24px;
}

/* Background layer. The hero art fills the whole viewport edge to edge (cover),
   biased to "center 40%" so the two characters in the lower-center stay in frame
   when the sides get cropped. A small oversize (inset -10%) gives the gentle
   scroll parallax room to move without ever revealing an edge. The backdrop
   gradient sits behind as a fallback in case hero.jpg is missing. */
.hero-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-image:
    url("/public/hero.jpg"),
    linear-gradient(180deg,
      #FF9A3C 0%,
      var(--sky-light) 40%,
      var(--ink) 100%);
  background-size: cover, cover;
  background-position: center 40%, center;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--ink);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Foggy fade across a tall region so the hero melts into the dark section with
   no visible seam at any screen size. Reaches full ink exactly at the bottom,
   and the section below starts in that same ink. */
.hero-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(28,26,34,0) 0%,
    rgba(28,26,34,0.10) 35%,
    rgba(28,26,34,0.40) 62%,
    rgba(28,26,34,0.78) 84%,
    var(--ink) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* spacing handled by explicit margins for an even hero rhythm */
  max-width: 760px;
  width: 100%;
}

.hero-logo { width: min(80vw, 560px); height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4)); }

/* Hidden until JS confirms a clean load (replaces inline style="display:none"). */
.is-hidden { display: none !important; }

/* Honeypot: pushed off-screen, not focusable, invisible to real users. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Stacked two-line wordmark in Anton (tall, condensed): "BATTLEBROS" big,
   "ROYALE" smaller beneath. White face with a deep layered purple-to-dark
   extrude so the letters read solid and three-dimensional. Each letter is
   tilted a degree or two for a hand-placed, knocked-around look. */
.logo-fallback {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Anton", var(--font-display);
  font-weight: 400;
  line-height: 0.9;
  color: #fff;
  text-shadow:
    0 2px 0 #7A5BA6,                  /* purple rim under the face */
    0 4px 0 #5A3E84,
    0 6px 0 #46306A,                  /* extruded body: purple into dark */
    0 8px 0 #2c1d44,
    0 10px 0 #241734,
    0 12px 0 #1b1228,
    0 16px 22px rgba(74,46,110,0.6),  /* soft purple glow / reflection */
    0 26px 42px rgba(0,0,0,0.55);     /* deep floor shadow for depth */
}
.logo-line1 {
  font-size: clamp(3.4rem, 16vw, 8.5rem);
  letter-spacing: 0.015em;
}
.logo-line2 {
  /* clear gap below BATTLEBROS, tighter tracking; text-indent re-centers it. */
  font-size: clamp(1.8rem, 8.5vw, 4.6rem);
  letter-spacing: -0.01em;
  text-indent: -0.01em;
  margin-top: clamp(10px, 2.2vw, 22px);
}

/* Per-letter askew: each glyph is its own inline-block, tilted a touch. The
   small cycle of rotations keeps it hand-placed, not rigidly straight. */
.logo-line1 span,
.logo-line2 span { display: inline-block; }
.logo-line1 span:nth-child(5n+1), .logo-line2 span:nth-child(5n+1) { transform: rotate(-2.5deg) translateY(1px); }
.logo-line1 span:nth-child(5n+2), .logo-line2 span:nth-child(5n+2) { transform: rotate(1.5deg); }
.logo-line1 span:nth-child(5n+3), .logo-line2 span:nth-child(5n+3) { transform: rotate(-1deg) translateY(-1px); }
.logo-line1 span:nth-child(5n+4), .logo-line2 span:nth-child(5n+4) { transform: rotate(2.5deg) translateY(1px); }
.logo-line1 span:nth-child(5n+5), .logo-line2 span:nth-child(5n+5) { transform: rotate(-1.8deg); }

/* Big "June 17" date highlight, Anton with the same 3D depth as the logo.
   margin-top matches the button's so the tagline / date / button rhythm is even.
   display:flex removes inline descender slack so the gaps read symmetric. */
.hero-date {
  margin: clamp(18px, 2.6vh, 26px) 0 0;
  display: flex;
  justify-content: center;
  font-family: "Anton", var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow:
    0 2px 0 #7A5BA6,
    0 4px 0 #5A3E84,
    0 6px 0 #2c1d44,
    0 8px 0 #1b1228,
    0 10px 16px rgba(74,46,110,0.5),
    0 14px 24px rgba(0,0,0,0.45);
}
/* tilt on an inner span so the reveal transform does not cancel it */
.hero-date span { display: inline-block; transform: rotate(-1.5deg); }

.tagline {
  margin: clamp(20px, 3.2vh, 30px) 0 0;
  font-size: clamp(1.05rem, 4.4vw, 1.55rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--cream);
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  max-width: 22ch;
}

/* =================================================================
   2) SIGNUP - cream floating card over the deep ink night
   ================================================================= */
/* The hero fades to ink at its base, so the signup is simply ink and flows
   straight into the ink footer, one continuous dark night, no seam. The cream
   card pops against it. */
.signup {
  position: relative;
  padding: clamp(48px, 9vw, 96px) 20px;
  background: var(--ink);
}

.signup-card {
  background: var(--cream);
  max-width: 700px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 52px);
  border-radius: 0;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(28, 26, 34, 0.08);
}

.signup-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 154, 60, 0.45);
}

.signup-intro {
  margin: 0 0 30px;
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 600;
  color: #5a5563;
}

/* ---- Form fields ---- */
.field { display: block; margin-bottom: 22px; }

.field-label {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  color: #8a8290;
  margin-bottom: 9px;
}
.field-label em { font-style: normal; font-weight: 700; text-transform: none; letter-spacing: 0; color: #b0a899; }

input[type="email"],
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  background: #fffdf8;
  border: 2px solid #e3d8bf;
  border-radius: 14px;
  padding: 15px 16px;
  min-height: var(--tap);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
textarea { resize: vertical; line-height: 1.55; }

input[type="email"]::placeholder,
textarea::placeholder {
  color: #bcb29c; /* faint */
  font-weight: 600;
}

input[type="email"]:focus,
textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.16);
}

/* ---- Custom chunky checkbox ---- */
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  cursor: pointer;
  font-weight: 700;
  padding: 6px 0;
  min-height: var(--tap);
}
.checkbox-field input { position: absolute; opacity: 0; width: 0; height: 0; }

.checkbox-box {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 8px;
  background: #fffdf8;
  border: 2px solid #e3d8bf;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.checkbox-box::after {
  content: "";
  position: absolute;
  left: 9px; top: 4px;
  width: 7px; height: 13px;
  border: solid #fff;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.12s ease;
}
.checkbox-field input:checked + .checkbox-box {
  background: var(--orange);
  border-color: var(--orange-deep);
}
.checkbox-field input:checked + .checkbox-box::after { transform: rotate(45deg) scale(1); }
.checkbox-field input:focus-visible + .checkbox-box {
  outline: 4px solid rgba(63, 169, 245, 0.9);
  outline-offset: 2px;
}
.checkbox-text { font-size: 1rem; }

/* ---- Inline status message ---- */
.form-status {
  margin: 16px 0 0;
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
  border-radius: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.form-status.show { max-height: 200px; opacity: 1; padding: 14px 16px; }
.form-status.success { background: rgba(126, 217, 87, 0.22); color: #2f7d12; }
.form-status.error   { background: rgba(255, 107, 44, 0.18); color: var(--orange-deep); }

/* =================================================================
   3) FOOTER
   ================================================================= */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 48px 20px 56px;
  text-align: center;
}
.footer-inner { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }

.socials { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.social-link {
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: rgba(251, 243, 226, 0.1);
  color: var(--cream);
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}
.social-link:hover { transform: translateY(-3px); background: var(--orange); color: #fff; }
.social-link:focus-visible { outline: 4px solid var(--sky); outline-offset: 2px; }

.footer-contact a {
  font-weight: 800;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.footer-contact a:hover { border-bottom-color: var(--amber); }

.footer-fineprint {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(251, 243, 226, 0.6);
  max-width: 46ch;
}

/* =================================================================
   ENTRANCE ANIMATIONS
   .reveal           = hero items, animated in on load by script.js
   .reveal-on-scroll = items animated in when scrolled into view
   ================================================================= */
.reveal,
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible,
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered hero entrance */
.hero-content .reveal:nth-child(1) { transition-delay: 0.10s; }
.hero-content .reveal:nth-child(2) { transition-delay: 0.22s; }
.hero-content .reveal:nth-child(3) { transition-delay: 0.34s; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (min-width: 700px) {
  .signup-card { padding: 52px; }
}

@media (max-width: 380px) {
  .btn { font-size: 0.95rem; padding: 14px 22px; }
  .btn-cta { font-size: 1rem; padding: 16px 26px; }
}

/* =================================================================
   REDUCED MOTION - honor the OS setting. Kill transitions/animations
   here; script.js also skips parallax + particles when this is set.
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-on-scroll { opacity: 1; transform: none; }
  .hero-bg { transform: none; }
}