/**
 * "From order to delivery" — animated production-line band (custom-cups single products).
 * Self-contained, scoped under .wax-journey. Brand accent maps to the theme btn colour.
 */
.wax-journey {
  --wj-dur: 16s;
  --wj-accent: #ff6b35;
  --wj-accent-dark: #e85d2c;
  --wj-accent-soft: #ffe0d3;
  --wj-ink: #1d2129;
  --wj-line: #c9ced6;
  --wj-muted: #6c757d;
  --wj-paper: #ffffff;
  --wj-rail: #e9ecef;
  padding: 2.25rem 0;
  overflow: hidden;
}
.wax-journey__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---- header ---- */
.wax-journey__header { margin-bottom: 1.25rem; }
.wax-journey__header--center { text-align: center; }
.wax-journey__subheading {
  margin: 0 0 .4rem;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wj-accent);
}
.wax-journey__title {
  margin: 0 0 .55rem;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wj-ink);
}
.wax-journey__header .rte p {
  margin: 0 auto;
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--wj-ink);
}

/* ---- stage / svg ---- */
.wax-journey__stage { position: relative; }
.wax-journey__svg { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; overflow: visible; }

/* ---- SVG paint helpers ---- */
.wax-journey [class*="s-"]:not([class*="f-"]) { fill: none; }
.wax-journey .s-ink   { stroke: var(--wj-ink);    stroke-width: 3;   stroke-linecap: round; stroke-linejoin: round; }
.wax-journey .s-line  { stroke: var(--wj-line);   stroke-width: 2;   stroke-linecap: round; stroke-linejoin: round; }
.wax-journey .s-muted { stroke: var(--wj-line);   stroke-width: 2;   stroke-linecap: round; }
.wax-journey .s-teal  { stroke: var(--wj-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wax-journey .f-paper { fill: var(--wj-paper); }
.wax-journey .f-teal  { fill: var(--wj-accent); }
.wax-journey .f-ink   { fill: var(--wj-ink); }
.wax-journey .f-teal-soft { fill: var(--wj-accent-soft); }
.wax-journey .wj-logo--accent { fill: var(--wj-accent); }

/* ---- rail ---- */
.wax-journey .wj-rail-line { stroke: var(--wj-rail); stroke-width: 4; stroke-linecap: round; }
.wax-journey .wj-rail-ticks { stroke: var(--wj-line); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.5 43.7; opacity: .55; }
.wax-journey .wj-progress {
  stroke: var(--wj-accent); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 1060; stroke-dashoffset: 1060;
  animation: wj-progress var(--wj-dur) linear infinite;
}
.wax-journey .wj-node-ring { fill: var(--wj-paper); stroke: var(--wj-line); stroke-width: 2.5; }
.wax-journey .wj-node-dot {
  fill: var(--wj-line);
  transform-box: fill-box; transform-origin: center;
  animation: wj-node var(--wj-dur) ease-in-out calc(var(--phase) * var(--wj-dur)) infinite both;
}

/* ---- carriage + traveller (share the travel path) ---- */
.wax-journey .wj-carriage,
.wax-journey .wj-traveler {
  animation: wj-travel var(--wj-dur) cubic-bezier(.65,0,.35,1) infinite both;
}
.wax-journey .wj-carriage-link { stroke: var(--wj-line); stroke-width: 2; }

/* ---- glyphs (cross-fade per phase) ---- */
.wax-journey .wj-glyph {
  opacity: 0;
  animation: wj-glyph var(--wj-dur) ease-in-out calc(var(--phase) * var(--wj-dur)) infinite both;
}

/* ---- sub-animations ---- */
.wax-journey .wj-steam {
  fill: none; stroke: var(--wj-line); stroke-width: 3; stroke-linecap: round;
  opacity: 0;
  animation: wj-steam 2.6s ease-in-out infinite;
}
.wax-journey .wj-wrap-sweep {
  animation: wj-sweep var(--wj-dur) ease-in-out calc(.5 * var(--wj-dur)) infinite both;
  opacity: 0;
}
.wax-journey .wj-paint-reveal {
  opacity: 0;
  animation: wj-paint var(--wj-dur) ease calc(.25 * var(--wj-dur)) infinite both;
}
.wax-journey .wj-brush {
  animation: wj-brush var(--wj-dur) ease-in-out calc(.25 * var(--wj-dur)) infinite both;
}
.wax-journey .wj-wheel {
  transform-box: fill-box; transform-origin: center;
  animation: wj-spin 1.1s linear infinite;
}
.wax-journey .wj-motion {
  stroke: var(--wj-accent); stroke-width: 3; stroke-linecap: round;
  opacity: 0;
  animation: wj-motion 0.9s ease-in-out infinite;
}

@keyframes wj-travel {
  0%   { transform: translateX(190px); opacity: 0; }
  4%   { opacity: 1; }
  7%   { transform: translateX(190px); }
  25%  { transform: translateX(463px); }
  32%  { transform: translateX(463px); }
  50%  { transform: translateX(737px); }
  57%  { transform: translateX(737px); }
  75%  { transform: translateX(1010px); }
  82%  { transform: translateX(1010px); opacity: 1; }
  97%  { opacity: 0; }
  100% { transform: translateX(1400px); opacity: 0; }
}
@keyframes wj-glyph {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes wj-progress {
  0%   { stroke-dashoffset: 1060; }
  6%   { stroke-dashoffset: 1060; }
  82%  { stroke-dashoffset: 0; }
  97%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1060; }
}
@keyframes wj-node {
  0%   { fill: var(--wj-line); transform: scale(1); }
  4%   { fill: var(--wj-accent); transform: scale(1.7); }
  22%  { fill: var(--wj-accent); transform: scale(1.35); }
  100% { fill: var(--wj-accent); transform: scale(1.35); }
}
@keyframes wj-steam {
  0%   { opacity: 0; transform: translateY(4px); }
  30%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes wj-sweep {
  0%   { opacity: 0; transform: translateX(-24px); }
  4%   { opacity: 1; }
  18%  { opacity: 1; transform: translateX(24px); }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes wj-paint {
  0%   { opacity: 0; }
  10%  { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes wj-brush {
  0%   { opacity: 0; transform: translateX(-26px) translateY(6px); }
  5%   { opacity: 1; }
  9%   { transform: translateX(-14px) translateY(0); }
  19%  { transform: translateX(20px) translateY(-2px); opacity: 1; }
  23%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes wj-spin { to { transform: rotate(360deg); } }
@keyframes wj-motion {
  0%   { opacity: 0; transform: translateX(6px); }
  50%  { opacity: .9; }
  100% { opacity: 0; transform: translateX(-6px); }
}

/* ---- step labels ---- */
.wax-journey__steps-shell { margin-top: 1.5rem; }
.wax-journey__steps-viewport { overflow: visible; }
.wax-journey__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
  margin: 0; padding: 0; list-style: none;
}
.wax-journey__step {
  position: relative;
  border: 1px solid var(--wj-rail);
  border-radius: 14px;
  background: #faf8f5;
  padding: 1rem 1.15rem;
  text-align: left;
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
  animation: wj-step var(--wj-dur) ease-in-out calc(var(--phase) * var(--wj-dur)) infinite both;
}
@keyframes wj-step {
  0%   { border-color: var(--wj-rail); box-shadow: none; transform: translateY(0); }
  4%   { border-color: var(--wj-accent); box-shadow: 0 10px 26px rgba(255,107,53,.16); transform: translateY(-4px); }
  22%  { border-color: var(--wj-accent); box-shadow: 0 10px 26px rgba(255,107,53,.16); transform: translateY(-4px); }
  26%  { border-color: var(--wj-rail); box-shadow: none; transform: translateY(0); }
  100% { border-color: var(--wj-rail); box-shadow: none; transform: translateY(0); }
}
.wax-journey__step-index { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--wj-accent); }
.wax-journey__step-title { margin: .3rem 0 .3rem; font-size: 17px; font-weight: 800; color: var(--wj-ink); }
.wax-journey__step-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--wj-muted); }
.wax-journey__steps-dots { display: none; }

/* ---- mobile: steps become a swipeable carousel ---- */
@media (max-width: 640px) {
  .wax-journey__steps-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wax-journey__steps-viewport::-webkit-scrollbar { display: none; }
  .wax-journey__steps { display: flex; gap: .75rem; padding: .25rem .25rem .5rem; }
  .wax-journey__step { flex: 0 0 78%; scroll-snap-align: center; }
  .wax-journey__steps-dots { display: flex; justify-content: center; gap: .5rem; margin-top: .9rem; }
  .wax-journey__dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
    background: var(--wj-line); cursor: pointer; transition: width .25s ease, background .25s ease;
  }
  .wax-journey__dot.is-active { width: 22px; background: var(--wj-accent); }
}

/* ---- reduced motion: static first frame + informative steps ---- */
@media (prefers-reduced-motion: reduce) {
  .wax-journey .wj-traveler,
  .wax-journey .wj-carriage,
  .wax-journey .wj-progress,
  .wax-journey .wj-glyph,
  .wax-journey .wj-node-dot,
  .wax-journey .wj-steam,
  .wax-journey .wj-brush,
  .wax-journey .wj-paint-reveal,
  .wax-journey .wj-wrap-sweep,
  .wax-journey .wj-wheel,
  .wax-journey .wj-motion,
  .wax-journey__step { animation: none !important; }
  .wax-journey .wj-glyph { opacity: 0; }
  .wax-journey .wj-glyph--order { opacity: 1; }
  .wax-journey .wj-node-dot { fill: var(--wj-accent); }
  .wax-journey .wj-progress { display: none; }
  .wax-journey .wj-paint-reveal { opacity: 1; }
}