/* TYDRA — Coming Soon
   The hero is the approved reference image, shown unedited — no
   recreated logo/headline in HTML/CSS. Only an invisible hotspot sits
   over the button baked into the image so it stays truly clickable,
   and the email form reveals in normal flow just beneath it. */

:root {
  --black: #000000;
  --white: #ffffff;
  --teal: #2dd4e8;
  --teal-dim: rgba(45, 212, 232, 0.55);
  --teal-glow: rgba(45, 212, 232, 0.35);
  --muted: rgba(255, 255, 255, 0.6);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  background: var(--black);
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ───────── Hero (literal reference image) ───────── */

.hero {
  position: relative;
  width: 100%;
  opacity: 0;
  transform: scale(0.99);
  animation: reveal 1.2s var(--ease) 0.1s forwards;
}

.hero__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Invisible control positioned exactly over the "OPT IN FOR FUTURE
   DETAILS" pill baked into the image. Coordinates are percentages of
   the image's own box, so alignment holds at every viewport width
   since the image is never cropped — only ever scaled. */
.optin__hotspot {
  position: absolute;
  left: 5%;
  top: 62%;
  width: 26%;
  height: 10.5%;
  min-width: 140px;
  min-height: 40px;
  max-width: 380px;
  max-height: 90px;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
}

.optin__hotspot:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

.optin__hotspot[aria-expanded="true"] {
  pointer-events: none;
}

/* Covers baked-in text once a lead has been submitted. The fill itself is
   solid (not blurred) so it's fully opaque right up to its own edge — a
   blur filter on the element dilutes its own opacity at a box this size,
   leaving a faint ghost of whatever's underneath. The soft edge instead
   comes from a box-shadow, which darkens the surrounding pixels without
   touching the box's own opacity, blending it into the image's ambient
   glow rather than showing a hard rectangle. Two instances: one over
   "COMING SOON / 2026" (replaced by the success message), one over the
   "OPT IN FOR FUTURE DETAILS" pill (no longer relevant once signed up). */
.optin__mask {
  position: absolute;
  background: var(--black);
  border-radius: 28px;
  box-shadow: 0 0 40px 14px rgba(0, 0, 0, 0.9), 0 0 80px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
  z-index: 1;
}

.optin__mask--headline {
  left: 2%;
  top: 40%;
  width: 54%;
  height: 22%;
  min-height: 150px;
}

.optin__mask--button {
  left: 2%;
  top: 58%;
  width: 34%;
  height: 17%;
  min-width: 170px;
  min-height: 60px;
  border-radius: 999px;
}

body.is-success .optin__mask {
  opacity: 1;
}

/* Takes the place of the baked-in "COMING SOON / 2026" headline once a
   lead is submitted — position is a percentage of the image's own box, so
   it holds at every viewport width since the image is never cropped,
   only ever scaled. */
.optin__success {
  position: absolute;
  left: 5%;
  right: 48%;
  top: 46%;
  z-index: 2;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: var(--teal);
  animation: reveal 0.5s var(--ease) forwards;
}

.optin__success[hidden] {
  display: none;
}

/* ───────── Opt-in panel (reveals below the image, in normal flow —
   the image itself never changes) ───────── */

.optin__panel {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 64px);
}

.optin__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: clamp(20px, 3vw, 32px);
  padding-bottom: clamp(32px, 5vw, 56px);
  animation: revealForm 0.45s var(--ease) forwards;
}

.optin__form[hidden] {
  display: none;
}

.optin__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.optin__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.optin__optional {
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.optin__input {
  width: 100%;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--teal-dim);
  border-radius: 16px;
  padding: 14px 18px;
  outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.optin__textarea {
  resize: vertical;
  min-height: 72px;
  font-family: 'Rajdhani', sans-serif;
}

.optin__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.optin__input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
}

.optin__submitBtn {
  margin-top: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--teal);
  background: var(--teal);
  color: var(--black);
  cursor: pointer;
  padding: 15px 24px;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), opacity 0.2s var(--ease);
}

.optin__submitBtn:hover {
  box-shadow: 0 0 24px var(--teal-glow);
}

.optin__submitBtn:active {
  transform: scale(0.98);
}

.optin__submitBtn:disabled {
  opacity: 0.5;
  cursor: default;
}

.optin__error {
  font-size: 13px;
  color: #ff6b6b;
  letter-spacing: 0.02em;
}

.optin__error[hidden] {
  display: none;
}

.optin__privacy {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes revealForm {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}