/* ==========================================================================
   Components — waitlist form, marquee, drop index, reveals
   ========================================================================== */

/* --- Waitlist form ------------------------------------------------------- */

.signup { display: flex; flex-direction: column; gap: var(--s-2); }

.signup__row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.signup__row:focus-within { border-color: var(--ink); }

.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.0625rem 1.125rem;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}
.signup__input::placeholder { color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.16em; }
.signup__input:focus { outline: none; }

.signup__btn {
  flex: 0 0 auto;
  padding: 0 1.5rem;
  border: 0;
  border-left: 1px solid var(--rule-strong);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease-out);
}
.signup__btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--signal);
  transform: translateY(101%);
  transition: transform var(--dur-mid) var(--ease-out);
}
.signup__btn > span { position: relative; z-index: 1; }
.signup__btn:hover::before,
.signup__btn:focus-visible::before { transform: translateY(0); }
.signup__btn:hover,
.signup__btn:focus-visible { color: var(--signal-ink); }
.signup__btn[disabled] { cursor: wait; opacity: 0.6; }

.signup__note { color: var(--ink-mute); line-height: 1.8; letter-spacing: 0.09em; }

/* Honeypot — visible to bots, never to people */
.signup__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.signup__status { min-height: 1.2em; line-height: 1.6; }
.signup__status[data-state="error"] { color: var(--alert); }
.signup__status[data-state="ok"]    { color: var(--ink); font-weight: 600; }

/* Inverted variant, on the hi-vis finale */
.signup--invert .signup__row {
  border-color: color-mix(in srgb, var(--signal-ink) 32%, transparent);
  background: color-mix(in srgb, var(--signal-ink) 6%, transparent);
}
.signup--invert .signup__row:focus-within { border-color: var(--signal-ink); }
.signup--invert .signup__input { color: var(--signal-ink); }
.signup--invert .signup__input::placeholder { color: color-mix(in srgb, var(--signal-ink) 64%, transparent); }
.signup--invert .signup__btn {
  background: var(--signal-ink);
  color: var(--signal);
  border-left-color: transparent;
}
.signup--invert .signup__btn::before { background: var(--paper); }
.signup--invert .signup__btn:hover { color: var(--signal-ink); }
.signup--invert .signup__note { color: color-mix(in srgb, var(--signal-ink) 62%, transparent); }
.signup--invert .signup__status[data-state="ok"] { color: var(--signal-ink); font-weight: 600; }
.signup--invert .signup__status[data-state="error"] { color: var(--alert-ink); }

/* --- Marquee ------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  background: var(--signal);
  color: var(--signal-ink);
  padding-block: 0.75rem;
  border-block: 1px solid var(--signal-deep);
  transform: rotate(-1.1deg) scaleX(1.06);
  margin-block: var(--s-6);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-slide 42s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.375rem, 3.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  padding-inline: 1.25rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.marquee__dot { width: 0.4em; height: 0.4em; background: var(--signal-ink); border-radius: 50%; flex: 0 0 auto; }

@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- Drop index (spec sheet, no cards) ----------------------------------- */

.index { border-top: 1px solid var(--rule); }

.item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
}
@media (min-width: 62rem) {
  .item {
    grid-template-columns: 8rem minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
    padding-inline: var(--s-2);
  }
}
.item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper-raised);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-mid) var(--ease-out);
}
.item:hover::before { transform: scaleY(1); }

.item__cat {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  transition: color var(--dur-fast) var(--ease-out);
}
.item:hover .item__cat { color: var(--ink); }
.item h3 { font-size: clamp(1.75rem, 4vw, 3.25rem); }
.item__desc { color: var(--ink-soft); max-width: 42ch; margin-top: var(--s-1); }

.spec { display: grid; gap: 0; align-content: start; }
.spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: 0.45rem;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.spec__row:last-child { border-bottom: 0; }
.spec__k { color: var(--ink-mute); }
.spec__v { color: var(--ink); text-align: right; }
.spec__v--pending { color: var(--ink-mute); }

/* --- Reveal choreography -------------------------------------------------- */

.js [data-reveal] { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal="up"]    { transform: translate3d(0, 2.25rem, 0); }
.js [data-reveal="left"]  { transform: translate3d(-2.25rem, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(2.25rem, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.955); }
.js [data-reveal].is-in   { opacity: 1; transform: none; }

/* Hero load-in: masked lines wipe upward, staggered */
.hero__line > span,
[data-load] {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  animation: rise var(--dur-slow) var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}
[data-load] { transform: translate3d(0, 1.25rem, 0); }

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

/* Elevation stroke draws itself once */
.elev-line {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: draw 3.2s var(--ease-io) 500ms forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero__line > span, [data-load] { opacity: 1; transform: none; animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .elev-line { stroke-dashoffset: 0; animation: none; }
  .marquee__track { animation: none; }
}

/* --- Garment flats -------------------------------------------------------
   Technical drawings, not photographs. Each sits in a 3:4 slot — the format a
   campaign image will occupy when one exists, so the swap is a src change and
   not a layout rebuild. Drawing beats stock: it says "this is a schematic",
   where a bought photo of a stranger says "this is our product" and is a lie.
   ------------------------------------------------------------------------- */

.drop-grid { display: grid; gap: var(--s-5) var(--s-3); }

@media (min-width: 52rem) {
  .drop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.garment { display: flex; flex-direction: column; gap: var(--s-2); }

.garment__figure {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 1.8vw, 1.5rem);
  overflow: hidden;
  transition: background var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}
.garment:hover .garment__figure {
  background: var(--signal);
  border-color: var(--signal-deep);
}

.garment__flat {
  width: 100%;
  height: 100%;
  color: var(--ink);
  transition: color var(--dur-mid) var(--ease-out);
}
.garment:hover .garment__flat { color: var(--signal-ink); }
.garment__flat path, .garment__flat line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.garment__flat .hair { stroke-width: 1; opacity: 0.65; }

.garment__tag {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  color: var(--ink-mute);
}
.garment:hover .garment__tag { color: var(--signal-ink); }

.garment h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); margin-top: var(--s-1); }
.garment .item__desc { max-width: 34ch; }