/* ==========================================================================
   NASHORN – Motion
   Developed by webndo

   Initial hidden states only apply when JS is running (.js) and are lifted
   by .is-loaded / .is-revealed. .reveal-fallback (set by an inline timer in
   <head>) guarantees visibility if the animation script never initialises.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Initial load – header + hero
   -------------------------------------------------------------------------- */
.js .site-header {
  opacity: 0;
  translate: 0 -14px;
}

.js.is-loaded .site-header {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 700ms var(--ease-out) 60ms,
    translate 900ms var(--ease-expo) 60ms,
    height var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.js .hero__media img {
  opacity: 0;
}

.js.is-loaded .hero__media img {
  opacity: 1;
  transition: opacity 900ms var(--ease-out);
}

.js .hero__veil {
  opacity: 0;
}

.js.is-loaded .hero__veil {
  opacity: 1;
  transition: opacity 1000ms var(--ease-out) 120ms;
}

.js .hero [data-hero-item] {
  opacity: 0;
  translate: 0 22px;
}

.js.is-loaded .hero [data-hero-item] {
  opacity: 1;
  translate: 0 0;
  transition: opacity 800ms var(--ease-out), translate 1000ms var(--ease-expo);
}

.js .hero__line > span {
  translate: 0 108%;
}

.js.is-loaded .hero__line > span {
  translate: 0 0;
  transition: translate 1100ms var(--ease-expo);
}

@media (max-width: 767.98px) {
  .js .hero__title {
    opacity: 0;
    translate: 0 22px;
  }

  .js.is-loaded .hero__title {
    opacity: 1;
    translate: 0 0;
    transition: opacity 800ms var(--ease-out) 380ms, translate 1000ms var(--ease-expo) 380ms;
  }
}

/* stagger */
.js.is-loaded .hero .eyebrow { transition-delay: 250ms; }
.js.is-loaded .hero__line:nth-child(1) > span { transition-delay: 380ms; }
.js.is-loaded .hero__line:nth-child(2) > span { transition-delay: 500ms; }
.js.is-loaded .hero__line:nth-child(3) > span { transition-delay: 600ms; }
.js.is-loaded .hero__lead { transition-delay: 780ms; }
.js.is-loaded .hero__actions { transition-delay: 900ms; }

/* --------------------------------------------------------------------------
   Scroll reveals
   -------------------------------------------------------------------------- */
.js [data-reveal],
.js [data-reveal-group] > * {
  opacity: 0;
  translate: 0 28px;
}

.js [data-reveal].is-revealed,
.js [data-reveal-group].is-revealed > * {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    translate 1000ms var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* Cards: subtle clip reveal of the image */
.js [data-reveal-group] .product-card__media img,
.js [data-reveal-group] .category-card__media img,
.js [data-reveal-group] .news-card__media img {
  clip-path: inset(0 0 12% 0);
}

.js [data-reveal-group].is-revealed .product-card__media img,
.js [data-reveal-group].is-revealed .category-card__media img,
.js [data-reveal-group].is-revealed .news-card__media img {
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 1200ms var(--ease-expo) calc(var(--i, 0) * 90ms + 80ms),
    transform 900ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   Parallax (enabled by JS on large screens only)
   -------------------------------------------------------------------------- */
.has-parallax [data-parallax] img,
.has-parallax [data-parallax] video {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.08);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Hotspots
   -------------------------------------------------------------------------- */
@keyframes hotspot-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

@keyframes hotspot-panel-in {
  from {
    opacity: 0;
    translate: 0 6px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.hotspots.is-visible .hotspot::after {
  animation: hotspot-pulse 2.8s var(--ease-out) infinite;
}

.hotspots.is-visible .hotspot:nth-of-type(2)::after { animation-delay: 0.5s; }
.hotspots.is-visible .hotspot:nth-of-type(3)::after { animation-delay: 1s; }
.hotspots.is-visible .hotspot:nth-of-type(4)::after { animation-delay: 1.5s; }
.hotspots.is-visible .hotspot:nth-of-type(5)::after { animation-delay: 2s; }

.hotspots.has-active .hotspot::after {
  animation-play-state: paused;
  opacity: 0;
}

@container hotspots (min-width: 680px) {
  .js .hotspots.is-enhanced .hotspot-label {
    opacity: 0;
    transform: translateY(8px);
  }

  .js .hotspots.is-enhanced.is-visible .hotspot-label {
    opacity: 1;
    transform: none;
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 120ms + 350ms);
  }

  .js .hotspots.is-enhanced.is-visible.has-active .hotspot-label:not(.is-active) {
    opacity: 0.45;
    transition-delay: 0s;
  }

  .js .hotspots.is-enhanced .hotspot {
    opacity: 0;
    scale: 0.6;
  }

  .js .hotspots.is-enhanced.is-visible .hotspot {
    opacity: 1;
    scale: 1;
    transition: opacity 500ms var(--ease-out), scale 700ms var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 120ms + 200ms);
  }
}

.hotspot-lines path {
  stroke-dasharray: var(--len, 0) var(--len, 0);
  stroke-dashoffset: var(--len, 0);
}

.hotspots.is-visible .hotspot-lines path {
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset 900ms var(--ease-expo) calc(var(--i, 0) * 120ms + 300ms),
    stroke var(--dur-base) var(--ease-out),
    opacity var(--dur-base);
}

/* --------------------------------------------------------------------------
   Fallback: never leave content hidden
   -------------------------------------------------------------------------- */
.reveal-fallback:not(.anim-ready) .site-header,
.reveal-fallback:not(.anim-ready) [data-reveal],
.reveal-fallback:not(.anim-ready) [data-reveal-group] > *,
.reveal-fallback:not(.anim-ready) .hero [data-hero-item],
.reveal-fallback:not(.anim-ready) .hero__title,
.reveal-fallback:not(.anim-ready) .hero__line > span {
  opacity: 1 !important;
  translate: none !important;
}

.reveal-fallback:not(.anim-ready) .hero__media img,
.reveal-fallback:not(.anim-ready) .hero__veil {
  opacity: 1 !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .site-header,
  .js [data-reveal],
  .js [data-reveal-group] > *,
  .js .hero [data-hero-item],
  .js .hero__title,
  .js .hero__line > span {
    opacity: 1;
    translate: none;
  }

  .js .hero__media img,
  .js .hero__veil {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal-group] .product-card__media img,
  .js [data-reveal-group] .category-card__media img,
  .js [data-reveal-group] .news-card__media img {
    clip-path: none;
  }

  .hotspots.is-visible .hotspot::after {
    animation: none;
  }

  .js .hotspots.is-enhanced .hotspot,
  .js .hotspots.is-enhanced .hotspot-label {
    opacity: 1;
    scale: 1;
    transform: none;
  }

  .hotspot-lines path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}