/* ---------- Fonts ---------- */
@font-face {
  font-family: "Macan";
  src: url("/assets/fonts/Macan-Medium.woff2") format("woff2"),
       url("/assets/fonts/Macan-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Macan";
  src: url("/assets/fonts/Macan-SemiBold.woff2") format("woff2"),
       url("/assets/fonts/Macan-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

/* ---------- Tokens (from Figma) ---------- */
:root {
  --watermelon-400: #ff3358;
  --watermelon-500: #eb284f;
  --purple-400: #a435f0;
  --neutral-0: #ffffff;
  --neutral-400: #a1a09b;
  --neutral-850: #1f1f1e;
  --frame-pad: 20px;      /* desktop page border */
  --frame-radius: 40px;
}

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

html, body { height: 100%; }

body {
  background: var(--watermelon-400);
  padding: var(--frame-pad);
  /* svh is stable on iOS — dvh animates when the toolbar/keyboard moves,
     which made the whole layout tremble on first tap. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overscroll-behavior-y: none;
  font-family: "Macan", "Avenir Next", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Sky panel / page frame ---------- */
.frame {
  position: relative;
  z-index: 2; /* content above the falling-objects layer */
  height: 100%;
  border-radius: var(--frame-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 44px 16px 20px;
}

/* Sky lives on the fixed clip layer so objects render on top of it
   but stay behind .frame content and inside the rounded panel. */
.sky-clip {
  position: fixed;
  inset: var(--frame-pad);
  z-index: 1;
  border-radius: var(--frame-radius);
  overflow: hidden;
  pointer-events: none;
  background: url("/assets/background/sky_background.webp") center / cover no-repeat,
              linear-gradient(#3f9fe8, #79c4f2); /* fallback while sky loads */
}

/* ---------- Content rows ---------- */
.row-logo, .row-headline, .row-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.logo { width: 150px; height: auto; }

.headline {
  width: min(504px, 92vw);
  height: auto;
}

/* ---------- Form ---------- */
.row-form {
  gap: 16px;
  width: 500px;
  max-width: 100%;
  min-height: 114px; /* keeps layout stable when form swaps to confirmation */
}

.pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  padding: 4px 4px 4px 16px;
  background: var(--neutral-0);
  border: 1px solid transparent;
  border-radius: 160px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

/* Active state (Figma 979:9986): purple/300 border, no drop shadow */
.pill:focus-within {
  border-color: #c77dff;
  box-shadow: none;
}

#email {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: 500 16px / 1.35 "Macan", sans-serif;
  color: var(--neutral-850);
}

#email::placeholder { color: var(--neutral-400); }

#join-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;
  border: none;
  border-radius: 1000px;
  background: var(--purple-400);
  color: #fff;
  font: 600 16px / 1.35 "Macan", sans-serif;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

#join-btn:hover { filter: brightness(1.08); }
#join-btn:active { transform: scale(0.97); }

#join-btn .spinner { display: none; }

/* Submitting state (Figma 979:9668): fixed-width button, white spinner, gray email */
.pill.submitting #join-btn {
  width: 59px;
  padding: 5px;
  cursor: default;
}
.pill.submitting #join-btn .btn-label { display: none; }
.pill.submitting #join-btn .spinner {
  display: block;
  animation: spinner-rotate 0.8s linear infinite;
}
.pill.submitting #email { color: var(--neutral-400); }

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pill.submitting #join-btn .spinner { animation: none; }
}

/* Success state (Figma 887:12254): button swaps to check + "Submitted" */
.pill.success #join-btn { display: none; }
.pill.success #email { color: var(--neutral-850); }

.submitted-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  color: var(--purple-400);
  font: 600 16px / 1.35 "Macan", sans-serif;
  white-space: nowrap;
}
.submitted-badge[hidden] { display: none; }

.subline {
  max-width: 319px;
  text-align: center;
  font: 600 16px / 1.35 "Macan", sans-serif;
  color: var(--watermelon-500);
}

.form-message {
  font: 500 14px / 1.35 "Macan", sans-serif;
  color: var(--watermelon-500);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 12px;
  border-radius: 12px;
  text-align: center;
}

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

/* ---------- Falling objects ---------- */
.obj {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  will-change: transform;
  transform: translate3d(0, -300vh, 0); /* parked fully off-screen until spawned */
  /* Idle/parked objects are never painted — kills any repaint flash from
     background-tab timer throttling or animation restarts. */
  visibility: hidden;
}

.obj.falling,
.obj.static {
  visibility: visible;
}

.obj.falling {
  animation: fall var(--dur) linear forwards;
}

.obj img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(var(--r0));
}

.obj.falling img {
  animation: spin var(--dur) linear forwards;
}

/* --y0 is set per object to -(its own height + margin), so every object —
   including oversized ones — starts fully above the canvas. */
@keyframes fall {
  from { transform: translate3d(var(--x), var(--y0), 0); }
  to   { transform: translate3d(var(--x), 120vh, 0); }
}

@keyframes spin {
  from { transform: rotate(var(--r0)); }
  to   { transform: rotate(var(--r1)); }
}

/* Static scattered arrangement for reduced motion (left/top % set by JS) */
.obj.static {
  animation: none;
  transform: rotate(var(--r0));
}

@media (prefers-reduced-motion: reduce) {
  .obj.falling, .obj.falling img { animation: none; }
}

/* ---------- Mobile (mockup: 393px frame, 8px border, 56px top pad) ---------- */
@media (max-width: 640px) {
  :root { --frame-pad: 8px; }

  body { overflow: auto; }

  .frame {
    padding: 56px 16px 20px;
    min-height: calc(100vh - 16px);
    min-height: calc(100svh - 16px);
    height: auto;
  }

  .sky-clip {
    position: fixed;
    inset: var(--frame-pad);
  }

  .logo { width: 150px; }

  .headline { width: 100%; }

  .row-headline { padding-top: 0; }

  .row-form { width: 100%; }
}