/* =========================================
   customer.css - Customer app view only (QUO-25 / OCW-14)

   Own sheet, same reasoning QUO-24 established: this page shares no component
   with Home (no globe, no orbit, no hero grid), so folding it into home.css
   would put unrelated rules behind one cache entry and grow the sheet the
   QUO-34 refactor exists to keep small.

   Every colour is an existing base.css token - zero literal hex values - so the
   warm-stone light theme works with no second palette to maintain. No orange.
   ========================================= */

.customer-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
}

/* #viewMount clips, so this page scrolls on its own surface rather than trying
   to scroll an ancestor with overflow:hidden - the constraint that defeated
   QUO-37's originally specified sticky location. */
.cust-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(32px, 6vh, 72px) clamp(20px, 5vw, 64px) clamp(48px, 10vh, 96px);
  -webkit-overflow-scrolling: touch;
}

/* ---- header ---- */

.cust-header {
  max-width: 62ch;
  margin: 0 0 clamp(36px, 6vh, 64px);
}

.cust-eyebrow {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sidebar-text);
}

.cust-title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--sidebar-active-text);
}

.cust-lede {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  line-height: 1.65;
  color: var(--sidebar-text);
}

/* ---- the three-step flow ---- */

.cust-flow {
  list-style: none;
  margin: 0 0 clamp(40px, 7vh, 72px);
  padding: 0;
  max-width: 70ch;
}

.cust-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: clamp(16px, 2.4vw, 26px);
  padding: 0 0 clamp(26px, 4vh, 40px);
}

.cust-step-rail {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

/* the thread between steps - the visual argument that this is a sequence */
.cust-step:not(:last-child) .cust-step-rail::after {
  content: '';
  position: absolute;
  top: 34px;
  bottom: -30px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    var(--border-content-frame),
    var(--border-content-glow)
  );
}

.cust-step-icon {
  width: 22px;
  height: 22px;
  color: var(--sidebar-active-text);
  flex: 0 0 auto;
}

.cust-step-title {
  margin: 0 0 10px;
  font-size: clamp(1.06rem, 1.9vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--sidebar-active-text);
}

.cust-step-text {
  margin: 0;
  font-size: clamp(0.94rem, 1.4vw, 1.02rem);
  line-height: 1.68;
  color: var(--sidebar-text);
}

/* ---- wallet section ---- */

.cust-wallet {
  max-width: 78ch;
  margin: 0 0 clamp(36px, 6vh, 60px);
}

.cust-section-title {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--sidebar-active-text);
}

.cust-section-lede {
  margin: 0 0 clamp(22px, 3.5vh, 34px);
  max-width: 58ch;
  font-size: clamp(0.96rem, 1.5vw, 1.06rem);
  line-height: 1.65;
  color: var(--sidebar-text);
}

.cust-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

.cust-card {
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--border-content-frame);
  border-radius: 14px;
  background: var(--dark-section-bg);
}

.cust-card-icon {
  width: 20px;
  height: 20px;
  margin-bottom: 14px;
  color: var(--sidebar-active-text);
}

.cust-card-title {
  margin: 0 0 9px;
  font-size: clamp(0.99rem, 1.5vw, 1.08rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--sidebar-active-text);
}

.cust-card-text {
  margin: 0;
  font-size: clamp(0.88rem, 1.3vw, 0.95rem);
  line-height: 1.62;
  color: var(--sidebar-text);
}

/* ---- closing: back to the loop ---- */

.cust-close {
  max-width: 70ch;
  padding: clamp(24px, 4vh, 36px) clamp(22px, 3.4vw, 34px);
  border: 1px solid var(--border-content-frame);
  border-radius: 16px;
  background: var(--dark-section-bg);
}

.cust-close-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 16px;
  color: var(--sidebar-active-text);
}

.cust-close-title {
  margin: 0 0 14px;
  font-size: clamp(1.12rem, 2.1vw, 1.44rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--sidebar-active-text);
}

.cust-close-text {
  margin: 0 0 14px;
  font-size: clamp(0.94rem, 1.4vw, 1.02rem);
  line-height: 1.68;
  color: var(--sidebar-text);
}

.cust-close-text:last-child {
  margin-bottom: 0;
}

/* ---- motion: staggered entry in reading order, 50ms offsets, spring easing,
   fully off under reduced-motion. Cards capped at 3 so the stagger rule's
   6-element ceiling is never reached. ---- */

@media (prefers-reduced-motion: no-preference) {
  .customer-view.is-entering .cust-step,
  .customer-view.is-entering .cust-card,
  .customer-view.is-entering .cust-close {
    opacity: 0;
    transform: translateY(10px);
    animation: cust-rise 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .customer-view.is-entering .cust-step:nth-child(1) { animation-delay: 0.04s; }
  .customer-view.is-entering .cust-step:nth-child(2) { animation-delay: 0.09s; }
  .customer-view.is-entering .cust-step:nth-child(3) { animation-delay: 0.14s; }
  .customer-view.is-entering .cust-card:nth-child(1) { animation-delay: 0.19s; }
  .customer-view.is-entering .cust-card:nth-child(2) { animation-delay: 0.24s; }
  .customer-view.is-entering .cust-card:nth-child(3) { animation-delay: 0.29s; }
  .customer-view.is-entering .cust-close { animation-delay: 0.34s; }
}

@keyframes cust-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- mobile ---- */

@media (max-width: 767px) {
  .cust-step {
    grid-template-columns: 30px 1fr;
    gap: 14px;
  }

  .cust-step:not(:last-child) .cust-step-rail::after {
    top: 30px;
    bottom: -26px;
  }

  .cust-step-icon {
    width: 19px;
    height: 19px;
  }

  .cust-cards {
    grid-template-columns: 1fr;
  }
}