/*
  Registration v2 (maximalist pass)
  Path: css/register-v2.css

  Load AFTER register.css:
  <link rel="stylesheet" href="css/register.css">
  <link rel="stylesheet" href="css/register-v2.css">

  Everything here draws from one shared motion vocabulary (section 0)
  so a maximalist page still reads as one coherent product rather than
  a pile of unrelated effects. Nothing in register.css is removed.
*/

/* ================= 0. Motion tokens ================= */

:root {
  --ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 150ms;
  --dur-quick: 280ms;
  --dur-moment: 480ms;
  --dur-scene: 900ms;
}

/* ================= Compact mobile trail: label + fill bar ================= */
/* Below 768px, the dot trail is replaced entirely rather than shrunk
   further, per the mini-spec decision: a scrolling or cramped dot row
   is a worse pattern than a single legible progress bar at any width. */

.reg-trail-compact {
  display: none;
  margin-bottom: 32px;
}

.reg-trail-compact-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 10px;
}

.reg-trail-compact-track {
  position: relative;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background-image: var(--stitch);
  background-color: transparent;
}

.reg-trail-compact-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  background-color: var(--color-accent);
  transition: width var(--dur-scene) var(--ease-signature);
}

@media (max-width: 768px) {
  .reg-trail {
    display: none;
  }
  .reg-trail-compact {
    display: block;
  }
}

/* ================= Layout: form + persistent card ================= */

.reg-shell.has-card {
  max-width: 980px;
  position: relative;
  z-index: 1;
}

main.reg-shell-wrap {
  position: relative;
  overflow: hidden;
}

.reg-layout-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.reg-layout-grid > * {
  min-width: 0;
}

@media (max-width: 1024px) {
  .reg-layout-grid {
    grid-template-columns: 1fr;
  }
}

.reg-card-rail {
  position: sticky;
  top: 88px;
  min-width: 0;
}

.reg-camper-card .camper-card-meta,
.reg-camper-card .camper-card-meta-item {
  min-width: 0;
}

.reg-camper-card .camper-card-meta-label,
.reg-camper-card .camper-card-meta-value {
  overflow-wrap: break-word;
}

@media (max-width: 1024px) {
  .reg-card-rail {
    position: sticky;
    top: 12px;
    z-index: 50;
    margin-bottom: 8px;
  }
}

/* ================= Brand mark, present throughout the flow ================= */
/* Reuses the landing page's abstract JT mark. Fixed once, drifts very
   slowly rather than re-triggering per step, per mini-spec section 2. */

.reg-brand-mark {
  position: absolute;
  top: -6%;
  right: -6%;
  width: clamp(520px, 52vw, 820px);
  transform: rotate(-8deg);
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
  animation: reg-mark-drift 26s ease-in-out infinite;
}

.reg-brand-mark svg {
  width: 100%;
  height: auto;
  display: block;
}

.reg-brand-mark svg .mark-fill {
  fill: var(--color-primary);
  fill-opacity: 1;
}

html[data-theme="dark"] .reg-brand-mark {
  opacity: 0.14;
}

@keyframes reg-mark-drift {
  0%, 100% { transform: rotate(-8deg) translate(0, 0); }
  50% { transform: rotate(-6deg) translate(-14px, 10px); }
}

@media (max-width: 860px) {
  .reg-brand-mark {
    width: clamp(360px, 80vw, 520px);
    top: -2%;
    right: -22%;
    opacity: 0.08;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reg-brand-mark { animation: none; }
}

/* ================= Camper Card: full hero treatment ================= */

.reg-camper-card {
  max-width: 100%;
  transform: rotate(-1.2deg);
  transition: transform var(--dur-moment) var(--ease-signature),
              box-shadow var(--dur-moment) var(--ease-signature),
              padding var(--dur-moment) var(--ease-signature);
  animation: reg-card-glow-drift 9s ease-in-out infinite;
}

.reg-camper-card:hover {
  transform: rotate(0.6deg) translateY(-3px);
}

@keyframes reg-card-glow-drift {
  0%, 100% { background-position: 100% 0%; }
  50% { background-position: 70% 30%; }
}

@media (prefers-reduced-motion: reduce) {
  .reg-camper-card { animation: none; }
}

/* Rows arrive with a snap-overshoot "click into place" motion instead
   of a plain fade. */

.camper-card-meta-item.reg-row-enter {
  animation: reg-row-snap-in var(--dur-moment) var(--ease-snap) both;
}

@keyframes reg-row-snap-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.9); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .camper-card-meta-item.reg-row-enter { animation: none; }
}

/* Reference code row, hidden until the confirmation stamp sequence */

.camper-card-refcode-row {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(247, 243, 236, 0.25);
  position: relative;
  overflow: hidden;
}

.camper-card-refcode-row.is-revealed {
  display: block;
}

.reg-refcode-stamp {
  animation: reg-stamp-in var(--dur-moment) var(--ease-snap) both;
  display: inline-block;
}

@keyframes reg-stamp-in {
  0% { opacity: 0; transform: scale(1.6); filter: brightness(1.8); }
  55% { opacity: 1; transform: scale(0.94); filter: brightness(1.3); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

.reg-refcode-seal {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background-color: var(--color-accent);
  animation: reg-seal-fill var(--dur-scene) var(--ease-signature) 0.3s forwards;
}

@keyframes reg-seal-fill {
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .reg-refcode-stamp { animation: none; }
  .reg-refcode-seal { animation: none; width: 100%; }
}

/* Mobile "peek" compressed state, sprung transition */

@media (max-width: 1024px) {
  .reg-camper-card {
    transition: transform var(--dur-moment) var(--ease-snap),
                padding var(--dur-moment) var(--ease-snap),
                box-shadow var(--dur-moment) var(--ease-snap);
  }

  .reg-card-rail.is-peeking .reg-camper-card {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow-card);
    transform: rotate(0deg);
  }

  .reg-card-rail.is-peeking .camper-card-top,
  .reg-card-rail.is-peeking .camper-card-role,
  .reg-card-rail.is-peeking .camper-card-divider,
  .reg-card-rail.is-peeking .camper-card-meta-item:not(:first-child) {
    display: none;
  }

  .reg-card-rail.is-peeking .camper-card-name {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .reg-card-rail.is-peeking .camper-card-meta {
    justify-content: flex-end;
  }
}

/* ================= Mobile theme toggle, icon-only ================= */

.theme-toggle-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  transition: border-color var(--dur-quick) var(--ease-signature),
              transform var(--dur-quick) var(--ease-snap),
              background-color var(--dur-quick) ease;
}

.theme-toggle-icon:active {
  transform: scale(0.92);
}

.theme-toggle-icon svg {
  transition: opacity var(--dur-quick) ease, transform var(--dur-moment) var(--ease-snap);
}

.theme-toggle-icon .icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle-icon .icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle-icon .icon-moon {
  display: block;
}

html[data-theme="dark"] .theme-toggle-icon {
  border-color: rgba(232, 99, 47, 0.3);
}

@media (max-width: 860px) {
  .theme-toggle-icon {
    display: flex;
  }
}

/* ================= Date of birth: day/month/year selects ================= */

.reg-dob-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr 1fr;
  gap: 10px;
  min-width: 0;
}

.reg-dob-grid > * {
  min-width: 0;
}

.reg-dob-grid select {
  padding: 13px 30px 13px 14px;
  background-position: right 12px center;
  background-size: 11px 7px;
  font-size: var(--fs-sm);
  width: 100%;
  text-overflow: ellipsis;
}

.reg-dob-grid select#f-dob-day,
.reg-dob-grid select#f-dob-year {
  font-family: var(--font-mono);
}

@media (max-width: 480px) {
  .reg-dob-grid {
    grid-template-columns: 0.7fr 1.35fr 0.95fr;
    gap: 6px;
  }
  .reg-dob-grid select {
    padding: 12px 24px 12px 10px;
    background-position: right 8px center;
    background-size: 10px 6px;
    font-size: 0.8125rem;
  }
}

@media (max-width: 360px) {
  .reg-dob-grid select {
    padding-right: 20px;
    font-size: 0.75rem;
  }
}


.reg-trail {
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  max-width: 100%;
  flex-wrap: nowrap;
}

.reg-trail::-webkit-scrollbar {
  display: none;
}

.reg-trail-dot {
  width: 36px;
  height: 36px;
  font-size: 0.8125rem;
  position: relative;
  flex-shrink: 0;
}

.reg-trail-line {
  flex: 0 0 32px;
}

@media (max-width: 480px) {
  .reg-trail-dot {
    width: 28px;
    height: 28px;
    font-size: 0.6875rem;
  }
  .reg-trail-line {
    flex: 0 0 18px;
  }
}

.reg-trail-dot.is-active {
  animation: trail-breathe var(--dur-scene) ease-in-out infinite;
}

@keyframes trail-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 84, 31, 0.32); }
  50% { box-shadow: 0 0 0 7px rgba(217, 84, 31, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .reg-trail-dot.is-active { animation: none; box-shadow: 0 0 0 4px rgba(217, 84, 31, 0.18); }
}

.reg-trail-dot.is-done {
  font-size: 0;
}

.reg-trail-dot .reg-check-svg {
  width: 16px;
  height: 16px;
  display: none;
}

.reg-trail-dot.is-done .reg-check-svg {
  display: block;
}

.reg-trail-dot.is-done .reg-check-svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: reg-check-draw var(--dur-moment) var(--ease-snap) forwards;
}

@keyframes reg-check-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reg-trail-dot.is-done .reg-check-svg path { animation: none; stroke-dashoffset: 0; }
}

/* Stitched connecting line, reusing the --stitch token from theme.css */

.reg-trail-line {
  position: relative;
  overflow: hidden;
  height: 2px;
  background-image: var(--stitch);
  background-color: transparent;
}

.reg-trail-line::before {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background-color: var(--color-accent);
  transition: transform var(--dur-scene) var(--ease-signature);
}

.reg-trail-line.is-filled::before {
  transform: scaleX(1);
}

/* ================= Step transitions ================= */

.reg-step-viewport {
  position: relative;
}

.reg-step {
  transition: opacity var(--dur-quick) ease, transform var(--dur-moment) var(--ease-signature);
}

.reg-step.is-transitioning-out-forward {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(-24px);
  pointer-events: none;
}

.reg-step.is-transitioning-out-back {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(24px);
  pointer-events: none;
}

.reg-step.is-entering-forward {
  opacity: 0;
  transform: translateX(24px);
}

.reg-step.is-entering-back {
  opacity: 0;
  transform: translateX(-24px);
}

.reg-step.is-active.is-settled {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .reg-step,
  .reg-step.is-entering-forward,
  .reg-step.is-entering-back {
    transform: none !important;
    transition: opacity var(--dur-instant) ease;
  }
}

/* ================= Field error text, distinct from "required" ================= */

.reg-error-format {
  color: var(--color-danger);
  font-size: var(--fs-sm);
  margin-top: 6px;
  display: none;
}

.reg-error-format.is-visible {
  display: block;
  animation: reg-shake var(--dur-quick) var(--ease-signature);
}

@keyframes reg-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .reg-error-format.is-visible { animation: none; }
}

/* ================= Upload dropzone: drag + thumbnail arrival ================= */

.reg-dropzone {
  position: relative;
  transition: border-color var(--dur-quick) var(--ease-signature),
              background-color var(--dur-quick) var(--ease-signature),
              transform var(--dur-quick) var(--ease-snap);
}

.reg-dropzone.is-dragover {
  border-style: solid;
  border-color: var(--color-accent);
  background-color: rgba(217, 84, 31, 0.06);
  transform: scale(1.015);
  animation: reg-dropzone-pulse 1.1s ease-in-out infinite;
}

@keyframes reg-dropzone-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 84, 31, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(217, 84, 31, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .reg-dropzone.is-dragover { animation: none; transform: none; }
}

.reg-dropzone-thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 auto 14px;
  background-color: var(--color-surface-raised);
  display: none;
  position: relative;
  animation: dropzone-settle var(--dur-moment) var(--ease-snap) both;
}

.reg-dropzone-thumb.is-visible {
  display: block;
}

.reg-dropzone-thumb::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--radius-md) + 4px);
  border: 2px solid var(--color-accent);
  opacity: 0;
  animation: reg-ring-flash var(--dur-moment) var(--ease-signature) 0.1s both;
}

@keyframes reg-ring-flash {
  0% { opacity: 0.9; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.25); }
}

.reg-dropzone-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reg-dropzone-thumb.is-file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  border: 1px solid var(--color-border);
}

@keyframes dropzone-settle {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reg-dropzone-thumb, .reg-dropzone-thumb::after { animation: none; opacity: 1; }
}

.reg-dropzone-progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background-color: var(--color-border);
  overflow: hidden;
  margin-top: 10px;
  display: none;
}

.reg-dropzone-progress.is-visible {
  display: block;
}

.reg-dropzone-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--color-accent);
  transition: width var(--dur-instant) ease;
}

/* ================= Waiting states: two distinct languages ================= */
/* System-processing spinner stays the calm default ring from
   loading.css, deliberately unchanged, so it contrasts against the
   "waiting on a person" state below. */

.reg-waiting-on-person {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.reg-dual-ring {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.reg-dual-ring span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--color-accent);
}

.reg-dual-ring span:first-child {
  animation: reg-dual-breathe var(--dur-scene) ease-in-out infinite;
}

.reg-dual-ring span:last-child {
  inset: 6px;
  border-top-color: var(--color-gold);
  animation: reg-dual-breathe var(--dur-scene) ease-in-out infinite reverse;
  animation-delay: -0.3s;
}

@keyframes reg-dual-breathe {
  0%, 100% { transform: rotate(0deg) scale(0.9); opacity: 0.6; }
  50% { transform: rotate(180deg) scale(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reg-dual-ring span { animation: none; opacity: 0.9; }
}

/* ================= Consent link field, dark-mode fix ================= */
/* .consent-link-row input was never wrapped in .field, so it fell
   through to the browser's default white input background with the
   page's near-white inherited text color in dark mode, making it
   unreadable. Explicit colors here, matching every other input on
   the portal. */

.consent-link-row input {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
}

/* ================= Consent reveal ================= */

.consent-status-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.consent-status-check svg {
  width: 100%;
  height: 100%;
}

.consent-status-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: consent-check-draw var(--dur-moment) var(--ease-snap) 0.1s forwards;
}

@keyframes consent-check-draw {
  to { stroke-dashoffset: 0; }
}

.consent-status-crossfade {
  animation: consent-fade-in var(--dur-moment) var(--ease-signature) both;
}

@keyframes consent-fade-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .consent-status-check svg path { animation: none; stroke-dashoffset: 0; }
  .consent-status-crossfade { animation: none; }
}

/* ================= Review groups, staggered ================= */

.review-group.reg-stagger {
  opacity: 0;
  transform: translateY(10px);
  animation: reg-row-snap-in var(--dur-moment) var(--ease-snap) both;
}

@media (prefers-reduced-motion: reduce) {
  .review-group.reg-stagger { animation: none; opacity: 1; transform: none; }
}

/* ================= Confirmation: signature scene ================= */

.confirmation-code {
  opacity: 0;
}

.confirmation-code.is-revealed {
  animation: reg-row-snap-in var(--dur-moment) var(--ease-snap) 0.5s both;
}

#reg-app [data-step="8"] a.btn {
  opacity: 0;
}

#reg-app [data-step="8"] a.btn.is-revealed {
  animation: reg-cta-arrive var(--dur-moment) var(--ease-snap) 0.85s both;
}

@keyframes reg-cta-arrive {
  0% { opacity: 0; transform: scale(0.85) translateY(10px); }
  60% { opacity: 1; transform: scale(1.05) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

#reg-app [data-step="8"] h1 {
  opacity: 0;
}

#reg-app [data-step="8"] h1.is-revealed {
  animation: reg-row-snap-in var(--dur-moment) var(--ease-snap) 0.55s both;
}
/* ---------- Sign-in page ---------- */

.sign-in-shell {
  max-width: 460px;
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  padding-block: 48px;
}

.sign-in-panel {
  width: 100%;
  position: relative;
  z-index: 1;
}

.sign-in-inline-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sign-in-sent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-success-bg);
  color: var(--color-sage);
  margin-bottom: 20px;
  animation: reg-row-snap-in var(--dur-moment) var(--ease-snap) both;
}

@media (prefers-reduced-motion: reduce) {
  .sign-in-sent-icon { animation: none; }
}

.sign-in-sent-email {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text);
}

@media (max-width: 480px) {
  .sign-in-shell { min-height: auto; padding-block: 36px; }
}
/* Grid items default to min-width: auto, which lets a long selected
   option's text push the whole column (and the field inside it)
   wider than its 1fr track instead of truncating. Explicitly allowing
   the item to shrink below its content size is what lets the
   .custom-select-trigger's ellipsis rule actually take effect. */
.reg-field-grid > .field {
  min-width: 0;
}

.custom-select {
  width: 100%;
  min-width: 0;
}

.custom-select-trigger {
  min-width: 0;
}

.reg-consent-reminder {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
}