/* ==========================================================================
   DIGISOVIA — motion.css
   The creative layer: ambient animation, depth, and interaction feedback.

   Rules this file follows:
   · Only transform / opacity / filter are animated — never layout properties.
   · Every ambient loop pauses when off-screen (.is-idle) so background tabs
     and long pages do not burn battery.
   · Everything degrades to static under prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCROLL PROGRESS
   -------------------------------------------------------------------------- */

.ds-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: calc(var(--ds-z-header) + 1);
  background: transparent;
  pointer-events: none;
}
.ds-progress__bar {
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--ds-gradient-cta);
  box-shadow: 0 0 12px rgba(37,99,235,.6);
}

/* Native scroll-driven animation where supported — zero JS, runs off-thread. */
@supports (animation-timeline: scroll()) {
  .ds-progress__bar {
    animation: ds-progress-grow linear;
    animation-timeline: scroll(root block);
  }
  @keyframes ds-progress-grow { to { transform: scaleX(1); } }
}

/* --------------------------------------------------------------------------
   2. AURORA — ambient hero background
   -------------------------------------------------------------------------- */

.ds-aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  filter: blur(64px);
  opacity: .72;
}

.ds-aurora__blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform;
  animation: ds-drift 22s var(--ds-ease-in-out) infinite alternate;
}

.ds-aurora__blob:nth-child(1) {
  width: 46%; height: 58%;
  top: -6%; left: 46%;
  background: radial-gradient(circle at 40% 40%, rgba(37,99,235,.42), transparent 68%);
  animation-duration: 24s;
}
.ds-aurora__blob:nth-child(2) {
  width: 40%; height: 52%;
  top: 22%; left: 68%;
  background: radial-gradient(circle at 50% 50%, rgba(6,182,212,.44), transparent 66%);
  animation-duration: 30s;
  animation-delay: -8s;
}
.ds-aurora__blob:nth-child(3) {
  width: 34%; height: 44%;
  top: 46%; left: 52%;
  background: radial-gradient(circle at 60% 40%, rgba(124,58,237,.30), transparent 68%);
  animation-duration: 27s;
  animation-delay: -15s;
}

@keyframes ds-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  33%  { transform: translate3d(-6%, 5%, 0) scale(1.09); }
  66%  { transform: translate3d(4%, -4%, 0) scale(.95); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.05); }
}

.is-idle .ds-aurora__blob { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   3. GRAIN — breaks up flat gradients, reads as print quality
   -------------------------------------------------------------------------- */

.ds-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. HERO — parallax + entrance
   -------------------------------------------------------------------------- */

.ds-hero__bg,
.ds-hero__visual {
  will-change: transform;
  transform: translate3d(0, var(--ds-par, 0px), 0);
}

.ds-hero__content > * {
  animation: ds-hero-in .9s var(--ds-ease-out) backwards;
}
.ds-hero__content > *:nth-child(1) { animation-delay: .05s; }
.ds-hero__content > *:nth-child(2) { animation-delay: .14s; }
.ds-hero__content > *:nth-child(3) { animation-delay: .23s; }
.ds-hero__content > *:nth-child(4) { animation-delay: .32s; }
.ds-hero__content > *:nth-child(5) { animation-delay: .41s; }

@keyframes ds-hero-in {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.ds-hero__visual { animation: ds-hero-visual-in 1.2s var(--ds-ease-out) .2s backwards; }
@keyframes ds-hero-visual-in {
  from { opacity: 0; transform: translateY(38px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Animated gradient on the headline accent. */
.ds-gradient-text {
  background: linear-gradient(100deg, #2563EB 0%, #06B6D4 32%, #7C3AED 55%, #2563EB 78%, #06B6D4 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ds-gradient-pan 9s linear infinite;
}
@keyframes ds-gradient-pan {
  to { background-position: 260% 0; }
}

/* --------------------------------------------------------------------------
   5. COUNT-UP STATS
   -------------------------------------------------------------------------- */

.ds-hero__stat strong { font-variant-numeric: tabular-nums; }
.ds-hero__stat {
  transition: transform var(--ds-duration-base) var(--ds-ease-out);
}
.ds-hero__stat:hover { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   6. MARQUEE — infinite category ribbon
   -------------------------------------------------------------------------- */

.ds-marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--ds-space-5);
  border-block: 1px solid var(--ds-border);
  background: var(--ds-surface);
  /* Fade the ends so items enter and leave rather than being cut. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ds-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--ds-space-3);
  animation: ds-marquee 42s linear infinite;
  will-change: transform;
}
.ds-marquee:hover .ds-marquee__track { animation-play-state: paused; }
.is-idle .ds-marquee__track { animation-play-state: paused; }

@keyframes ds-marquee {
  /* Track holds two identical copies; -50% is a seamless loop point. */
  to { transform: translate3d(-50%, 0, 0); }
}

.ds-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-sunken);
  border: 1px solid var(--ds-border);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
  color: var(--ds-text-secondary);
  transition: color var(--ds-duration-fast) var(--ds-ease-in-out),
              border-color var(--ds-duration-fast) var(--ds-ease-in-out),
              transform var(--ds-duration-fast) var(--ds-ease-out);
}
.ds-marquee__item:hover {
  color: var(--ds-text-brand);
  border-color: var(--ds-primary-300);
  transform: translateY(-2px);
}
.ds-marquee__item svg { color: var(--ds-accent-500); }

/* --------------------------------------------------------------------------
   7. PRODUCT CARD — 3D tilt, image swap, sheen
   -------------------------------------------------------------------------- */

.ds-product {
  transform-style: preserve-3d;
  perspective: 900px;
}

.ds-product.has-tilt {
  transform: perspective(900px)
             rotateX(var(--ds-rx, 0deg))
             rotateY(var(--ds-ry, 0deg))
             translateY(-6px)
             scale(1.012);
  transition: transform var(--ds-duration-fast) var(--ds-ease-out),
              box-shadow var(--ds-duration-base) var(--ds-ease-out);
}

/* Light sweep following the cursor. */
.ds-product__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    380px circle at var(--ds-mx, 50%) var(--ds-my, 50%),
    rgba(255,255,255,.42),
    transparent 62%
  );
  transition: opacity var(--ds-duration-base) var(--ds-ease-out);
}
.ds-product:hover .ds-product__media::after { opacity: 1; }

/* Second gallery image cross-fades in on hover. */
.ds-product__media .ds-img-wrap { position: relative; }
.ds-product__alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--ds-duration-slow) var(--ds-ease-out),
              transform var(--ds-duration-slow) var(--ds-ease-out);
}
.ds-product__alt img { width: 100%; height: 100%; object-fit: cover; }
.ds-product:hover .ds-product__alt { opacity: 1; transform: scale(1); }

/* Badge entrance stagger. */
.ds-badge { animation: ds-badge-in .5s var(--ds-ease-spring) backwards; }
.ds-badge:nth-child(2) { animation-delay: .07s; }
.ds-badge:nth-child(3) { animation-delay: .14s; }
@keyframes ds-badge-in {
  from { opacity: 0; transform: translateX(-10px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. MAGNETIC BUTTONS
   -------------------------------------------------------------------------- */

.ds-btn[data-ds-magnetic] {
  will-change: transform;
  transform: translate3d(var(--ds-mgx, 0px), var(--ds-mgy, 0px), 0);
}

/* Shine sweep across gradient CTAs. */
.ds-btn--gradient { position: relative; overflow: hidden; }
.ds-btn--gradient::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--ds-ease-out);
}
.ds-btn--gradient:hover::after { left: 130%; }

/* --------------------------------------------------------------------------
   9. ADD-TO-CART FEEDBACK
   -------------------------------------------------------------------------- */

.add_to_cart_button.is-adding { pointer-events: none; opacity: .75; }

.add_to_cart_button.is-added {
  background: var(--ds-success-500) !important;
  animation: ds-pop .45s var(--ds-ease-spring);
}
@keyframes ds-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}

/* Item flying to the cart icon. */
.ds-fly {
  position: fixed;
  z-index: var(--ds-z-toast);
  width: 58px; height: 58px;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  pointer-events: none;
  box-shadow: var(--ds-shadow-xl);
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   10. SECTION HEADINGS — underline draw
   -------------------------------------------------------------------------- */

.ds-section__head-text .ds-eyebrow::before {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ds-gradient-brand);
  transition: width var(--ds-duration-slow) var(--ds-ease-out);
}
.ds-reveal.is-visible .ds-eyebrow::before,
.is-visible .ds-section__head-text .ds-eyebrow::before { width: 28px; }

/* --------------------------------------------------------------------------
   11. SPOTLIGHT — dark section follows the cursor
   -------------------------------------------------------------------------- */

.ds-section--dark { position: relative; overflow: hidden; }
.ds-section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    560px circle at var(--ds-sx, 50%) var(--ds-sy, 50%),
    rgba(37,99,235,.26),
    transparent 68%
  );
  transition: opacity var(--ds-duration-slow) var(--ds-ease-out);
}
.ds-section--dark:hover::before { opacity: 1; }

/* Trust cards lift individually inside the dark band. */
.ds-section--dark .ds-trust {
  transition: transform var(--ds-duration-base) var(--ds-ease-out),
              background-color var(--ds-duration-base) var(--ds-ease-in-out),
              border-color var(--ds-duration-base) var(--ds-ease-in-out);
}
.ds-section--dark .ds-trust:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(6,182,212,.4);
  transform: translateY(-6px);
}

/* --------------------------------------------------------------------------
   12. CATEGORY TILE — shine + icon pop
   -------------------------------------------------------------------------- */

.ds-cat-tile__media { position: relative; overflow: hidden; }
.ds-cat-tile__media::after {
  content: "";
  position: absolute;
  top: 0; left: -140%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-16deg);
  transition: left .85s var(--ds-ease-out);
  z-index: 2;
}
.ds-cat-tile:hover .ds-cat-tile__media::after { left: 150%; }

/* --------------------------------------------------------------------------
   13. CAROUSEL — draggable collection rail
   -------------------------------------------------------------------------- */

.ds-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(21rem, 78vw), 1fr);
  gap: var(--ds-space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--ds-space-4);
  /* Hide the scrollbar without losing scrollability. */
  scrollbar-width: none;
  cursor: grab;
}
.ds-rail::-webkit-scrollbar { display: none; }
.ds-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.ds-rail > * { scroll-snap-align: start; }

.ds-rail-nav { display: flex; gap: var(--ds-space-2); flex-shrink: 0; }
.ds-rail-nav button {
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-xs);
}
.ds-rail-nav button:hover { border-color: var(--ds-border-brand); }
.ds-rail-nav button:disabled { opacity: .35; pointer-events: none; }

/* The sprite ships one chevron pointing down — rotate it per direction. */
.ds-rail-nav__prev { transform: rotate(90deg); }
.ds-rail-nav__next { transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   14. STICKY HEADER — condense on scroll
   -------------------------------------------------------------------------- */

.ds-header__inner {
  transition: min-height var(--ds-duration-slow) var(--ds-ease-out);
}
.ds-header.is-stuck .ds-header__inner { min-height: 4rem; }
.ds-header .ds-logo__tag {
  transition: opacity var(--ds-duration-base) var(--ds-ease-out),
              max-height var(--ds-duration-base) var(--ds-ease-out);
  max-height: 1.5rem;
}
.ds-header.is-stuck .ds-logo__tag { opacity: 0; max-height: 0; }

/* --------------------------------------------------------------------------
   15. ACCORDION — smooth open
   -------------------------------------------------------------------------- */

.ds-accordion__item[open] .ds-accordion__a {
  animation: ds-accordion-open var(--ds-duration-slow) var(--ds-ease-out);
}
@keyframes ds-accordion-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   16. FLOATING CHIPS — already animated in main.css, add depth response
   -------------------------------------------------------------------------- */

.ds-hero__chip {
  transition: transform var(--ds-duration-base) var(--ds-ease-out),
              box-shadow var(--ds-duration-base) var(--ds-ease-out);
}
.ds-hero__chip:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: var(--ds-shadow-xl);
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   17. REDUCED MOTION — strip every ambient loop
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ds-aurora__blob,
  .ds-marquee__track,
  .ds-gradient-text,
  .ds-hero__chip,
  .ds-hero__content > *,
  .ds-hero__visual,
  .ds-badge {
    animation: none !important;
  }
  .ds-gradient-text {
    background: var(--ds-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .ds-hero__bg, .ds-hero__visual { transform: none !important; }
  .ds-product.has-tilt { transform: translateY(-4px); }
  .ds-btn[data-ds-magnetic] { transform: none !important; }
  .ds-rail { scroll-behavior: auto; }
}