/* Step mock-up motion for the WashNgo website mock-up: choreographed entrances, idle loops and
   pointer depth on the three "simple steps" phones. step-motion.js only arms this with motion allowed. */

/* Hidden until the step's entrance plays */
.app-step.steps-armed .ref-step-number,
.app-step.steps-armed .ref-phone-crop,
.app-step.steps-armed .usp-note,
.app-step.steps-armed .step-badge,
.app-step.steps-armed > h3,
.app-step.steps-armed > p {
  opacity: 0;
}

/* Phone glass sweep */
.ref-glare {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, #ffffff8c 48%, #ffffff00 60%);
  transform: translateX(-120%);
  pointer-events: none;
}

/* Pointer depth: each layer drifts by its own distance */
.ref-mockup {
  --px: 0;
  --py: 0;
}
.ref-mockup .ref-phone-crop,
.how-section.reference-showcase .ref-mockup .usp-note,
.ref-mockup .ref-step-number {
  transition: translate 0.6s var(--ease-out-soft);
}
.ref-mockup .ref-phone-crop {
  translate: calc(var(--px) * 6px) calc(var(--py) * 5px);
}
.how-section.reference-showcase .ref-mockup .usp-note {
  translate: calc(var(--px) * 18px) calc(var(--py) * 13px);
}
.how-section.reference-showcase .ref-mockup .ref-champ-popup,
.how-section.reference-showcase .ref-mockup .ref-time-popup {
  translate: calc(var(--px) * 24px) calc(var(--py) * 16px);
}
.ref-mockup .ref-step-number {
  translate: calc(var(--px) * -14px) calc(var(--py) * -10px);
}
.ref-mockup.is-tracking .ref-phone-crop,
.ref-mockup.is-tracking .usp-note,
.ref-mockup.is-tracking .ref-step-number {
  transition-duration: 0.15s;
}

@media (prefers-reduced-motion: no-preference) {
  /* Step number: gentle bob and a lime shadow that breathes */
  .app-step.steps-played .ref-step-number {
    animation: step-num-bob 4.6s ease-in-out infinite;
  }

  /* Vehicle icon hops; "At your doorstep" pill shimmers */
  .app-step.steps-played .ref-popup-icon svg {
    animation: step-car-hop 3.2s var(--ease-out-soft) infinite;
  }
  .reference-showcase .ref-mockup .ref-champ-copy .ref-popup-pill {
    background: linear-gradient(100deg, transparent 30%, #e0f2eb 50%, transparent 70%) no-repeat;
    background-size: 250% 100%;
    background-position: 160% 0;
  }
  .app-step.steps-played .ref-popup-pill {
    animation: step-pill-shine 3.6s ease-in-out 0.6s infinite;
  }
  .app-step.steps-played .ref-champ-cutout {
    transform-origin: 60% 100%;
    animation: step-champ-sway 5.2s ease-in-out infinite;
  }

  /* Plan card: sheen sweep and a soft glow */
  .reference-showcase .ref-package-popup .floating-note {
    overflow: hidden;
  }
  .reference-showcase .ref-package-popup .floating-note::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, #ffffff47 50%, transparent 65%);
    transform: translateX(-130%);
    pointer-events: none;
  }
  .app-step.steps-played .ref-package-popup .floating-note::after {
    animation: step-sheen 4.2s var(--ease-out-soft) 1s infinite;
  }

  /* Calendar badge: orbiting dashed ring and a pulse */
  .reference-showcase .ref-mockup .ref-schedule-popup .ref-calendar-badge::before,
  .reference-showcase .ref-mockup .ref-schedule-popup .ref-calendar-badge::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }
  .reference-showcase .ref-mockup .ref-schedule-popup .ref-calendar-badge::before {
    inset: -16px;
    border: 2px dashed #00685f66;
  }
  .reference-showcase .ref-mockup .ref-schedule-popup .ref-calendar-badge::after {
    inset: -10px;
    border: 2px solid #ddf48a;
    opacity: 0;
  }
  .app-step.steps-played .ref-calendar-badge::before {
    animation: step-spin 16s linear infinite;
  }
  .app-step.steps-played .ref-calendar-badge::after {
    animation: step-ring-pulse 2.6s var(--ease-out-quint) infinite;
  }

  /* Clock hand turns; tick re-pops */
  .ref-time-icon svg path {
    transform-box: view-box;
    transform-origin: 12px 12px;
  }
  .app-step.steps-played .ref-time-icon svg path {
    animation: step-spin 6s linear infinite;
  }
  .reference-showcase .ref-time-check {
    display: inline-block;
  }
  .app-step.steps-played .ref-time-check {
    animation: step-tick 3.4s var(--ease-back) 1.2s infinite;
  }

  /* STEP badge: slow shine */
  .reference-showcase .step-badge {
    position: relative;
    overflow: hidden;
  }
  .reference-showcase .step-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, #ffffff40 50%, transparent 65%);
    transform: translateX(-130%);
    pointer-events: none;
  }
  .app-step.steps-played .step-badge::after {
    animation: step-sheen 5s var(--ease-out-soft) 2s infinite;
  }

  /* Phone lifts a little on hover */
  .reference-showcase .ref-mockup .device {
    transition: box-shadow 0.5s var(--ease-out-soft);
  }
  .ref-mockup:hover .device {
    box-shadow: 0 22px 44px #17352f2e;
  }
}

@keyframes step-num-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0);
    box-shadow: 1cqw 1cqw 0 #e0f58a;
  }
  50% {
    transform: translateY(-5px) rotate(-3deg);
    box-shadow: 1.8cqw 1.8cqw 0 #e0f58a;
  }
}
@keyframes step-car-hop {
  0%,
  62%,
  100% {
    transform: none;
  }
  70% {
    transform: translateX(-2px) translateY(-3px) rotate(-6deg);
  }
  80% {
    transform: translateX(3px) translateY(0) rotate(2deg);
  }
  90% {
    transform: translateX(0) translateY(-1px);
  }
}
@keyframes step-pill-shine {
  0%,
  55% {
    background-position: 160% 0;
  }
  100% {
    background-position: -60% 0;
  }
}
@keyframes step-champ-sway {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.4deg) translateY(-2px);
  }
}
@keyframes step-sheen {
  0%,
  45% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}
@keyframes step-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes step-ring-pulse {
  0% {
    opacity: 0.9;
    transform: scale(0.9);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}
@keyframes step-tick {
  0%,
  70%,
  100% {
    transform: none;
  }
  78% {
    transform: scale(1.6) rotate(-10deg);
  }
  88% {
    transform: scale(0.9);
  }
}