/**
 * DJ Refresh — motion & polish.
 *
 * Scroll-reveal states (driven by js/djr-reveal.js), a hero entrance, and hover micro-
 * interactions. Everything visual here is gated on `prefers-reduced-motion: no-preference`
 * AND on `.djr-anim-ready` (added by the reveal script) — so with motion off, or JS off, the
 * page is fully visible and static.
 *
 * Loaded last, so its transitions win over the section files.
 */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Scroll reveal ---------- */

  .djr-anim-ready .djr-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Fade-only variant (e.g. the UIkit slider, whose transform UIkit owns). */
  .djr-anim-ready .djr-reveal--fade {
    transform: none;
  }

  .djr-anim-ready .djr-reveal.is-revealed {
    opacity: 1;
    transform: none;
  }

  /* ---------- Hero entrance ---------- */

  .djr-anim-ready .djr-hero__card {
    animation: djr-fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  /* A slow, subtle drift on the hero photo so it isn't dead-still behind the card. */
  .djr-anim-ready .djr-hero__image {
    animation: djr-hero-drift 18s ease-in-out 0.7s infinite alternate;
  }
}

@keyframes djr-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Barely-there Ken Burns — a slow scale so the hero has life without being distracting. */
@keyframes djr-hero-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

/* ---------- Hover polish ---------- */

/* Buttons lift slightly and gain a soft shadow — reads as tactile/premium. */
.djr-btn {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}

.djr-btn:hover,
.djr-btn:focus-visible {
  transform: translateY(-1px);
}

.djr-btn--primary:hover,
.djr-btn--primary:focus-visible {
  box-shadow: 0 8px 22px rgba(169, 29, 34, 0.28);
}

.djr-btn--outline:hover,
.djr-btn--outline:focus-visible {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

/* Category tiles: lift the whole tile a touch (the image already scales inside). */
.djr-categories__tile {
  transition: transform 0.2s ease;
}

.djr-categories__tile:hover {
  transform: translateY(-4px);
}

/* Product / reel cards: a subtle lift on top of the existing image zoom. */
.djr-arrivals__card,
.djr-reels__card,
.djr-updates__slide {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.djr-arrivals__card:hover,
.djr-reels__card:hover,
.djr-updates__slide:hover {
  transform: translateY(-4px);
}

/* Round icon buttons (carousel arrows, socials) get a gentle press feel. */
.djr-iconbtn {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease;
}

.djr-iconbtn:hover,
.djr-iconbtn:focus-visible {
  transform: translateY(-2px);
}

/* Footer socials already lift; nudge the reels play button on card hover for feedback. */
.djr-reels__card:hover .djr-reels__play {
  transform: translate(-50%, -50%) scale(1.12);
}

/* Reduced-motion: hard stop on the ambient loops, in case anything slipped through. */
@media (prefers-reduced-motion: reduce) {
  .djr-hero__image,
  .djr-marquee__track {
    animation: none !important;
  }
}