/* Motion supplements the storefront; content is never hidden by this layer. */
:root {
  --vialtek-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 320ms var(--vialtek-ease);
  }

  .card .pic {
    transition: box-shadow 320ms var(--vialtek-ease);
  }

  .card .pic img {
    transition: transform 600ms var(--vialtek-ease);
  }

  :where(.btn, .add, .hero-product, .card-color, .more-colors, .variant-thumb, .filter) {
    transition: transform 240ms var(--vialtek-ease), background-color 180ms ease,
      border-color 180ms ease, color 180ms ease, box-shadow 240ms ease;
  }

  :where(.btn, .add, .hero-product, .card-color, .more-colors, .variant-thumb, .filter):not(:disabled):active {
    transform: translateY(1px);
  }

  :where(.btn, .text-link) > span[aria-hidden], .hero-product .round-arrow {
    transition: transform 260ms var(--vialtek-ease);
  }

  .links a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color 180ms ease, background-size 260ms var(--vialtek-ease);
  }

  .links a:focus-visible {
    background-size: 100% 1px;
  }

  .product-dialog[open] {
    animation: vialtek-dialog-enter 260ms var(--vialtek-ease);
  }

  .cart-dialog[open] {
    animation: vialtek-cart-enter 320ms var(--vialtek-ease);
  }

  dialog[open]::backdrop {
    animation: vialtek-backdrop-enter 220ms ease-out;
  }

  @media (hover: hover) and (pointer: fine) {
    .card:hover {
      transform: translateY(-4px);
    }

    .card:hover .pic {
      box-shadow: 0 12px 24px rgb(16 36 61 / 9%);
    }

    .card:hover .pic img {
      transform: scale(1.035);
    }

    :where(.btn, .add):not(:disabled):hover {
      transform: translateY(-2px);
    }

    :where(.btn, .text-link):hover > span[aria-hidden] {
      transform: translate(2px, -1px);
    }

    .hero-product:hover .round-arrow {
      transform: translate(2px, -2px);
    }

    .links a:hover {
      background-size: 100% 1px;
    }
  }
}

/* This feedback also remains useful when all motion is disabled. */
#cartDialog .drawerhead .eyebrow.motion-cart-added {
  color: var(--accent, #2855d9);
}

@keyframes vialtek-dialog-enter {
  from { opacity: 0.85; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vialtek-cart-enter {
  from { opacity: 0.9; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes vialtek-backdrop-enter {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card .pic, .card .pic img, .hero-product .round-arrow,
  :where(.btn, .add, .card-color, .more-colors, .variant-thumb, .filter),
  :where(.btn, .text-link) > span[aria-hidden] {
    transition: none !important;
    transform: none !important;
  }

  .product-dialog[open], .cart-dialog[open], dialog[open]::backdrop {
    animation: none !important;
  }
}