/* Finite, restrained accents inspired by Magic UI's reveal / shimmer patterns. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-press: 160ms;
  --motion-ui: 240ms;
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 65;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(
    90deg,
    var(--cyan),
    var(--yellow) 60%,
    var(--red)
  );
}

.button {
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--motion-press) var(--ease-out),
    background 160ms ease;
}
.button:not(.cta-button) {
  position: relative;
}
.button::after {
  content: "";
  position: absolute;
  inset: -70% auto -70% 0;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffffff55, transparent);
  transform: translateX(-220%) skewX(-18deg);
  opacity: 0;
}
.hero-buttons > .button:first-child::after {
  animation: button-sheen 1200ms var(--ease-out) 600ms backwards;
}
@keyframes button-sheen {
  0% {
    opacity: 0;
    transform: translateX(-220%) skewX(-18deg);
  }
  15% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateX(400%) skewX(-18deg);
  }
}
.button:active {
  transform: scale(0.97);
}
.button .icon {
  transition: transform var(--motion-press) var(--ease-out);
}
.category-card > img,
.collection-card,
.collection-card > img,
.community-grid img {
  transition: transform var(--motion-ui) var(--ease-out);
}
.collection-card::after,
.community-grid button::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, #fff3, transparent);
  transform: translateX(-220%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--motion-ui) var(--ease-out),
    opacity 160ms ease;
}
.community-grid button {
  position: relative;
}
.cart-count {
  transition: transform var(--motion-press) var(--ease-out);
}
.cart-count.motion-count-changed {
  transform: scale(1.18);
}
.toast {
  transition:
    opacity var(--motion-ui) ease,
    transform var(--motion-ui) var(--ease-out);
}

/* Border Beam: a rotating light masked to the existing rounded border. */
.motion-beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  overflow: hidden;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
}
.motion-beam-light {
  position: absolute;
  width: 145%;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 275deg,
    var(--cyan) 310deg,
    var(--yellow) 335deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
}
.motion-beam-enter .motion-beam-light {
  animation: border-light 3000ms linear 1;
}
@keyframes border-light {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  8% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Native dialogs keep native focus management, Escape, and the top layer. */
dialog {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition:
    opacity var(--motion-ui) var(--ease-out),
    transform var(--motion-ui) var(--ease-out),
    display var(--motion-ui) allow-discrete,
    overlay var(--motion-ui) allow-discrete;
}
dialog[open] {
  opacity: 1;
  transform: none;
}
dialog.cart-dialog {
  transform: translateX(24px);
  transition-timing-function: var(--ease-drawer);
}
dialog.cart-dialog[open] {
  transform: none;
}
dialog::backdrop {
  opacity: 0;
  transition:
    opacity var(--motion-ui) ease,
    display var(--motion-ui) allow-discrete,
    overlay var(--motion-ui) allow-discrete;
}
dialog[open]::backdrop {
  opacity: 1;
}
@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  dialog.cart-dialog[open] {
    transform: translateX(24px);
  }
  dialog[open]::backdrop {
    opacity: 0;
  }
}
/* Keyboard operations are immediate, including dismissal with Escape. */
:root[data-motion-input="keyboard"] dialog,
:root[data-motion-input="keyboard"] dialog::backdrop {
  transition: none;
}
:root[data-motion-input="keyboard"] .button:active {
  transform: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover {
    transform: translateY(-2px);
  }
  .button:hover .icon {
    transform: translateX(2px);
  }
  .button:not(.button-outline):hover::after {
    opacity: 0.7;
    transform: translateX(400%) skewX(-18deg);
    transition:
      transform var(--motion-ui) var(--ease-out),
      opacity 160ms ease;
  }
  .button:active {
    transform: scale(0.97);
  }
  .category-card:hover > img {
    transform: translateY(-4px) rotate(-1deg);
  }
  .collection-card:hover {
    transform: translateY(-4px);
  }
  .collection-card:hover > img {
    transform: scale(1.045);
  }
  .community-grid button:hover img {
    transform: scale(1.045);
  }
  .collection-card:hover::after,
  .community-grid button:hover::after {
    opacity: 1;
    transform: translateX(350%) skewX(-18deg);
  }
}
@media (hover: none), (pointer: coarse) {
  .button:hover,
  .category-card:hover > img,
  .collection-card:hover,
  .community-grid button:hover img {
    transform: none;
  }
  .button:active {
    transform: scale(0.97);
  }
}
.motion-page-hidden .motion-beam-light,
.motion-page-hidden .hero-buttons > .button:first-child::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }
  .motion-beam {
    display: none;
  }
  .button::after,
  .collection-card::after,
  .community-grid button::after {
    display: none;
  }
  .button,
  .button:hover,
  .button:active,
  .button .icon,
  .cart-count,
  .category-card:hover > img,
  .collection-card:hover,
  .collection-card:hover > img,
  .community-grid button:hover img,
  dialog,
  dialog[open],
  dialog.cart-dialog,
  dialog.cart-dialog[open] {
    transform: none !important;
  }
  dialog,
  dialog::backdrop {
    transition:
      opacity 120ms ease,
      display 120ms allow-discrete,
      overlay 120ms allow-discrete !important;
  }
  :root[data-motion-input="keyboard"] dialog,
  :root[data-motion-input="keyboard"] dialog::backdrop {
    transition: none !important;
  }
  .button {
    transition: background 120ms ease !important;
  }
  .toast {
    transform: translate(-50%, 0);
    transition: opacity 120ms ease !important;
  }
  @starting-style {
    dialog[open],
    dialog.cart-dialog[open] {
      transform: none;
    }
  }
}
@media print {
  .scroll-progress,
  .motion-beam {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav,
  .main-nav.is-open {
    transition: none !important;
  }
  .nav-backdrop,
  body.nav-open .nav-backdrop {
    transition: opacity 120ms ease !important;
  }
}