/* Punch Hug — premium motion layer (additive only). Toggle via punchhug_premium_motion. */

html.ph-motion-on {
  --ph-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ph-cream: #fcfaf7;
  --ph-blush-soft: #e8c7c3;
  --ph-dusty: #c98f91;
  --ph-charcoal: #292625;
}

/* —— Hero entrance —— */
html.ph-motion-on .ph-slider .ph-slide__media img {
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 1000ms var(--ph-motion-ease),
    transform 1000ms var(--ph-motion-ease);
  will-change: transform, opacity;
}

html.ph-motion-on .ph-slider .ph-slide__veil {
  opacity: 0;
  transition: opacity 700ms var(--ph-motion-ease);
}

html.ph-motion-on .ph-slider .ph-slide__inner > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 700ms var(--ph-motion-ease),
    transform 700ms var(--ph-motion-ease);
}

html.ph-motion-on .ph-slider .ph-slide.is-active.ph-hero-enter .ph-slide__media img,
html.ph-motion-on .ph-slider.ph-hero-ready .ph-slide.is-active .ph-slide__media img {
  opacity: 1;
  transform: scale(1);
}

html.ph-motion-on .ph-slider .ph-slide.is-active.ph-hero-enter .ph-slide__veil,
html.ph-motion-on .ph-slider.ph-hero-ready .ph-slide.is-active .ph-slide__veil {
  opacity: 1;
}

html.ph-motion-on .ph-slider .ph-slide.is-active.ph-hero-enter .ph-slide__inner > *:nth-child(1),
html.ph-motion-on .ph-slider.ph-hero-ready .ph-slide.is-active .ph-slide__inner > *:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 180ms;
  transition-duration: 700ms;
}

html.ph-motion-on .ph-slider .ph-slide.is-active.ph-hero-enter .ph-slide__inner > *:nth-child(2),
html.ph-motion-on .ph-slider.ph-hero-ready .ph-slide.is-active .ph-slide__inner > *:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 300ms;
  transition-duration: 700ms;
}

html.ph-motion-on .ph-slider .ph-slide.is-active.ph-hero-enter .ph-slide__inner > *:nth-child(3),
html.ph-motion-on .ph-slider.ph-hero-ready .ph-slide.is-active .ph-slide__inner > *:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 420ms;
  transition-duration: 600ms;
}

html.ph-motion-on .ph-slider .ph-slide.is-active.ph-hero-enter .ph-slide__inner > *:nth-child(4),
html.ph-motion-on .ph-slider.ph-hero-ready .ph-slide.is-active .ph-slide__inner > *:nth-child(4),
html.ph-motion-on .ph-slider .ph-slide.is-active.ph-hero-enter .ph-slide__inner > *:nth-child(n + 4),
html.ph-motion-on .ph-slider.ph-hero-ready .ph-slide.is-active .ph-slide__inner > *:nth-child(n + 4) {
  opacity: 1;
  transform: none;
  transition-delay: 540ms;
  transition-duration: 500ms;
}

/* Active slide swap stays soft */
html.ph-motion-on .ph-slider .ph-slide.is-active .ph-slide__media img {
  opacity: 1;
  transform: scale(1);
}

html.ph-motion-on .ph-slider .ph-slide.is-active .ph-slide__inner > * {
  opacity: 1;
  transform: none;
}

/* —— Scroll reveal —— */
html.ph-motion-on .ph-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 850ms var(--ph-motion-ease),
    transform 850ms var(--ph-motion-ease);
  will-change: opacity, transform;
}

html.ph-motion-on .ph-reveal.is-in {
  opacity: 1;
  transform: none;
}

html.ph-motion-on .ph-reveal-child {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.97);
  transition:
    opacity 800ms var(--ph-motion-ease),
    transform 800ms var(--ph-motion-ease);
  transition-delay: var(--ph-stagger, 0ms);
  will-change: opacity, transform;
}

html.ph-motion-on .ph-reveal-child.is-in {
  opacity: 1;
  transform: none;
}

/* Look / category cards — editorial appear */
html.ph-motion-on .ph-look__card img {
  transition: transform 700ms var(--ph-motion-ease);
}

html.ph-motion-on .ph-look__card.is-in img {
  animation: ph-img-appear 900ms var(--ph-motion-ease) both;
}

@keyframes ph-img-appear {
  from {
    opacity: 0.65;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* —— Product card hover (desktop) —— */
@media (hover: hover) and (pointer: fine) {
  html.ph-motion-on body.punchhug ul.products li.product {
    transition: transform 450ms var(--ph-motion-ease);
  }

  html.ph-motion-on body.punchhug ul.products li.product:hover {
    transform: translateY(-6px);
  }

  html.ph-motion-on body.punchhug ul.products li.product a img {
    transition:
      transform 450ms var(--ph-motion-ease),
      box-shadow 450ms var(--ph-motion-ease) !important;
  }

  html.ph-motion-on body.punchhug ul.products li.product:hover a img {
    transform: scale(1.025) !important;
    box-shadow: 0 14px 32px -20px rgba(41, 38, 37, 0.35) !important;
  }

  html.ph-motion-on .ph-look__card:hover {
    transform: translateY(-6px);
  }

  html.ph-motion-on .ph-look__card:hover img {
    transform: scale(1.025);
  }
}

/* —— Soft float on look cards (desktop) —— */
@media (hover: hover) and (min-width: 769px) {
  html.ph-motion-on .ph-look__card:nth-child(3n + 1) {
    animation: ph-soft-float 5.5s ease-in-out infinite;
  }
  html.ph-motion-on .ph-look__card:nth-child(3n + 2) {
    animation: ph-soft-float 6.2s ease-in-out infinite;
    animation-delay: -1.4s;
  }
  html.ph-motion-on .ph-look__card:nth-child(3n) {
    animation: ph-soft-float 4.8s ease-in-out infinite;
    animation-delay: -2.6s;
  }
}

@keyframes ph-soft-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* pause float while hovering so hover translate wins */
@media (hover: hover) and (min-width: 769px) {
  html.ph-motion-on .ph-look__card:hover {
    animation-play-state: paused;
  }
}

/* —— CTA —— */
html.ph-motion-on .ph-btn {
  transition:
    transform 350ms var(--ph-motion-ease),
    background-color 350ms var(--ph-motion-ease),
    color 350ms var(--ph-motion-ease),
    box-shadow 350ms var(--ph-motion-ease) !important;
}

@media (hover: hover) and (pointer: fine) {
  html.ph-motion-on .ph-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -16px rgba(41, 38, 37, 0.4);
  }
}

/* —— Editorial media —— */
html.ph-motion-on .ph-editorial__media img {
  transition: transform 1.2s var(--ph-motion-ease);
  transform-origin: center center;
  will-change: transform;
}

/* —— Brand banner soft fade —— */
html.ph-motion-on .ph-brand-banner.ph-reveal img {
  transition: opacity 900ms var(--ph-motion-ease), transform 900ms var(--ph-motion-ease);
}

/* —— Mobile: minimal —— */
@media (max-width: 768px) {
  html.ph-motion-on .ph-reveal {
    transform: translate3d(0, 16px, 0);
    transition-duration: 600ms;
  }

  html.ph-motion-on .ph-reveal-child {
    transform: translate3d(0, 12px, 0);
    transition-duration: 550ms;
  }

  html.ph-motion-on .ph-look__card {
    animation: none !important;
  }

  html.ph-motion-on .ph-slider .ph-slide__media img {
    transition-duration: 700ms;
  }
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  html.ph-motion-on *,
  html.ph-motion-reduce * {
    animation: none !important;
    transition: opacity 0.2s ease !important;
    transform: none !important;
  }

  html.ph-motion-on .ph-reveal,
  html.ph-motion-on .ph-reveal-child,
  html.ph-motion-on .ph-slider .ph-slide__media img,
  html.ph-motion-on .ph-slider .ph-slide__inner > * {
    opacity: 1 !important;
  }
}