/* ============================================================
   LOADING — three variants. Shared brand block + atoms first.
   ============================================================ */
.loading-brand { display: flex; align-items: center; gap: 12px; }
.loading-brand-token {
  width: 48px; height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.loading-brand-token img { width: 100%; height: 100%; display: block; }
.loading-brand-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  letter-spacing: -0.005em; line-height: 1.1;
}
.loading-brand-sub {
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700;
  margin-top: 2px;
}
.loading-brand--light { color: #000; }
.loading-brand--light .loading-brand-sub { color: var(--fg-3); }
.loading-brand--dark  { color: #fff; }
.loading-brand--dark  .loading-brand-token {
  box-shadow: 0 8px 22px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.20);
}
.loading-brand--dark  .loading-brand-sub { color: var(--color-golden-yellow); }

/* Eyebrow shared with login */
.loading-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--color-arches-red);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.loading-eyebrow::before {
  content: ""; width: 22px; height: 2px; background: currentColor;
}
.loading-eyebrow--on-dark { color: var(--color-golden-yellow); }

.loading-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--color-success);
  box-shadow: 0 0 0 4px rgba(77,167,62,0.25);
  display: inline-block;
}

/* -------------- Variant: PULSE -------------- */
.loading-pulse {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background: var(--color-bone, #f6f4ef);
  position: relative;
  overflow: hidden;
}
.loading-pulse::before {
  content: "";
  position: absolute; left: 50%; top: 38%;
  width: 520px; height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(219,0,7,0.10) 0%, rgba(219,0,7,0) 60%);
  pointer-events: none;
}
.loading-pulse-stack {
  display: flex; flex-direction: column; align-items: center;
  gap: 28px;
  position: relative; z-index: 1;
}
.loading-token-wrap {
  position: relative;
  width: 96px; height: 96px;
}
.loading-token {
  position: absolute; inset: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(0,0,0,0.06);
  animation: loadingTokenBounce 1.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) infinite;
}
.loading-token img { width: 100%; height: 100%; display: block; }
.loading-token-ring {
  position: absolute; inset: 0;
  border-radius: 22px;
  border: 2px solid var(--color-arches-red);
  opacity: 0;
  animation: loadingRing 1.8s ease-out infinite;
}
.loading-token-ring--b { animation-delay: 0.9s; }
@keyframes loadingTokenBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.02); }
}
@keyframes loadingRing {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.7);  opacity: 0;   }
}
.loading-pulse-text { text-align: center; }
.loading-pulse-text .loading-eyebrow { justify-content: center; }
.loading-pulse-text .loading-eyebrow::before { display: none; }
.loading-pulse-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 28px;
  letter-spacing: -0.01em;
  color: #000;
  margin-top: 6px;
}
.loading-pulse-sub {
  font-size: 13px; color: var(--fg-3);
  margin-top: 6px;
}
.loading-bar {
  width: 240px; height: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}
.loading-bar-fill {
  display: block; height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--color-arches-red),
    var(--color-golden-yellow));
  animation: loadingBar 1.4s ease-in-out infinite;
}
@keyframes loadingBar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* -------------- Variant: STEPS -------------- */
.loading-steps {
  display: grid;
  grid-template-columns: 30fr 70fr;
  min-height: 100vh;
  background: #fff;
}
.loading-steps-rail {
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 360px;
}
.loading-steps-rail-bg {
  position: absolute; inset: 0;
  background-color: #3a2e23;
  background-image: url("../../assets/pattern-fries.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transform: rotate(90deg) scale(1.5);
  transform-origin: center center;
}
.loading-steps-rail-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.65) 100%);
}
.loading-steps-rail::after {
  content: ""; position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 4px; background: var(--color-arches-red);
  z-index: 3;
}
.loading-steps-rail-content {
  position: absolute; inset: 0;
  z-index: 2;
  padding: 40px 32px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.loading-steps-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  max-width: 280px;
}
.loading-steps-headline i { font-style: italic; color: var(--color-golden-yellow); }
.loading-steps-foot {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.loading-steps-main {
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 64px;
}
.loading-steps-card {
  width: 100%; max-width: 480px;
}
.loading-steps-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 44px);
  line-height: 1.04; letter-spacing: -0.015em;
  color: #000;
  margin: 0 0 12px;
}
.loading-steps-lede {
  font-size: 15px; line-height: 1.55; color: var(--fg-2);
  margin: 0 0 28px; max-width: 380px;
}
.loading-steps-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.loading-step {
  display: flex; align-items: center; gap: 14px;
  font-size: 15px;
  transition: color .25s var(--ease-out, ease), opacity .25s ease;
}
.loading-step-marker {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.06);
  color: var(--fg-3);
  flex-shrink: 0;
  transition: background .25s ease, color .25s ease;
}
.loading-step-spinner {
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: loadingSpin 0.7s linear infinite;
}
@keyframes loadingSpin {
  to { transform: rotate(360deg); }
}
.loading-step--pending { color: var(--fg-3); opacity: 0.55; }
.loading-step--active  { color: #000; font-weight: 600; }
.loading-step--active  .loading-step-marker {
  background: rgba(219,0,7,0.10);
  color: var(--color-arches-red);
}
.loading-step--done    { color: var(--fg-2); }
.loading-step--done    .loading-step-marker {
  background: var(--color-success);
  color: #fff;
}

/* -------------- Variant: FRIES (playful) -------------- */
.loading-fries {
  min-height: 100vh;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.loading-fries-heat {
  display: block;
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(255,188,13,0.22) 0%,
    rgba(255,188,13,0.08) 50%,
    rgba(255,188,13,0.18) 100%);
  pointer-events: none;
  z-index: 0;
}

.loading-fries-stage {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.loading-fry {
  position: absolute;
  top: -240px;
  left: 0;
  width: var(--fry-size, 140px);
  height: var(--fry-size, 140px);
  opacity: var(--fry-op, 1);
  transform: translate(-50%, 0) rotate(var(--fry-rot, 0deg));
  animation-name: loadingFryDrop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, top;
}
.loading-fry img {
  width: 100%; height: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
@keyframes loadingFryDrop {
  0% {
    top: -240px;
    transform: translate(-50%, 0)
               rotate(var(--fry-rot, 0deg))
               translateX(0);
    opacity: 0;
  }
  8% {
    opacity: var(--fry-op, 1);
  }
  50% {
    transform: translate(-50%, 0)
               rotate(calc(var(--fry-rot, 0deg) + var(--fry-spin, 0deg) * 0.5))
               translateX(calc(var(--fry-sway, 0px)));
  }
  92% { opacity: var(--fry-op, 1); }
  100% {
    top: 110vh;
    transform: translate(-50%, 0)
               rotate(calc(var(--fry-rot, 0deg) + var(--fry-spin, 0deg)))
               translateX(0);
    opacity: 0;
  }
}

.loading-fries-center {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 24px;
  max-width: 560px;
}
.loading-fries-glow {
  position: absolute; left: 50%; top: 50%;
  width: 720px; height: 720px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.85) 28%,
      rgba(255,255,255,0.50) 45%,
      rgba(255,255,255,0) 65%);
  filter: blur(2px);
  pointer-events: none;
}
.loading-fries-glow::before { display: none; }

.loading-fries-center-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
}
.loading-fries-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #000;
  margin: 4px 0 0;
}

.loading-fries-status {
  height: 28px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.loading-fries-status-rail {
  position: absolute; inset: 0;
}
.loading-fries-status-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--fg-2);
  letter-spacing: 0.01em;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .45s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              opacity .35s ease;
}
.loading-fries-status-msg.is-active {
  transform: translateY(0);
  opacity: 1;
}
.loading-fries-status-msg.is-out {
  transform: translateY(-120%);
  opacity: 0;
}

@media (max-width: 880px) {
  .loading-fries-center { padding: 16px; }
  .loading-fries-glow { width: 480px; height: 480px; }
}

@media (max-width: 880px) {
  .loading-steps { grid-template-columns: 1fr; }
  .loading-steps-rail { min-height: 220px; }
  .loading-steps-rail::after { right: 0; left: 0; bottom: 0; top: auto; width: auto; height: 4px; }
  .loading-steps-rail-content { padding: 24px; }
  .loading-steps-main { padding: 32px 24px; }
  .loading-fries-content { padding: 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   Design tokens — safe fallbacks if not defined elsewhere.
   ============================================================ */
:root {
  --color-arches-red:      #db0007;
  --color-golden-yellow:   #ffbc0d;
  --color-golden-yellow-d: #ffba00;
  --color-bone:            #f6f4ef;
  --color-success:         #4da73e;
  --fg-1:                  #0a0a0a;
  --fg-2:                  rgba(0,0,0,0.65);
  --fg-3:                  rgba(0,0,0,0.45);
  --font-display:          'Speedee', system-ui, sans-serif;
  --ease-out:              cubic-bezier(0.16, 1, 0.3, 1);
}