/* ============================================================
   components.css — reusable pieces: buttons, eyebrow chips,
   step badges, the sign-up form, drag cursor and floaters
   ============================================================ */

/* ---- Command button — cosmic glow on hover ------------------------ */
/* A thin-framed command button with a leading ">" prompt. On hover it
   lights up like a signal in deep space: the frame ignites cyan, an inner
   nebula tint blooms and twin star-sparks flare at opposite corners. */
.button {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid rgba(0, 168, 204, 0.5);
  background-color: rgba(0, 168, 204, 0.05);
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--c-white);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease,
    box-shadow 0.3s ease, color 0.3s ease;
}
/* leading terminal prompt before the label */
.button .cta-text::before {
  content: "> ";
  opacity: 0.6;
}
/* twin star-sparks (top-left + bottom-right) that flare in on hover */
.button::before,
.button::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: var(--c-rose);
  clip-path: polygon(
    50% 0,
    58% 42%,
    100% 50%,
    58% 58%,
    50% 100%,
    42% 58%,
    0 50%,
    42% 42%
  );
  filter: drop-shadow(0 0 4px rgba(0, 168, 204, 0.9));
  opacity: 0;
  transform: scale(0.4) rotate(-45deg);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.button::before { top: 3px; left: 3px; }
.button::after { bottom: 3px; right: 3px; }
.button:hover::before,
.button:hover::after { opacity: 1; transform: scale(1) rotate(0); }
.button:hover {
  border-color: var(--c-rose);
  background-color: rgba(0, 168, 204, 0.14);
  box-shadow: 0 0 0 1px rgba(0, 168, 204, 0.4),
    0 0 24px -4px rgba(0, 168, 204, 0.75);
  color: var(--c-white);
}
.button:active {
  scale: 0.97;
  transition: scale 0.15s ease;
}

/* ---- Eyebrow + chip system ---------------------------------------- */
.kicker {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
}

.pip {
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 0.25rem 0.75rem;
  line-height: 1;
  background-color: var(--c-white);
  color: var(--c-brown);
}
.pip--burnt {
  background-color: var(--c-burnt);
  color: var(--c-white);
}
.pip--light {
  padding: 0.375rem 1rem;
}

/* two sparkle-stars trailing each label — a small constellation that
   replaces the template's twin HUD ticks */
.pip-tick {
  width: 0.9rem;
  height: 0.9rem;
  min-height: 0;
  background-color: var(--c-white);
  clip-path: polygon(
    50% 0,
    58% 42%,
    100% 50%,
    58% 58%,
    50% 100%,
    42% 58%,
    0 50%,
    42% 42%
  );
  filter: drop-shadow(0 0 3px rgba(0, 168, 204, 0.75));
}
.pip-tick--wide {
  width: 1.2rem;
  height: 1.2rem;
}
.pip-tick--burnt {
  background-color: var(--c-burnt);
}
@media (prefers-reduced-motion: no-preference) {
  .pip-tick {
    animation: pip-twinkle 3.2s ease-in-out infinite;
  }
  .pip-tick--wide {
    animation-duration: 2.4s;
    animation-delay: -1.1s;
  }
  @keyframes pip-twinkle {
    0%,
    100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
}

/* numbered / icon badge ---------------------------------------------- */
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: -0.125rem;
  border: 2px solid var(--c-burnt);
  color: var(--c-burnt);
  font-size: 0.75rem;
}
.step-num--icon {
  overflow: hidden;
}
.step-num--icon svg {
  width: 0.75rem;
  height: 0.75rem;
}
.step-num--light {
  width: 2.25rem;
  height: 2.25rem;
  border-color: var(--c-white);
  color: var(--c-white);
}
.step-num--light svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---- Sign-up form -------------------------------------------------- */
.optin {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.optin__row {
  display: flex;
  gap: 1.5rem;
}
.optin__field {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.optin__field--full {
  width: 100%;
}
.optin__label {
  margin-bottom: 0.25rem;
  color: var(--c-brown);
}
.optin input {
  border-bottom: 1.5px solid var(--c-brown);
  padding-block: 0.75rem;
  color: var(--c-brown);
}
.optin input::placeholder {
  color: var(--c-brown);
  opacity: 0.5;
}
.optin__submit {
  display: flex;
  width: fit-content;
  align-items: center;
  border: 1px solid var(--c-brown);
  background-color: var(--c-brown);
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-white);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.optin__submit::before {
  content: "> ";
  opacity: 0.6;
}
.optin__submit:hover {
  background-color: transparent;
  color: var(--c-brown);
}

/* ---- Drag cursor (industry rail) ---------------------------------- */
.grab-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 6px 0.75rem;
  background-color: var(--c-brown);
  color: var(--c-white);
  font-family: var(--font-display);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.grab-cursor svg {
  width: 0.75rem;
  height: 0.75rem;
}
@media (max-width: 1023.98px) {
  .grab-cursor {
    display: none;
  }
}

/* ---- Floating spark accents (spawned over the grid veil) -----------
   Four-point sparks in the brand teal — echo the ✦ marks beside the
   section chips (and the about-galaxy) instead of the old frame squares. */
.drift-element {
  position: absolute;
  z-index: 5;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--c-white);
  background-image: url("data:image/svg+xml,%3Csvg width='82' height='82' viewBox='0 0 82 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M41 2 C44.5 28 54 37.5 80 41 C54 44.5 44.5 54 41 80 C37.5 54 28 44.5 2 41 C28 37.5 37.5 28 41 2 Z' fill='%239beff7' fill-opacity='0.5' stroke='white' stroke-opacity='0.75'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(155, 239, 247, 0.45));
  scale: 0.5;
  opacity: 0;
  pointer-events: none;
}