/* Short, local interactions inspired by the hover and shimmer demos on 21st.dev. */
.design-site :is(.button, .carousel-arrow, .comparison-controls > button, .menu-toggle, .mobile-actions > a) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.interaction-ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--interaction-ripple-color, currentColor);
  pointer-events: none;
  opacity: 0;
}

.design-site :is(.button-yellow, .carousel-arrow, .comparison-controls > button[aria-pressed='true'], .mobile-actions > a:first-child) {
  --interaction-ripple-color: #fff000;
}

.design-site :is(.button-yellow, .carousel-arrow, .comparison-controls > button[aria-pressed='true'], .mobile-actions > a:first-child):not(:disabled):not([aria-disabled='true']):is(:hover, :focus-visible) {
  background-color: #ffdd00;
  border-color: #ffdd00;
}

.design-site :is(.button-yellow, .carousel-arrow, .comparison-controls > button[aria-pressed='true'], .mobile-actions > a:first-child):not(:disabled):not([aria-disabled='true']):active {
  background-color: #ffe600;
  border-color: #ffe600;
}

.design-site .courier-banner .courier-icon {
  position: relative;
  width: 72px;
  height: 52px;
  border-radius: 0;
}

.courier-vehicle { display: block; line-height: 0; }
.courier-wheel circle { fill: #1b2528; }
.courier-wheel path { stroke-width: 1; }

@media (prefers-reduced-motion: no-preference) {
  .design-site .courier-banner .courier-icon::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 12px;
    height: 1px;
    background: repeating-linear-gradient(90deg, #ffdc4840 0 8px, transparent 8px 13px);
  }

  .courier-vehicle { animation: courier-trip 8s ease-in-out infinite; }
  .courier-truck { animation: courier-turn 8s step-end infinite; }
  .courier-chassis { animation: courier-ride 800ms ease-in-out infinite; }
  .courier-wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: courier-wheel-spin 1200ms linear infinite;
  }

  .design-site :is(.button, .carousel-arrow, .comparison-controls > button, .menu-toggle, .mobile-actions > a) {
    transition: transform 180ms ease, box-shadow 220ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }

  .design-site .button-yellow::before {
    content: '';
    position: absolute;
    inset: -80% auto -80% 0;
    width: 35%;
    background: linear-gradient(90deg, transparent, #fff00066, transparent);
    transform: translateX(-170%) skewX(-18deg);
    pointer-events: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .design-site :is(.button, .carousel-arrow, .comparison-controls > button):not(:disabled):not([aria-disabled='true']):hover {
      transform: translateY(-2px);
      box-shadow: 0 7px 18px #00000026;
    }

    .design-site .button-yellow:not(:disabled):not([aria-disabled='true']):hover::before {
      animation: button-sheen 600ms ease-out;
    }

    .design-site .desktop-nav a:hover::after {
      transform: scaleX(1);
    }
  }

  .design-site :is(.button, .carousel-arrow, .comparison-controls > button, .menu-toggle, .mobile-actions > a):not(:disabled):not([aria-disabled='true']):active {
    transform: translateY(1px) scale(.97);
    box-shadow: inset 0 2px 4px #00000020;
    transition-duration: 80ms;
  }

  .design-site .button-yellow:focus-visible::before {
    animation: button-sheen 600ms ease-out;
  }

  .interaction-ripple {
    animation: button-ripple 500ms ease-out;
  }

  .design-site .desktop-nav a {
    position: relative;
  }

  .design-site .desktop-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease;
  }

  .design-site .desktop-nav a:focus-visible::after {
    transform: scaleX(1);
  }

  .design-site .menu-toggle > span:not(.interaction-ripple) {
    transition: transform 200ms ease;
  }

  .design-site .menu-toggle[aria-expanded='true'] > span:nth-child(1) {
    transform: translateY(4.25px) rotate(45deg);
  }

  .design-site .menu-toggle[aria-expanded='true'] > span:nth-child(2) {
    transform: translateY(-4.25px) rotate(-45deg);
  }

  .design-site .mobile-nav:not([hidden]) {
    animation: menu-enter 220ms ease-out;
    transform-origin: top;
  }

  .design-site .mobile-nav:not([hidden]) > a {
    animation: menu-item-enter 260ms ease-out both;
  }

  .design-site .mobile-nav > a:nth-child(2) { animation-delay: 30ms; }
  .design-site .mobile-nav > a:nth-child(3) { animation-delay: 60ms; }
  .design-site .mobile-nav > a:nth-child(4) { animation-delay: 90ms; }
  .design-site .mobile-nav > a:nth-child(5) { animation-delay: 120ms; }
}

@keyframes courier-trip {
  0%, 100% { transform: translateX(-12px); }
  50% { transform: translateX(12px); }
}

@keyframes courier-turn {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
}

@keyframes courier-ride {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.5px); }
}

@keyframes courier-wheel-spin {
  to { transform: rotate(1turn); }
}

@keyframes button-sheen {
  to { transform: translateX(420%) skewX(-18deg); }
}

@keyframes button-ripple {
  from { transform: translate(-50%, -50%) scale(0); opacity: .18; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

@keyframes menu-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes menu-item-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .design-site :is(.button, .carousel-arrow, .comparison-controls > button, .menu-toggle, .mobile-actions > a) {
    transform: none !important;
    transition: none !important;
  }
  .interaction-ripple { display: none; }
}