/* ============================================================
   MIDNIGHT GLASS
   The landing page is the reel card evolved into a player: a viewer arriving
   from a video meets the same frosted panel, the same sheen sweep, the same
   handle. Deep midnight base, a single ember accent, editorial serif set
   against a technical grotesque.
   ============================================================ */

:root {
  --ink:        #05070E;
  --ink-2:      #0A0E1A;
  --text:       #EDF0F7;
  --muted:      #929BB0;
  --ember:      #FF6B35;
  --ember-2:    #FFA94D;

  --glass:      rgba(255, 255, 255, 0.055);
  --glass-hi:   rgba(255, 255, 255, 0.16);
  --hairline:   rgba(255, 255, 255, 0.13);

  --display: "Instrument Serif", Georgia, serif;
  --body:    "Space Grotesk", "Segoe UI", sans-serif;

  --step: clamp(1.5rem, 4vw, 2.5rem);   /* vertical rhythm unit */
  --radius: 22px;
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--body);
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Night sky: a warm ember low-left, a cold blue high-right. The imbalance is deliberate —
   an evenly lit background reads as a template.
   This lives on a fixed layer rather than `background-attachment: fixed` on the body: iOS
   Safari handles that property badly (jank, and it can detach on scroll), and on a page
   taller than the viewport it leaves a hard seam where the gradient stops. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(80ch 60ch at 12% 108%, rgba(255, 107, 53, 0.16), transparent 60%),
    radial-gradient(70ch 55ch at 88% -8%, rgba(74, 118, 255, 0.14), transparent 62%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 55%);
}

/* Film grain — keeps the large flat gradients from banding on cheap phone panels */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The UA rule for [hidden] is display:none at the weakest possible specificity, so any
   explicit display (.field is a flex row) silently beats it and "hidden" elements stay on
   screen. This shipped as a stuck "Adding you…" button after a successful signup. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.nowrap { white-space: nowrap; }

/* ---------- shell ---------- */

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(2.5rem, 9vw, 6rem) clamp(1.25rem, 5vw, 3rem) 3rem;
  display: grid;
  gap: var(--step);
}

/* ---------- hero ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 1.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.82); }
}

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.1rem, 11vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.display em {
  font-style: italic;
  background: linear-gradient(96deg, var(--ember) 10%, var(--ember-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  max-width: 46ch;
  margin: 1.5rem 0 0;
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- the player (the anchor) ---------- */

.player {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 4vw, 1.9rem);
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 100%),
    rgba(14, 16, 26, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* hairline edge lights, lifted straight from the reel card */
.player::before,
.player::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.player::before {
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
}
.player::after {
  top: 0; left: 0; width: 2px; height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.75), transparent 60%, rgba(255,255,255,0.28));
}

/* the "Kool-Aid" sheen — same prism sweep as the video card, every 7s */
.sheen {
  position: absolute;
  top: -40%; left: -70%;
  width: 46%; height: 180%;
  transform: rotate(16deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 120, 160, 0.10) 30%,
    rgba(255, 255, 255, 0.26) 50%,
    rgba(120, 200, 255, 0.10) 70%,
    transparent 100%);
  animation: sweep 7s ease-in-out infinite;
}

@keyframes sweep {
  0%,  55% { left: -70%; }
  85%, 100% { left: 170%; }
}

.player-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

.avatar {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(135deg, var(--ember) 0%, var(--ember-2) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.handle { font-weight: 700; font-size: 1rem; }
.check  { width: 18px; height: 18px; color: #1D9BF0; flex-shrink: 0; }

.now-playing {
  margin: 0 0 1.4rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  line-height: 1.22;
  min-height: 2.4em;              /* reserves space so rotation never shifts layout */
  transition: opacity 0.4s ease;
}
.now-playing.fading { opacity: 0; }

.transport {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.play {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--text);
}
.play svg { width: 20px; height: 20px; margin-left: 2px; }

.wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  overflow: hidden;
}

.wave i {
  flex: 1;
  min-width: 2px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ember-2), var(--ember));
  opacity: 0.75;
  transform: scaleY(0.25);
  transform-origin: center;
  animation: bounce 1.1s ease-in-out infinite;
}

/* A repeating 10-step pattern reads as organic audio without 30 hand-written rules */
.wave i:nth-child(10n+1) { animation-delay: -0.05s; --peak: 0.45; }
.wave i:nth-child(10n+2) { animation-delay: -0.55s; --peak: 0.85; }
.wave i:nth-child(10n+3) { animation-delay: -0.30s; --peak: 0.60; }
.wave i:nth-child(10n+4) { animation-delay: -0.80s; --peak: 1.00; }
.wave i:nth-child(10n+5) { animation-delay: -0.15s; --peak: 0.38; }
.wave i:nth-child(10n+6) { animation-delay: -0.65s; --peak: 0.72; }
.wave i:nth-child(10n+7) { animation-delay: -0.42s; --peak: 0.92; }
.wave i:nth-child(10n+8) { animation-delay: -0.90s; --peak: 0.50; }
.wave i:nth-child(10n+9) { animation-delay: -0.22s; --peak: 0.78; }
.wave i:nth-child(10n)   { animation-delay: -0.70s; --peak: 0.55; }

@keyframes bounce {
  0%, 100% { transform: scaleY(0.22); }
  50%      { transform: scaleY(var(--peak, 0.7)); }
}

.time {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ---------- capture ---------- */

.field {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 1.05rem 1.15rem;
  font: inherit;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
input[type="email"]::placeholder { color: #6B7488; }
input[type="email"]:hover { border-color: var(--glass-hi); }
input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--ember);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.22);
}
input[type="email"][aria-invalid="true"] { border-color: #FF6B6B; }

button[type="submit"] {
  flex: 0 0 auto;
  padding: 1.05rem 1.6rem;
  font: inherit;
  font-weight: 700;
  color: #1A0B04;
  background: linear-gradient(180deg, var(--ember-2), var(--ember));
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.28);
}
button[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.06); }
button[type="submit"]:active { transform: translateY(0); }
button[type="submit"]:focus-visible {
  outline: 2px solid var(--ember-2);
  outline-offset: 3px;
}
button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  filter: none;
}

.hp {                     /* honeypot */
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.note {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.status {
  margin: 0.6rem 0 0;
  font-size: 0.94rem;
  font-weight: 500;
  min-height: 1.4em;
}
.status.ok  { color: var(--ember-2); }
.status.err { color: #FF8B8B; }

/* ---------- value props ---------- */

.props {
  display: grid;
  gap: 1.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.props h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
}
.props p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 34ch;
}

/* ---------- footer ---------- */

.foot {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.85rem;
  color: var(--muted);
}
.foot p { margin: 0 0 0.5rem; }
.fine { font-size: 0.78rem; color: #6B7488; max-width: 60ch; }

/* ---------- desktop: break the single column ---------- */

@media (min-width: 900px) {
  .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    grid-template-areas:
      "hero    player"
      "capture player"
      "props   props"
      "foot    foot";
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .hero    { grid-area: hero; }
  .player  { grid-area: player; align-self: center; }
  .capture { grid-area: capture; }
  .props   { grid-area: props; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .foot    { grid-area: foot; }
}

/* ---------- entrance: one sequence, then it leaves you alone ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero, .player, .capture, .props, .foot {
    animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .hero    { animation-delay: 0.05s; }
  .player  { animation-delay: 0.18s; }
  .capture { animation-delay: 0.28s; }
  .props   { animation-delay: 0.38s; }
  .foot    { animation-delay: 0.46s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheen, .dot { animation: none; }
  .sheen { opacity: 0.35; left: 30%; }
  .wave i { animation: none; transform: scaleY(var(--peak, 0.6)); }
  .now-playing { transition: none; }
}