/* Endgame Townhall 2026 — Coming Soon
   Implemented from Figma node 1:79 (DT-Coming soon-v6, desktop) and
   33:907 (MB-Coming soon-v6.2, mobile). */

/* BDO Grotesk (SIL OFL 1.1) — self-hosted. Inter stays in the stack only
   as the font-display:swap fallback while these load. */
@font-face {
  font-family: "BDO Grotesk";
  src: url("assets/fonts/BDOGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BDO Grotesk";
  src: url("assets/fonts/BDOGrotesk-DemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: #000;
}

body {
  font-family: "BDO Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  color: #fff;
  overflow-x: hidden;
}

.stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Animated gradient glows ---------- */

.glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.glow img {
  position: absolute;
  max-width: none;
  width: 100%;
  height: 100%;
}

/* Frame: 1134x564 @ (153, -463) in a 1440x1024 frame */
.glow-top {
  width: 78.75%;
  aspect-ratio: 1134 / 564;
  left: 10.6%;
  top: -45.2svh;
  animation: pulse-top 5s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}

/* SVG blur bleed: inset -17.73% -8.82% */
.glow-top img {
  left: -8.82%;
  top: -17.73%;
  width: 117.64%;
  height: 135.46%;
}

/* Frame: 1230x444 @ (105, 970) in a 1440x1024 frame */
.glow-bottom {
  width: 85.4%;
  aspect-ratio: 1230 / 444;
  left: 7.3%;
  top: 94.7svh;
  animation: pulse-bottom 5s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}

/* SVG blur bleed: inset -22.52% -8.13% */
.glow-bottom img {
  left: -8.13%;
  top: -22.52%;
  width: 116.26%;
  height: 145.04%;
}

/* The SVGs carry Figma's 100px layer blur baked in. The pulse animates
   only transform + opacity (compositor-friendly — animating filter: blur()
   here tanked Firefox to <40fps); the scale-up plus slight fade reads the
   same as Figma's blur increase. */
@keyframes pulse-top {
  from {
    transform: scale(0.927);
    opacity: 1;
  }
  to {
    transform: scale(1.448);
    opacity: 0.72;
  }
}

@keyframes pulse-bottom {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.225);
    opacity: 0.72;
  }
}

/* Dampens the glows so black stays dominant (Figma's #070707
   soft-light "Blur" layer). Sits above the glows, below the text. */
.tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #070707;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ---------- Logo ---------- */

/* Full size during the intro; shrinks (anchored to its top edge) together
   with the headline rise so the final layout has more breathing room. */
.logo {
  position: relative;
  z-index: 3;
  width: 217.57px;
  height: 60px;
  margin-top: clamp(48px, 8.69svh, 89px);
  flex-shrink: 0;
  transform: scale(0.78);
  transform-origin: 50% 0;
  transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.intro .logo {
  transform: scale(1);
}

.logo img {
  position: absolute;
  max-width: none;
}

/* inset: 0 28.22% 60.68% 28.22% */
.logo-endgame {
  left: 28.22%;
  top: 0;
  width: 43.56%;
  height: 39.32%;
}

/* inset: 48.05% -0.01% -0.01% 0 */
.logo-townhall {
  left: 0;
  top: 48.05%;
  width: 100%;
  height: 51.96%;
}

/* ---------- Headline ---------- */

/* The block is centered as a unit; lines keep their left-anchored stagger.
   During the intro it is enlarged and shifted to the middle of the viewport
   (see .intro .headline); when the intro ends it shrinks and rises into
   this resting position, making room for the signup section. */
.headline {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  margin: 28px auto 0;
  font-size: clamp(28px, 4.9vw, 70px);
  font-weight: 600;
  line-height: 1.2115;
  text-align: left;
  white-space: nowrap;
  transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.headline .line {
  display: block;
}

/* Stagger: line 2 flush left, line 1 indented; line 3 right-aligned so its
   right edge lines up with line 1's right edge (the block's widest extent). */
.line-1 {
  margin-left: 2.4em;
}

.line-3 {
  text-align: right;
}

/* ---------- Intro (first page load only) ---------- */
/* Headline lines materialize one by one (top, middle, bottom) with the
   gooey alpha-threshold morph from 21st.dev morphing-text. While the class
   `intro` is on <html>, the signup block is held; script.js removes the
   class when the sequence finishes and the page settles (no looping blur). */

/* Big and vertically centered while the lines morph in.
   --intro-shift is measured by script.js (distance from the resting
   position to the viewport center); 24svh is the no-JS fallback. */
.intro .headline {
  filter: url(#threshold) blur(0.6px);
  transform: translateY(var(--intro-shift, 24svh)) scale(1.35);
}

.intro .headline .line {
  opacity: 0;
  animation: line-in 1.1s cubic-bezier(0.25, 0.6, 0.3, 1) forwards;
  will-change: filter, opacity;
}

.intro .headline .line-1 {
  animation-delay: 0.1s;
}

.intro .headline .line-2 {
  animation-delay: 0.75s;
}

.intro .headline .line-3 {
  animation-delay: 1.4s;
}

/* The parent's threshold filter snaps the soft blurred alpha into
   ink-like blobs, so each line "condenses" into place. */
/* Blur is in em so the gooey morph reads identically at every
   headline size (70px desktop, ~37px mobile). */
@keyframes line-in {
  from {
    opacity: 0.02;
    filter: blur(0.55em);
  }
  70% {
    opacity: 0.85;
  }
  to {
    opacity: 1;
    filter: blur(0em);
  }
}

.intro .signup {
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
}

/* ---------- Email submission ---------- */

.signup {
  position: relative;
  z-index: 3;
  width: min(558px, calc(100% - 48px));
  margin-top: clamp(56px, 9.5svh, 104px);
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* Slight delay so the headline visibly rises first, then the form follows */
  transition: opacity 0.9s ease 0.25s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.signup-title {
  font-size: clamp(20px, 1.95vw, 28px);
  text-align: center;
  width: 100%;
}

#signup-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.email-input {
  width: 100%;
  height: 48px;
  padding: 12px;
  background: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  color: #3f3f3f;
}

.email-input::placeholder {
  color: #3f3f3f;
  opacity: 1;
}

.email-input:focus {
  outline: 2px solid #f5b700;
  outline-offset: 1px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 12px;
  width: 100%;
  cursor: pointer;
}

.consent input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.checkbox {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
}

.checkbox::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid #fff;
  border-radius: 2px;
}

.consent input:checked + .checkbox::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.consent input:focus-visible + .checkbox::before {
  outline: 2px solid #f5b700;
  outline-offset: 2px;
}

.consent-text {
  flex: 1;
  font-size: 16px;
  line-height: normal;
  color: #fff;
}

/* Grainy orange-to-pink gradient (reference: Buy Ticket screenshot).
   The first background layer is an SVG turbulence noise tile blended
   over the diagonal gradient. */
.submit-btn {
  width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  background-color: #f4295f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #f9b233 0%, #f07a3d 45%, #f4295f 100%);
  background-blend-mode: overlay, normal;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  opacity: 0.45;
  cursor: not-allowed;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.submit-btn:enabled {
  opacity: 1;
  cursor: pointer;
}

.submit-btn:enabled:hover {
  filter: brightness(1.1);
}

.form-status {
  font-size: 16px;
  color: #f5b700;
  text-align: center;
  min-height: 1em;
}

/* ---------- Thank-you page ---------- */

.thanks {
  position: relative;
  z-index: 2;
  margin: auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  animation: fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.thanks-title {
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 600;
  line-height: 1.1;
}

.thanks-sub {
  font-size: clamp(15px, 1.25vw, 18px);
  color: #cfcfcf;
  max-width: 46ch;
}

.thanks-back {
  margin-top: 14px;
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease;
}

.thanks-back:hover {
  background: #fff;
  color: #080808;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Small screens ---------- */

/* Mobile layout per Figma MB-Coming soon-v6.2 (node 33:907, 390x844):
   centered headline without stagger, tighter leading, smaller logo,
   smaller form typography, subtler edge glows. */
@media (max-width: 640px) {
  .logo {
    width: 145px;
    height: 40px;
    transform: none;
  }

  .intro .logo {
    transform: none;
  }

  /* Logo at the top, hero centered in the leftover space (auto margins),
     signup anchored to the bottom. */
  .headline {
    margin-top: auto;
    margin-bottom: auto;
    font-size: clamp(27px, 8.9vw, 37px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-align: center;
    width: 100%;
  }

  .headline .line {
    margin-left: 0;
    text-align: center;
  }

  .intro .headline {
    transform: translateY(var(--intro-shift, 20svh)) scale(1.12);
  }

  .signup {
    gap: 16px;
    margin-top: 0;
    margin-bottom: 28px;
  }

  .signup-title {
    font-size: 20px;
  }

  .consent {
    padding: 0 8px;
  }

  .consent-text {
    font-size: 12px;
  }

  .submit-btn {
    padding: 8px 24px;
  }

  /* Gradasi atas: 364x181 @ (13, -120) in a 390x844 frame */
  .glow-top {
    width: 93%;
    left: 3.3%;
    top: -14svh;
  }

  /* Gradasi bawah: 399x144 @ centered, top 800 in a 390x844 frame */
  .glow-bottom {
    width: 102%;
    left: -1%;
    top: 94.8svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow-top,
  .glow-bottom,
  .intro .headline .line {
    animation: none;
  }

  .intro .headline .line {
    opacity: 1;
  }

  .intro .signup {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .signup {
    transition: none;
  }

  .headline,
  .logo {
    transition: none;
  }

  .intro .headline {
    transform: none;
  }
}