/* ==========================================================================
   Contact-page quiz.

   Base styles describe the no-JS form: every question stacked and visible.
   Everything under .is-enhanced is the stepped experience, so a failed script
   degrades to a plain long form rather than a blank page.
   ========================================================================== */

.arcrel-quiz-wrap {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) var(--section-y);
}

/* Same breathing purple glow as the how-it-works hero, behind the quiz
   heading. Translucent and pointer-inert. */
.arcrel-quiz-wrap::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 780px;
  height: 520px;
  background: radial-gradient(
    ellipse at center,
    rgba(97, 25, 172, 0.35),
    rgba(124, 58, 237, 0.1) 45%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
  animation: arcrelQuizBreath 7s ease-in-out infinite alternate;
}

@keyframes arcrelQuizBreath {
  from {
    opacity: 0.7;
    transform: translateX(-50%) scale(1);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

/* Constellation canvas (drawn by /assets/js/hero-net.js) behind the header,
   fading out before the form so the questions stay on clean black. */
.arcrel-quiz__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(560px, 80vh);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.arcrel-quiz__bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

/* The header lives in the full shell (see contact-us.njk); the form below it
   keeps the narrow one. */
.arcrel-quiz__head {
  text-align: center;
  margin-bottom: var(--sp-5);
}

.arcrel-quiz__h1 {
  margin: 0 auto var(--sp-2);
  max-width: 18ch;
  line-height: 1.06;
  color: var(--white);
  text-wrap: balance;
}

.arcrel-quiz__sub {
  margin: 0 auto;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.arcrel-quiz {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
}

/* Honeypot. Not display:none — some bots skip anything undisplayed. Kept in
   the layout but pushed out of sight and out of the tab order. */
.arcrel-quiz__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Progress ------------------------------------------------------------- */

.arcrel-quiz__bar,
.arcrel-quiz__count {
  display: none;
}

.arcrel-quiz.is-enhanced .arcrel-quiz__bar {
  display: block;
  height: 3px;
  margin-bottom: var(--sp-2);
  border-radius: 999px;
  background: var(--divider);
  overflow: hidden;
}

/* Scaled rather than resized: animating width lays out on every frame, and
   this fires on each of the eight steps. transform is composited instead.
   The gradient compresses slightly at low progress, which is invisible on a
   3px bar. */
.arcrel-quiz__bar-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--purple), var(--purple-light));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}

.arcrel-quiz.is-enhanced .arcrel-quiz__count {
  display: block;
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Steps ---------------------------------------------------------------- */

.arcrel-quiz__step {
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: 0;
}

.arcrel-quiz.is-enhanced .arcrel-quiz__step {
  display: none;
  margin-bottom: 0;
}

.arcrel-quiz.is-enhanced .arcrel-quiz__step.is-active {
  display: block;
  animation: arcrelQuizIn var(--dur) var(--ease-out) both;
}

@keyframes arcrelQuizIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.arcrel-quiz__q {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  text-wrap: balance;
}

.arcrel-quiz__num {
  flex: none;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--purple-light);
}

.arcrel-quiz__optional {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-soft);
  color: var(--muted);
}

.arcrel-quiz__help {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--muted);
}

/* --- Choice options ------------------------------------------------------- */

.arcrel-quiz__options {
  display: grid;
  gap: 0.6rem;
}

.arcrel-quiz__option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--black);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.arcrel-quiz__option:hover {
  border-color: var(--purple-light);
  background: rgba(97, 25, 172, 0.1);
}

.arcrel-quiz__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The radio is hidden, so the focus ring has to be drawn on the label or
   keyboard users lose their place entirely. */
.arcrel-quiz__option:has(input:focus-visible) {
  outline: 2px solid var(--purple-light);
  outline-offset: 2px;
}

.arcrel-quiz__option:has(input:checked) {
  border-color: var(--purple-light);
  background: rgba(97, 25, 172, 0.18);
}

.arcrel-quiz__option-key {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--divider);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--muted);
}

.arcrel-quiz__option:has(input:checked) .arcrel-quiz__option-key {
  border-color: transparent;
  background: var(--purple);
  color: var(--white);
}

/* Multi-select. The marker is a tick rather than a letter key, and rounder
   than the single-choice square, so the two question types are distinguishable
   at a glance. The tick only appears once the option is chosen — an empty box
   carrying a ghost tick reads as already checked. */
.arcrel-quiz__options--multi .arcrel-quiz__option-key {
  border-radius: 6px;
}

.arcrel-quiz__option-key svg {
  width: 15px;
  height: 15px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.arcrel-quiz__option:has(input:checked) .arcrel-quiz__option-key svg {
  opacity: 1;
  transform: scale(1);
}

.arcrel-quiz__option-text {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--warm-white);
}

/* --- Text inputs ---------------------------------------------------------- */

.arcrel-quiz input[type="text"],
.arcrel-quiz input[type="email"],
.arcrel-quiz input[type="tel"],
.arcrel-quiz textarea {
  width: 100%;
  padding: 0.85em 0;
  font-family: var(--font-body);
  font-size: var(--step-1);
  color: var(--white);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--divider);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.arcrel-quiz textarea {
  resize: vertical;
  line-height: 1.6;
}

.arcrel-quiz input::placeholder,
.arcrel-quiz textarea::placeholder {
  color: var(--ink-soft);
  color: rgba(161, 161, 181, 0.6);
}

.arcrel-quiz input:focus-visible,
.arcrel-quiz textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--purple-light);
}

.arcrel-quiz__step.has-error input,
.arcrel-quiz__step.has-error textarea {
  border-bottom-color: var(--red);
}

.arcrel-quiz__error {
  margin: 0.6rem 0 0;
  min-height: 1.2em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--red);
}

/* --- Step nav ------------------------------------------------------------- */

.arcrel-quiz__nav {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.arcrel-quiz.is-enhanced .arcrel-quiz__nav {
  display: flex;
}

/* Nothing to go back to on the first step. */
.arcrel-quiz__step[data-step="0"] .arcrel-quiz__back {
  display: none;
}

.arcrel-quiz__back {
  padding: 0.6em 1em;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.arcrel-quiz__back:hover,
.arcrel-quiz__back:focus-visible {
  color: var(--white);
  border-color: var(--purple-light);
}

.arcrel-quiz__hint {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--muted);
}

.arcrel-quiz__hint kbd {
  padding: 0.15em 0.45em;
  border: 1px solid var(--divider);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9em;
}

/* Touch has no Enter key to press. */
@media (hover: none) {
  .arcrel-quiz__hint {
    display: none;
  }
}

/* --- Submit --------------------------------------------------------------- */

.arcrel-quiz__submit {
  margin-top: var(--sp-4);
  text-align: center;
}

/* The enhanced flow submits from the last step's button instead. */
.arcrel-quiz.is-enhanced .arcrel-quiz__submit {
  display: none;
}

.arcrel-quiz__note {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .arcrel-quiz.is-enhanced .arcrel-quiz__step.is-active {
    animation: none;
  }
  .arcrel-quiz__bar-fill,
  .arcrel-quiz__option,
  .arcrel-quiz__back {
    transition: none;
  }
}