/* =========================================================================
   Snowy Flame — Coming Soon

   Motion is a direct transcription of Figma "Animation v6" (291:2514).
   Vertical travel is expressed in vh against the 986px design frame, so the
   proportions hold at any window size:  600px / 986px = 60.9vh, and so on.
   Static-first: the finished composition is visible without JavaScript.
   ========================================================================= */

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

:root {
  --sans : 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --white      : #FCFCFC;
  --white-soft : rgba(255,255,255,0.80);

  /* Figma's curves, verbatim */
  --ease-enter : cubic-bezier(0.16, 1, 0.3, 1);    /* every entrance */
  --ease-drift : cubic-bezier(0.25, 0, 0.75, 1);   /* background scale */
  --ease-lift  : cubic-bezier(0.3, 0, 0.7, 1);     /* the quote leaving */
  --ease-ui    : cubic-bezier(0.4, 0, 0.2, 1);     /* buttons, form — not from Figma */

  --xfade      : 900ms;    /* background crossfade  (8.70s -> 9.60s) */
  --lights-up  : 1200ms;   /* overlay 1 -> 0.56     (1.20s -> 2.40s) */
  --drift      : 8400ms;   /* background 1 -> 1.02  (1.20s -> 9.60s) */

  --enter-move : 1600ms;
  --enter-fade : 480ms;
  --exit-move  : 1100ms;
  --exit-ease  : var(--ease-lift);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--white);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  user-select: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Stage ---------------------------------------------------------------- */
.cinema {
  /* No explicit height. `inset: 0` on a fixed element resolves against the
     viewport the browser is actually showing, which vh and dvh both get wrong
     inside in-app browsers (WhatsApp, Instagram) — there they can resolve
     short, leaving a black band and stranding the controls mid-screen. */
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* --- Background ----------------------------------------------------------- */
.bg-layer { position: absolute; inset: 0; z-index: 1; }

.bg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--xfade) var(--ease-enter);
  will-change: opacity;
  overflow: hidden;
}
.bg-slide.is-active { opacity: 1; }

.bg-img {
  display: block;
  position: absolute;
  top: -2%; left: -2%;
  width: 104%; height: 104%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  transform: scale(1);
}

/* Figma drifts each photograph from 1 to 1.02 and holds — no panning. */
.bg-slide.is-active .bg-img { animation: drift var(--drift) var(--ease-drift) both; }

/* Figma holds the opening photograph still for 1.2s, until the lights come up. */
.js .bg-slide:first-child.is-active .bg-img { animation-delay: 1200ms; }

@keyframes drift {
  from { transform: scale(1); }
  to   { transform: scale(1.02); }
}

/* --- Overlays ------------------------------------------------------------- */
/* Figma opens on a black overlay at full opacity and lifts it to 0.56 — the
   photograph is already there underneath, the lights simply come up. */
.overlay-dark {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0.56;
  z-index: 2;
  pointer-events: none;
}
.js .overlay-dark { opacity: 1; }
.js .is-lit .overlay-dark {
  opacity: 0.56;
  transition: opacity var(--lights-up) var(--ease-enter);
}

.overlay-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.45) 65%,
    rgba(0,0,0,0.85) 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* --- Text layer ----------------------------------------------------------- */
.text-layer {
  position: absolute; inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}

/* Interim cards belong to the sequence only — without JS they would pile up
   on top of the finished composition, so they stay out of the flow. */
.text-card { display: none; }
.js .text-card {
  display: block;
  position: absolute;
  width: 100%;
  max-width: min(1100px, 92vw);
  padding: 0 clamp(16px, 4vw, 32px);
  text-align: center;
  opacity: 0;
  transform: translate3d(0, var(--enter), 0);
  will-change: opacity, transform;
}

/* Entrance: the text reaches full opacity long before it stops moving —
   540ms of fade against 1800ms of travel. That lag is the whole feel. */
.js .text-card.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--enter-fade) var(--ease-enter),
              transform var(--enter-move) var(--ease-enter);
}

/* Exit: Figma never fades these out. They slide up and off at full opacity. */
.js .text-card.is-exiting {
  opacity: 1;
  transform: translate3d(0, calc(var(--exit) * -1), 0);
  transition: transform var(--exit-move) var(--exit-ease);
}

/* Per-element travel and timing, straight off the Figma timeline */
.js #cardQuote {
  --enter: 60.9vh;  --exit: 60.9vh;          /* 600px / 986px */
  --enter-move: 1800ms; --enter-fade: 540ms;
  --exit-move: 1100ms;  --exit-ease: var(--ease-lift);
}
.js #cardMsg1,
.js #cardMsg2 {
  --enter: 67vh;    --exit: 59.2vh;          /* 661px in, 584px out */
  --enter-move: 1800ms; --enter-fade: 550ms;
  --exit-move: 1200ms;  --exit-ease: ease-in;
}

/* --- Interim typography --------------------------------------------------- */
.txt-quote,
.txt-message {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(21px, 3.35vw, 42px);
  line-height: 1.28;
  letter-spacing: 0.06em;
  color: var(--white);
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(0,0,0,0.5);
}

.txt-author {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(17px, 2.7vw, 34px);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-top: 0.4em;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* --- Finished composition ------------------------------------------------- */
.final-card {
  position: absolute;
  width: 100%;
  max-width: min(1400px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(26px, 4.4vh, 52px);
  pointer-events: none;
}

/* Everything inside starts visible; `.js` hands control to the sequence. */
.js .final-logo,
.js .final-heading,
.js .final-notify,
.js .final-sub {
  opacity: 0;
  transform: translate3d(0, var(--enter), 0);
  will-change: opacity, transform;
}

/* The lockup travels furthest and the sub-line least — Figma staggers both
   the start times and the distances, so the group arrives as a cascade. */
.js .final-logo    { --enter: 79vh;   }   /* 600px -> -179px = 779px of travel */
.js .final-heading { --enter: 62.9vh; }   /* 620px */
.js .final-notify  { --enter: 45.6vh; }   /* interpolated — the form is ours */
.js .final-sub     { --enter: 40.6vh; }   /* 400px */

.js .final-logo.is-visible,
.js .final-heading.is-visible,
.js .final-notify.is-visible,
.js .final-sub.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--enter-fade) var(--ease-enter),
              transform var(--enter-move) var(--ease-enter);
}

.logo-img {
  display: block;
  width: clamp(200px, 30vw, 437px);
  height: auto;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,0.6));
}

.final-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 8.4vw, 112px);
  line-height: 1.02;
  color: #FFF;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

/* Figma sets the initial caps a shade larger than the rest of the word. */
.final-heading .large-letter { font-size: 1.1837em; line-height: 1; }

.final-sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1.55vw, 26px);
  line-height: 1.6;
  letter-spacing: 0.24em;
  color: var(--white-soft);
  text-transform: uppercase;
  padding-left: 0.24em;      /* balances the trailing letter-space */
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

/* --- Notify form ---------------------------------------------------------- */
.final-notify {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.notify {
  display: flex;
  width: min(470px, 100%);
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 200ms var(--ease-ui);
}
.notify:focus-within { border-color: rgba(255,255,255,0.55); }
.notify.is-invalid { border-color: #E8825E; }

.notify-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 20px;
  height: 56px;
  font-family: var(--sans);
  font-size: 16px;          /* 16px or larger stops iOS zooming on focus */
  font-weight: 400;
  color: var(--white);
  background: transparent;
  border: 0;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.notify-input::placeholder { color: rgba(255,255,255,0.55); }
.notify-input:focus-visible { outline: none; }

.notify-button {
  flex: 0 0 auto;
  padding: 0 26px;
  height: 56px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: #111;
  background: #FCFCFC;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  transition: background 200ms var(--ease-ui), color 200ms var(--ease-ui);
}
.notify-button:hover { background: #FFF; }
.notify-button:disabled { opacity: 0.65; cursor: default; }

.notify-status {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--white-soft);
  min-height: 1.45em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.notify-status.is-error { color: #F0A78B; }

/* --- Controls ------------------------------------------------------------- */
.controls { display: none; }
.js .controls {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Clear the iPhone home indicator and any rounded-corner inset. */
  right: calc(clamp(14px, 2.4vw, 28px) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(14px, 2.4vw, 28px) + env(safe-area-inset-bottom, 0px));
}

.ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 200ms var(--ease-ui), border-color 200ms var(--ease-ui);
}
.ctl:hover { color: #FFF; border-color: rgba(255,255,255,0.45); }
.ctl[hidden] { display: none; }

.ctl-sound { padding: 0 14px 0 11px; }
.ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-on { display: none; }
.ctl-sound[aria-pressed="true"] .ico-on  { display: block; }
.ctl-sound[aria-pressed="true"] .ico-off { display: none; }

:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 3px;
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bg-slide { transition-duration: 0.01ms; }
  .bg-slide .bg-img { animation: none !important; }
  .js .is-lit .overlay-dark { transition-duration: 0.01ms; }
  .js .text-card,
  .js .final-logo,
  .js .final-heading,
  .js .final-notify,
  .js .final-sub {
    transition-duration: 0.01ms;
    transform: none;
  }
  .notify, .notify-button, .ctl { transition-duration: 0.01ms; }
}

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 640px) {
  .final-card { gap: clamp(22px, 3.6vh, 40px); }
  .notify { flex-direction: column; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 10px; }
  .notify-input {
    height: 52px;
    background: rgba(10,10,10,0.55);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 10px;
    text-align: center;
  }
  .notify-button { height: 52px; border-radius: 10px; }
  .notify:focus-within .notify-input { border-color: rgba(255,255,255,0.55); }
  .ctl-label { display: none; }
  .ctl-sound { padding: 0 11px; }
}

/* Short landscape windows — keep the whole composition on screen */
@media (max-height: 560px) {
  .final-card { gap: 18px; }
  .logo-img { width: clamp(160px, 22vw, 240px); }
  .final-heading { font-size: clamp(38px, 7vh, 64px); }
}