/* ============================================================
   LATEST HITS — centered swipe carousel (latest_products_swipe_cards)
   Depends on the variables/classes in main.css (.product-card, .btn, ...)
   Glass hover cards inspired by "glass cards" by codebykay101 (Uiverse.io)
   ============================================================ */

/* animatable custom properties (fan + spread of the cards on hover).
   Browsers without @property simply switch instantly - nothing breaks. */
@property --ls-fan {
  syntax: '<angle>';
  inherits: true;
  initial-value: 3deg;
}

@property --ls-spread {
  syntax: '<length>';
  inherits: true;
  initial-value: -10px;
}

.ls-section {
  --ls-w: clamp(230px, 66vw, 340px);   /* one card + a peek of its neighbours */
  --ls-gap: 14px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5rem 0 4.5rem;
}

/* ---------- background media (video / photo / logo fallback) ---------- */
.ls-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, #0a1a0a 50%, var(--bg) 100%);
}

.ls-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.ls-bg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(720px, 92vw);
  height: auto;
  opacity: 0.11;
  transform: translate(-50%, -50%);
}

.ls-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(118, 255, 3, 0.08), transparent 55%),
    linear-gradient(to bottom,
      var(--bg) 0%,
      rgba(4, 8, 4, 0.30) 22%,
      rgba(4, 8, 4, 0.50) 72%,
      var(--bg) 100%);
}

/* ---------- header ---------- */
.ls-header {
  text-align: center;
  padding: 0 1.25rem;
  margin-bottom: 1.5rem;
}

.ls-header .section-eyebrow {
  justify-content: center;
}

.ls-header .section-divider {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- track ---------- */
.ls-stage {
  position: relative;
}

.ls-track {
  position: relative;               /* slides measure offsetLeft against this */
  display: flex;
  align-items: center;
  gap: var(--ls-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2.5rem 0;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;        /* both directions: horizontal swipes the carousel, vertical scrolls the page like anywhere else */
  scrollbar-width: none;
  outline: none;
}

.ls-track::-webkit-scrollbar {
  display: none;
}

/* spacers let the first/last card sit exactly in the middle */
.ls-track::before,
.ls-track::after {
  content: '';
  flex: 0 0 calc(50% - var(--ls-w) / 2 - var(--ls-gap));
}

.ls-slide {
  position: relative;
  flex: 0 0 var(--ls-w);
  scroll-snap-align: center;
  /* no scroll-snap-stop: always — that forces a hard stop at the very next
     card even on a fast flick, which is what made the swipe feel stuck/rough.
     Without it, momentum carries naturally and settles on the nearest card. */
  /* --ls-d (0 = centered … 2 = far away) and --ls-s (-1 left / 1 right) are set by latest-swipe.js.
     --ls-fan / --ls-spread give the side cards a loose "fanned" look that opens up on hover. */
  transform:
    perspective(1000px)
    rotateY(calc(var(--ls-s, 1) * var(--ls-d, 0) * -9deg))
    rotateZ(calc(var(--ls-s, 1) * var(--ls-d, 0) * var(--ls-fan, 3deg)))
    translateX(calc(var(--ls-s, 1) * var(--ls-d, 0) * var(--ls-spread, -10px)))
    scale(calc(1 - 0.08 * var(--ls-d, 0)));
  will-change: transform;
  transition:
    --ls-fan 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    --ls-spread 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ls-slide .product-card {
  width: 100%;
  /* the fade lives on the card (not the slide) so backdrop-filter can still see the background */
  opacity: calc(1 - 0.3 * var(--ls-d, 0));
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease,
    -webkit-backdrop-filter 0.5s ease,
    backdrop-filter 0.5s ease;
}

/* the "hover" actions are always visible here, like the mobile grid */
.ls-slide .product-card-actions {
  opacity: 1;
  transform: none;
}

.ls-slide.is-active .product-card {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 32px rgba(118, 255, 3, 0.25);
}

/* image parallax: the photo slides a little against the card while you swipe */
.ls-slide .product-card-img > img,
.ls-slide .product-card-img-2 img {
  width: 112%;
  max-width: none;
  margin-left: -6%;
  translate: calc(var(--ls-s, 1) * var(--ls-d, 0) * -2.5%) 0;
}

/* ---------- glass layers (only visible on hover / on the centered card on touch) ---------- */

/* frosted sheen + cursor glare */
.ls-slide .product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.24), transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.13), transparent);
  transition: opacity 0.4s ease;
}

/* diagonal light sweep across the photo */
.ls-slide .product-card-img::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 40%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
}

/* frosted label strip that slides up from the bottom of the photo */
.ls-slide .product-card-img::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ls-slide .product-card-img:not([data-text])::after,
.ls-slide .product-card-img[data-text='']::after {
  display: none;
}

@keyframes ls-shine {
  0%   { opacity: 0; left: -60%; }
  20%  { opacity: 1; }
  100% { opacity: 0; left: 130%; }
}

/* ---- mouse: the glass card ---- */
@media (hover: hover) and (pointer: fine) {
  /* the whole row opens up (fan -> straight, cards drift apart) */
  .ls-stage:hover .ls-slide {
    --ls-fan: 0deg;
    --ls-spread: 14px;
  }

  .ls-slide .product-card:hover {
    opacity: 1;
    transform:
      perspective(900px)
      rotateX(var(--ls-rx, 0deg))
      rotateY(var(--ls-ry, 0deg))
      translateY(-8px)
      scale(1.03);
    background-color: rgba(11, 24, 11, 0.45);
    border-color: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    /* !important: main.js writes its own inline box-shadow on hover */
    box-shadow:
      0 25px 25px rgba(0, 0, 0, 0.25),
      0 0 44px rgba(118, 255, 3, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    /* follow the cursor closely while hovering */
    transition:
      transform 0.15s ease-out,
      border-color 0.4s ease,
      box-shadow 0.4s ease,
      background-color 0.4s ease,
      -webkit-backdrop-filter 0.5s ease,
      backdrop-filter 0.5s ease;
  }

  .ls-slide .product-card:hover::after {
    opacity: 1;
  }

  .ls-slide .product-card:hover .product-card-img::before {
    animation: ls-shine 0.9s ease;
  }

  .ls-slide .product-card:hover .product-card-img::after {
    transform: translateY(0);
  }
}

/* ---- touch: no hover, so the centered card wears the glass instead ---- */
@media (hover: none) {
  .ls-slide.is-active .product-card {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow:
      0 18px 24px rgba(0, 0, 0, 0.3),
      0 0 34px rgba(118, 255, 3, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.26);
  }

  .ls-slide.is-active .product-card::after {
    opacity: 1;
  }

  .ls-slide.is-active .product-card-img::after {
    transform: translateY(0);
  }
}

/* ---------- dots ---------- */
.ls-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.25rem;
}

.ls-dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--muted);
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
}

.ls-dot::after {                    /* bigger tap target */
  content: '';
  position: absolute;
  inset: -12px -5px;
}

.ls-dot.is-active {
  width: 28px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(118, 255, 3, 0.5);
}

/* ---------- call to action (centered) ---------- */
.ls-cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  padding: 0 1.25rem;
}

/* ---------- desktop arrows ---------- */
.ls-arrow {
  display: none;
}

@media (min-width: 900px) {
  .ls-section {
    --ls-gap: 24px;
    padding: 6rem 0 5rem;
  }

  .ls-header {
    margin-bottom: 2rem;
  }
}

@media (min-width: 900px) and (hover: hover) {
  .ls-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    background: rgba(4, 8, 4, 0.75);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 1.1rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: var(--transition);
  }

  .ls-arrow--prev { left: 2rem; }
  .ls-arrow--next { right: 2rem; }

  .ls-arrow:hover:not(:disabled) {
    background: var(--accent);
    color: var(--bg);
    box-shadow: var(--glow);
  }

  .ls-arrow:disabled {
    opacity: 0.25;
    cursor: default;
  }
}

/* ============================================================
   POP ANIMATIONS
   1) ENTRY  - the cards bounce in one after another every time the section
               scrolls into view (latest-swipe.js toggles .is-in / .ls-ready).
               Without JS nothing is hidden, so the section still shows.
   2) SWIPE  - every time a card lands in the middle it punches up, sends out a
               ring, and then floats gently (.ls-punch is added by the JS).
   ============================================================ */
.ls-section.ls-ready:not(.is-in) .ls-slide .product-card,
.ls-section.ls-ready:not(.is-in) .ls-rise {
  opacity: 0;
}

@keyframes ls-pop {
  0%   { opacity: 0; transform: translateY(90px) scale(0.5) rotate(-5deg); }
  55%  { opacity: 1; transform: translateY(-14px) scale(1.07) rotate(1.2deg); }
  75%  { transform: translateY(4px) scale(0.98) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes ls-rise {
  0%   { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: none; }
}

/* card lands in the middle: overshoot, settle */
@keyframes ls-punch {
  0%   { scale: 0.93; }
  45%  { scale: 1.09; }
  70%  { scale: 0.985; }
  100% { scale: 1; }
}

/* ring that expands from the card and fades */
@keyframes ls-ring {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.22); }
}

/* idle levitation of the centered card ("translate" so it never fights the other transforms) */
@keyframes ls-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

.ls-section.is-in .ls-slide .product-card {
  /* "backwards" = only applies the 0% frame during the delay, so hover styles keep working afterwards */
  animation: ls-pop 0.95s cubic-bezier(0.22, 1.2, 0.36, 1) backwards;
  /* !important: main.js writes an inline animation-delay on every .product-card
     (its grid stagger). Without this, the carousel would inherit a delay based on
     how many cards sit above it on the page instead of its own left-to-right pop. */
  animation-delay: calc(0.15s + min(var(--ls-i, 0), 4) * 0.09s) !important;
}

.ls-section.is-in .ls-rise {
  animation: ls-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--ls-k, 0) * 0.09s);
}

.ls-slide::after {                   /* the ring */
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  box-shadow: 0 0 24px rgba(118, 255, 3, 0.45);
  opacity: 0;
  pointer-events: none;
}

.ls-section.is-in .ls-slide.is-active {
  animation: ls-float 4.5s ease-in-out 1.3s infinite;
}

.ls-section.is-in .ls-slide.ls-punch {
  animation:
    ls-punch 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    ls-float 4.5s ease-in-out 1.3s infinite;
}

.ls-slide.ls-punch::after {
  animation: ls-ring 0.8s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ls-section.ls-ready:not(.is-in) .ls-slide .product-card,
  .ls-section.ls-ready:not(.is-in) .ls-rise {
    opacity: 1;
  }

  .ls-section.is-in .ls-slide .product-card,
  .ls-section.is-in .ls-rise,
  .ls-section.is-in .ls-slide.is-active,
  .ls-section.is-in .ls-slide.ls-punch,
  .ls-slide.ls-punch::after,
  .ls-slide .product-card:hover .product-card-img::before {
    animation: none;
  }

  .ls-bg-media,
  .ls-bg-logo,
  .ls-slide,
  .ls-slide .product-card {
    transition: none;
  }

  .ls-bg-media,
  .ls-bg-logo,
  .ls-slide .product-card-img > img,
  .ls-slide .product-card-img-2 img {
    translate: none;
  }

  .ls-slide {
    transform: scale(calc(1 - 0.06 * var(--ls-d, 0)));
  }

  .ls-slide .product-card:hover {
    transform: none;
  }
}