/* ==========================================================================
   ScanTrack — scan- en trackanimaties
   Geladen na scantrack.css. Beweging gebruikt transform/opacity, scènes
   starten pas in beeld (main.js zet .is-visible) en vallen weg bij
   prefers-reduced-motion.
   ========================================================================== */

:root {
  --st-ease: cubic-bezier(.22, 1, .36, 1);
  --st-laser: #37B7FF;
}

/* --------------------------------------------------------------------
   Leesvoortgang als barcode onder het menu
   -------------------------------------------------------------------- */
.header .header-container {
  position: relative;
}

.st-scan-progress {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 4px;
  pointer-events: none;
  /* Barcode bars of varying width, revealed from left to right. */
  background: repeating-linear-gradient(90deg,
      var(--st-blue-600) 0 2px, transparent 2px 4px,
      var(--st-blue-600) 4px 5px, transparent 5px 8px,
      var(--st-blue-600) 8px 11px, transparent 11px 13px);
  clip-path: inset(0 calc((1 - var(--scroll, 0)) * 100%) 0 0);
}

/* The read head: a short laser glow at the edge of the scanned part. */
.st-scan-progress::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: calc(var(--scroll, 0) * 100%);
  width: 2px;
  margin-left: -1px;
  background: #ff3b5c;
  box-shadow: 0 0 8px 2px rgba(255, 59, 92, .6);
  opacity: calc(var(--scroll, 0) * 100);
}

/* --------------------------------------------------------------------
   Hero: het dashboard registreert de zending stap voor stap
   -------------------------------------------------------------------- */
.st-dashboard {
  position: relative;
}

/* A laser line sweeps over the dashboard as if the shipment is being scanned. */
.st-dashboard-main {
  position: relative;
  overflow: hidden;
}

.st-dashboard-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 59, 92, .9), transparent);
  box-shadow: 0 0 14px 3px rgba(255, 59, 92, .35);
  opacity: 0;
  animation: st-sweep 7s ease-in-out 1.2s infinite;
  pointer-events: none;
}

@keyframes st-sweep {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  4% {
    opacity: 1;
  }
  24% {
    opacity: 1;
    transform: translateY(420px);
  }
  28%, 100% {
    opacity: 0;
    transform: translateY(420px);
  }
}

/* Timeline events are registered one after another. */
.st-timeline-event {
  animation: st-row-in .6s var(--st-ease) both;
}

.st-timeline-event:nth-child(1) { animation-delay: .5s; }
.st-timeline-event:nth-child(2) { animation-delay: .8s; }
.st-timeline-event:nth-child(3) { animation-delay: 1.1s; }
.st-timeline-event:nth-child(4) { animation-delay: 1.4s; }
.st-timeline-event:nth-child(5) { animation-delay: 1.7s; }

.st-timeline-event.done span {
  animation: st-dot-pop .5s var(--st-ease) both;
}

.st-timeline-event:nth-child(1) span { animation-delay: .7s; }
.st-timeline-event:nth-child(2) span { animation-delay: 1s; }

/* The active step keeps pulsing: this is where the parcel is now. */
.st-timeline-event.active span {
  position: relative;
  animation: st-dot-pop .5s var(--st-ease) 1.3s both;
}

.st-timeline-event.active span::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--st-blue-600);
  animation: st-ping 1.8s ease-out 1.8s infinite;
}

@keyframes st-row-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}

@keyframes st-dot-pop {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.4);
  }
  100% {
    transform: none;
  }
}

@keyframes st-ping {
  from {
    opacity: .8;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

/* "In progress" badge with a live dot. */
.st-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ECC71;
  animation: st-live 1.6s ease-in-out infinite;
}

@keyframes st-live {
  50% {
    opacity: .25;
  }
}

/* Proof photo: a camera flash when the proof gets linked. */
.st-proof-card {
  animation: st-row-in .6s var(--st-ease) 2.1s both;
}

.st-proof-thumb,
.st-mini-photo {
  position: relative;
  overflow: hidden;
}

.st-proof-thumb::after,
.st-mini-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: st-flash 6s ease-out 2.6s infinite;
}

@keyframes st-flash {
  0% {
    opacity: 0;
  }
  2% {
    opacity: .95;
  }
  10%, 100% {
    opacity: 0;
  }
}

/* The phone (hidden in the original layout) returns on wide screens as a live scanner. */
@media (min-width: 1200px) {
  /* Compact and parked over the empty lower part of the dark sidebar, so no dashboard text is covered. */
  .st-phone {
    display: block;
    z-index: 3;
    left: 0;
    right: auto;
    bottom: 14px;
    width: 140px;
    min-height: 0;
    padding: 12px 10px 14px;
    border-width: 6px;
    border-radius: 24px;
    animation: st-phone-in 1s var(--st-ease) .9s both, st-float 6s ease-in-out 2s infinite;
  }

  .st-phone .st-phone-top {
    margin-bottom: 12px;
  }

  .st-phone .st-scan-window {
    height: 130px;
    align-content: center;
    gap: 6px;
  }

  .st-phone .st-scan-window i {
    font-size: 2.4rem;
    line-height: 1;
  }

  .st-phone .st-scan-window span:not(.st-laser) {
    font-size: .72rem;
    line-height: 1.2;
    text-align: center;
  }

  .st-phone button {
    margin-top: 12px;
    padding: 8px 6px;
    font-size: .74rem;
  }
}

@keyframes st-phone-in {
  from {
    opacity: 0;
    transform: translateY(40px) rotate(4deg);
  }
}

@keyframes st-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.st-scan-window {
  position: relative;
  overflow: hidden;
}

/* Viewfinder corners. */
.st-scan-window::before {
  content: "";
  position: absolute;
  inset: 10px;
  --c: var(--st-laser);
  background:
    linear-gradient(var(--c), var(--c)) top left / 18px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 3px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 18px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 3px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 18px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 3px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 18px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 3px 18px no-repeat;
  animation: st-focus 3s ease-in-out infinite;
}

@keyframes st-focus {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(.92);
  }
}

.st-laser {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 20px;
  height: 2px;
  border-radius: 2px;
  background: #ff3b5c;
  box-shadow: 0 0 10px 2px rgba(255, 59, 92, .7);
  animation: st-laser 2.4s ease-in-out infinite alternate;
}

@keyframes st-laser {
  to {
    transform: translateY(88px);
  }
}

/* Each completed sweep "registers" the event: the button pulses like a beep. */
.st-phone button {
  animation: st-beep 2.4s ease-out 2.4s infinite;
}

@keyframes st-beep {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 110, 245, .7);
  }
  40%, 100% {
    box-shadow: 0 0 0 12px rgba(26, 110, 245, 0);
  }
}

/* --------------------------------------------------------------------
   Kaarten: scanhoeken lichten op rond het icoon bij hover
   -------------------------------------------------------------------- */
.st-card,
.st-use-card,
.st-feature-item,
.st-pricing-card {
  transition: transform .45s var(--st-ease), box-shadow .45s, border-color .45s, opacity .7s var(--st-ease);
}

.st-card:hover,
.st-use-card:hover,
.st-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -24px rgba(7, 20, 47, .35);
  border-color: rgba(26, 110, 245, .3);
}

.st-feature-item:hover {
  transform: translateY(-4px);
  border-color: rgba(55, 183, 255, .45);
}

.st-card > i,
.st-use-card > i {
  position: relative;
  overflow: visible;
}

/* Viewfinder brackets snap around the icon. */
.st-card > i::after,
.st-use-card > i::after {
  content: "";
  position: absolute;
  inset: -7px;
  --c: var(--st-blue-600);
  background:
    linear-gradient(var(--c), var(--c)) top left / 10px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 10px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 10px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 10px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 10px no-repeat;
  opacity: 0;
  transform: scale(1.35);
  transition: opacity .3s, transform .4s var(--st-ease);
}

.st-card:hover > i::after,
.st-use-card:hover > i::after {
  opacity: 1;
  transform: none;
}

/* A short laser pass over the icon. */
.st-card > i::before,
.st-use-card > i::before {
  position: relative;
  z-index: 1;
}

.st-card:hover > i,
.st-use-card:hover > i {
  animation: st-icon-scan .7s ease-out;
}

@keyframes st-icon-scan {
  0% {
    box-shadow: inset 0 2px 0 rgba(255, 59, 92, .9);
  }
  100% {
    box-shadow: inset 0 46px 0 rgba(255, 59, 92, 0);
  }
}

.st-use-card a i {
  display: inline-block;
  transition: transform .3s var(--st-ease);
}

.st-use-card:hover a i {
  transform: translateX(4px);
}

.st-pricing-card.featured {
  position: relative;
}

.st-pricing-card.featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid transparent;
  background: linear-gradient(90deg, var(--st-blue-600), var(--st-laser), var(--st-blue-600)) border-box;
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  animation: st-border-flow 4s linear infinite;
  pointer-events: none;
}

@keyframes st-border-flow {
  to {
    background-position: -200% 0;
  }
}

/* --------------------------------------------------------------------
   Sectiekoppen: een knipperend "live" bolletje bij het label
   -------------------------------------------------------------------- */
.st-section-heading > span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: st-live 1.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------
   Werkwijze: een pakje op de transportband langs elke stap
   -------------------------------------------------------------------- */
.st-conveyor {
  position: relative;
  height: 34px;
  margin: -10px 0 18px;
}

/* The belt: moving rollers along a rail. */
.st-conveyor::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 6px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(55, 183, 255, .45) 0 10px, rgba(255, 255, 255, .08) 10px 20px);
  background-size: 20px 100%;
  animation: st-belt .6s linear infinite;
}

.st-conveyor-parcel {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #0D1B3E;
  background: #d9a45c;
  border-radius: 4px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
  font-size: .95rem;
  opacity: 0;
}

.st-conveyor.is-visible .st-conveyor-parcel {
  animation: st-parcel 9s linear infinite;
}

@keyframes st-belt {
  to {
    background-position: 20px 0;
  }
}

/* The parcel pauses at each of the four stations to be scanned. */
@keyframes st-parcel {
  0% {
    opacity: 0;
    left: 0;
  }
  3% {
    opacity: 1;
  }
  10%, 18% {
    left: calc(12.5% - 14px);
  }
  33%, 41% {
    left: calc(37.5% - 14px);
  }
  56%, 64% {
    left: calc(62.5% - 14px);
  }
  79%, 87% {
    left: calc(87.5% - 14px);
    opacity: 1;
  }
  97%, 100% {
    left: calc(100% - 28px);
    opacity: 0;
  }
}

/* Each step card flashes as the parcel is scanned at its station. */
.st-step {
  position: relative;
  overflow: hidden;
}

.st-step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff3b5c, transparent);
  opacity: 0;
}

.st-conveyor.is-visible + .st-step-row .st-step::after {
  animation: st-station 9s ease-out infinite;
}

.st-conveyor.is-visible + .st-step-row > :nth-child(2) .st-step::after { animation-delay: 2.1s; }
.st-conveyor.is-visible + .st-step-row > :nth-child(3) .st-step::after { animation-delay: 4.2s; }
.st-conveyor.is-visible + .st-step-row > :nth-child(4) .st-step::after { animation-delay: 6.3s; }

.st-conveyor.is-visible + .st-step-row .st-step-number {
  animation: st-station-number 9s ease-out infinite;
}

.st-conveyor.is-visible + .st-step-row > :nth-child(2) .st-step-number { animation-delay: 2.1s; }
.st-conveyor.is-visible + .st-step-row > :nth-child(3) .st-step-number { animation-delay: 4.2s; }
.st-conveyor.is-visible + .st-step-row > :nth-child(4) .st-step-number { animation-delay: 6.3s; }

@keyframes st-station {
  0%, 10% {
    opacity: 0;
    transform: translateY(0);
  }
  12% {
    opacity: 1;
  }
  20% {
    opacity: 0;
    transform: translateY(120px);
  }
  100% {
    opacity: 0;
  }
}

@keyframes st-station-number {
  0%, 10%, 22%, 100% {
    box-shadow: 0 0 0 0 rgba(55, 183, 255, 0);
    transform: none;
  }
  13% {
    box-shadow: 0 0 0 8px rgba(55, 183, 255, .25);
    transform: scale(1.08);
  }
}

/* The belt only makes sense when the four steps sit side by side. */
@media (max-width: 991px) {
  .st-conveyor {
    display: none;
  }
}

/* --------------------------------------------------------------------
   Productpreview: de tijdlijn vult zich met registraties
   -------------------------------------------------------------------- */
.st-reveal .st-preview-panel .st-preview-timeline div {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .6s var(--st-ease), transform .6s var(--st-ease);
}

.st-reveal .st-preview-panel.is-visible .st-preview-timeline div {
  opacity: 1;
  transform: none;
}

.st-preview-panel.is-visible .st-preview-timeline div:nth-child(2) { transition-delay: .3s; }
.st-preview-panel.is-visible .st-preview-timeline div:nth-child(3) { transition-delay: .6s; }
.st-preview-panel.is-visible .st-preview-timeline div:nth-child(4) { transition-delay: .9s; }

.st-preview-header strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-preview-header strong::before {
  content: "\F26E";
  font-family: bootstrap-icons;
  font-size: .9rem;
  line-height: 1;
}

.st-preview-panel.is-visible .st-preview-header strong {
  animation: st-dot-pop .5s var(--st-ease) 1.3s both;
}

/* --------------------------------------------------------------------
   Vertrouwen: de vinkjes worden één na één afgevinkt
   -------------------------------------------------------------------- */
.st-trust-grid li i {
  display: inline-block;
}

.st-trust-grid.is-visible li i {
  animation: st-dot-pop .5s var(--st-ease) both;
}

.st-trust-grid.is-visible li:nth-child(2) i { animation-delay: .1s; }
.st-trust-grid.is-visible li:nth-child(3) i { animation-delay: .2s; }
.st-trust-grid.is-visible li:nth-child(4) i { animation-delay: .3s; }
.st-trust-grid.is-visible li:nth-child(5) i { animation-delay: .4s; }
.st-trust-grid.is-visible li:nth-child(6) i { animation-delay: .5s; }
.st-trust-grid.is-visible li:nth-child(7) i { animation-delay: .6s; }

/* --------------------------------------------------------------------
   Slot-CTA en paginatitels: een scanlijn trekt eroverheen
   -------------------------------------------------------------------- */
.st-final-cta,
.page-title {
  position: relative;
  overflow: hidden;
}

.st-final-cta::after,
.page-title::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255, 59, 92, .7), transparent);
  box-shadow: 0 0 18px 4px rgba(255, 59, 92, .25);
  opacity: 0;
  animation: st-sweep-x 8s ease-in-out 1s infinite;
  pointer-events: none;
}

@keyframes st-sweep-x {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  3% {
    opacity: 1;
  }
  30% {
    opacity: 1;
    transform: translateX(100vw);
  }
  31%, 100% {
    opacity: 0;
    transform: translateX(100vw);
  }
}

/* --------------------------------------------------------------------
   Onthullen bij scrollen (main.js zet .st-reveal en .is-visible)
   -------------------------------------------------------------------- */
.st-reveal .st-section-heading,
.st-reveal .st-card,
.st-reveal .st-use-card,
.st-reveal .st-step,
.st-reveal .st-pricing-card,
.st-reveal .st-final-inner,
.st-reveal .st-feature-item {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .7s var(--st-ease), transform .7s var(--st-ease), box-shadow .45s, border-color .45s;
  transition-delay: var(--reveal-delay, 0s);
}

.st-reveal .is-visible.st-section-heading,
.st-reveal .is-visible.st-card,
.st-reveal .is-visible.st-use-card,
.st-reveal .is-visible.st-step,
.st-reveal .is-visible.st-pricing-card,
.st-reveal .is-visible.st-final-inner,
.st-reveal .is-visible.st-feature-item {
  opacity: 1;
  transform: none;
}

/* Hover lift keeps working after the reveal. */
.st-reveal .is-visible.st-card:hover,
.st-reveal .is-visible.st-use-card:hover,
.st-reveal .is-visible.st-pricing-card:hover {
  transform: translateY(-6px);
  transition-delay: 0s;
}

.st-reveal .is-visible.st-feature-item:hover {
  transform: translateY(-4px);
  transition-delay: 0s;
}

/* --------------------------------------------------------------------
   Minder beweging gewenst
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .st-conveyor {
    display: none;
  }
}