/* =============================================================
   Kyaat — coming soon
   Minimal, intentional, one signature gesture.
   ============================================================= */

/* ---------- fonts (self-hosted variable woff2) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/Fraunces.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/Fraunces-Italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/DMSans.woff2") format("woff2-variations");
}

/* ---------- design tokens ---------- */
:root {
  --ink: #1A1F4D;
  --ember: #E94B3C;
  --paper: #FAFAF7;
  --ash: #7A7E96;
  --mist: #E8E6DC;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1200px;
  --gutter: clamp(1.5rem, 4vw, 3rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2EEE5;
    --ember: #FF6B5C;
    --paper: #15182E;
    --ash: #8C90A8;
    --mist: #2A2E48;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* subtle paper texture — barely there, only on light theme */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(26, 31, 77, 0.025) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(233, 75, 60, 0.018) 0%, transparent 50%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }

::selection { background: var(--ember); color: var(--paper); }

/* skip link */
.skip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-110%);
  transition: transform 200ms var(--ease-out);
  z-index: 100;
  font-size: 14px;
}
.skip:focus { transform: translateY(0); }

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

/* ---------- header ---------- */
.header {
  padding: clamp(1.5rem, 3vw, 2rem) var(--gutter);
}

/*
  Constrain the header's content to the same max-width as the hero so the
  logo's left edge aligns with the headline's left edge. Without this the
  logo sits at the page gutter and the headline sits at the centred
  container's left edge — they don't line up at wide viewports.
*/
.header > .brand {
  max-width: var(--container);
  margin: 0 auto;
  display: block;
}

.brand {
  /* nested rule above takes care of layout; this stays for fallback */
  line-height: 0;
  /* on first paint, fade the wordmark in subtly so it doesn't pop */
  opacity: 0;
  animation: fade-in 700ms var(--ease-out) 100ms forwards;
}

.brand__logo {
  height: clamp(28px, 3vw, 36px);
  width: auto;
  display: block;
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* ---------- main / hero ---------- */
.main {
  display: grid;
  align-content: center;
  padding: clamp(1.5rem, 6vh, 4rem) var(--gutter);
}

/*
  Two-column composition.

  Left column anchors the brand voice: tagline + lede + supporting subhead.
  Right column anchors the moment: launch eyebrow + countdown + email.

  The split intentionally puts the *story* on the left and the *action* on
  the right, so a returning visitor's eye lands on the countdown first
  (right side, where Western readers' eyes settle after scanning the
  headline) and a new visitor reads left-to-right naturally.

  Columns collapse to a single stack at < 960px.
*/
.hero {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  /* 1fr / 1.1fr — give the right column slightly more room than the left
     so the countdown row of 4 numbers + 3 colons fits without wrapping
     at standard desktop widths */
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.hero__left,
.hero__right {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vh, 2rem);
}

/*
  Nudge the right column down slightly so its eyebrow line sits at
  roughly the cap-height of the headline rather than at the very top.
  Without this, the right column reads as floating above the left.
*/
.hero__right {
  padding-top: clamp(0.5rem, 2.5vh, 2rem);
}

/* ---------- left column: title + lede + sub ---------- */
.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3.25rem, 7.5vw, 6.5rem);
  /* line-height needs to clear the italic "p" descender on the second
     line. 1.0 gives enough room without splitting the lines visually. */
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: 11ch;
}

.hero__line {
  display: block;
  opacity: 0;
  transform: translateY(12px);
  animation: rise 900ms var(--ease-out) forwards;
  /* allow descenders to render outside the line box without being
     clipped by ancestor overflow */
  overflow: visible;
}
.hero__line:nth-child(1) { animation-delay: 180ms; }
.hero__line:nth-child(2) { animation-delay: 300ms; }

.hero__line--italic {
  font-style: italic;
  /* Fraunces variable axes:
     - opsz 60 picks the smaller-text design (less ornamental than 144).
     - SOFT 0 removes the softening that makes italic swooshy.
     - WONK 0 disables the eccentric letterforms.
     - Weight 500 gives the line more body so it sits at parity with
       the upright "Limitless" instead of feeling lighter.
     Together: an italic that *contrasts* the upright in voice but *harmonises*
     in weight. */
  font-weight: 500;
  font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0;
  letter-spacing: -0.025em;
  color: var(--ink);
  /* extra padding-bottom so the italic "p" descender on "possibilities"
     doesn't get clipped by the next sibling's box. */
  padding-bottom: 0.12em;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__lede {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 22ch;
  opacity: 0;
  animation: rise 700ms var(--ease-out) 460ms forwards;
}

.hero__sub {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.05vw, 1rem);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ash);
  max-width: 38ch;
  opacity: 0;
  animation: rise 700ms var(--ease-out) 600ms forwards;
}

/* ---------- right column: eyebrow + countdown + form ---------- */
.hero__eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  opacity: 0;
  animation: rise 700ms var(--ease-out) 540ms forwards;
}

.hero__rule {
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--ember);
  flex-shrink: 0;
}

/* ---------- countdown ----------
   Flex layout with explicit colon separators. Each unit is auto-width
   based on its content (with tabular numerals so widths stay consistent
   as digits change). The colons act as both visual rhythm and the
   structural anchor that keeps units evenly spaced. */
.countdown {
  display: flex;
  /* don't wrap on desktop — the row collapses to 2x2 grid on phones via
     a media query at the bottom */
  flex-wrap: nowrap;
  align-items: baseline;
  gap: clamp(0.5rem, 1vw, 0.875rem);
  font-family: var(--display);
  opacity: 0;
  animation: rise 800ms var(--ease-out) 660ms forwards;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.countdown__value {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-align: center;
}

.countdown__label {
  margin-top: 0.625rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  text-align: center;
}

.countdown__sep {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ash);
  opacity: 0.45;
  /* nudge the colon up so it sits visually centred against the digit body
     instead of dropping to the baseline */
  align-self: baseline;
  transform: translateY(-0.25em);
  user-select: none;
}

/* state: launched */
.countdown.is-launched .countdown__unit,
.countdown.is-launched .countdown__sep { display: none; }
.countdown.is-launched::after {
  content: "Live now →";
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  color: var(--ember);
  letter-spacing: -0.02em;
}

/* ---------- notify form ---------- */
.notify {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 440px;
  border-bottom: 1px solid var(--ink);
  position: relative;
  opacity: 0;
  animation: rise 800ms var(--ease-out) 800ms forwards;
}

.notify__field {
  display: block;
  position: relative;
  padding: 0.875rem 0;
}

.notify__label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: var(--ash);
  pointer-events: none;
  transition: all 220ms var(--ease-out);
  font-family: var(--sans);
  font-weight: 400;
}

.notify__input {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-family: var(--sans);
  color: var(--ink);
  outline: none;
}
.notify__input::placeholder { color: transparent; }

.notify__input:focus + .notify__label,
.notify__input:not(:placeholder-shown) + .notify__label {
  top: -0.4em;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember);
}

.notify__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  color: var(--ember);
  transition: transform 220ms var(--ease-out), color 200ms;
}
.notify__submit svg {
  width: 1.5rem;
  height: 1.5rem;
}
.notify__submit:hover { transform: translateX(3px); }
.notify__submit:active { transform: translateX(5px); }
.notify__submit:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 4px;
  border-radius: 2px;
}

.notify__success {
  position: absolute;
  inset: 0;
  align-items: center;
  margin: 0;
  background: var(--paper);
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--ember);
  animation: rise 600ms var(--ease-out);
  display: none;
}
.notify__success:not([hidden]) {
  display: flex;
}

.notify__helper {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ash);
  max-width: 440px;
  opacity: 0;
  animation: rise 700ms var(--ease-out) 920ms forwards;
}

/* ---------- footer ----------
   Border-top spans full page; content stays within the same constrained
   container as the hero so its left/right edges align with the headline
   and form above. */
.footer {
  border-top: 1px solid var(--mist);
}

.footer__inner {
  padding: clamp(1.5rem, 3vw, 2rem) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ash);
}

.footer__date {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.footer__platforms {
  font-feature-settings: "ss01" 1;
}

.footer__dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--mist);
}

/* push the loop to the right — quiet brand signature, sized to feel like
   a flourish on a footer line rather than a competing focal point */
.footer__loop {
  margin-left: auto;
  width: clamp(56px, 6vw, 76px);
  height: auto;
  overflow: visible;
}

.footer__loop-path {
  stroke: var(--ink);
  stroke-opacity: 0.32;
  fill: none;
}

.footer__loop-dot {
  fill: var(--ember);
  /* small glow keeps the dot warm against navy without bleeding */
  filter: drop-shadow(0 0 3px rgba(233, 75, 60, 0.55));
  /* offset-path traces along the loop continuously — coords match the
     viewBox/path above (100 × 44 stroked infinity ribbon). */
  offset-path: path("M50 22 C50 6, 92 6, 92 22 C92 38, 50 38, 50 22 C50 6, 8 6, 8 22 C8 38, 50 38, 50 22 Z");
  offset-rotate: 0deg;
  /* slower, deliberate travel — reads as a steady heartbeat */
  animation: travel 12s linear infinite;
}

@keyframes travel {
  to { offset-distance: 100%; }
}

/* ---------- responsive ---------- */

/* Tablet: still two columns but tighter. */
@media (max-width: 1100px) {
  .hero {
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  .countdown__value {
    font-size: clamp(2rem, 5vw, 3.5rem);
  }
}

/* Phone & narrow: stack into one column, headline first. */
@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vh, 3rem);
  }

  .hero__right {
    padding-top: 0;
  }

  .hero__title {
    max-width: 11ch;
    font-size: clamp(3rem, 13vw, 5rem);
  }

  .hero__lede { font-size: 1.125rem; }
  .hero__sub { display: none; }

  /* On phones, drop colons and switch to a 2x2 grid so all four units are
     visible without horizontal overflow. The colons are decorative — units
     still read as a sequence. */
  .countdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }
  .countdown__sep { display: none; }
  .countdown__unit { align-items: flex-start; }
  .countdown__value {
    text-align: left;
    font-size: clamp(2.75rem, 11vw, 4rem);
  }
  .countdown__label { text-align: left; }

  .footer__inner {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }
  .footer__loop {
    margin-left: 0;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .footer__loop-dot { display: none; }
  .brand,
  .hero__line,
  .hero__lede,
  .hero__sub,
  .hero__eyebrow,
  .countdown,
  .notify,
  .notify__helper {
    opacity: 1;
    transform: none;
  }
}