/* ============================================================
   mzk-motion v3 — micro-interactions & scroll-driven animation layer
   Every new effect uses the independent `translate` / `scale` /
   `rotate` CSS properties (not `transform`), so it composes with
   each component's own transform-based hover/click animation
   instead of overwriting it. Nothing here needs hand-editing per
   page — mzk-motion.js auto-applies these classes on every page.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .mzk-parallax-layer, .mzk-parallax-layer *,
  [data-mzk-parallax],
  .mzk-run-border::before,
  .mzk-pulse-glow, .mzk-pulse-dot,
  .mzk-click-glow::after,
  .mzk-kenburns,
  .mzk-tilt {
    animation: none !important;
    transition: none !important;
  }
  .reveal, .reveal-scale, .reveal-rotate, .stagger > * {
    opacity: 1 !important;
    translate: 0 !important;
    scale: 1 !important;
    rotate: 0deg !important;
  }
  [data-mzk-parallax] { translate: 0 !important; }
  .mzk-spotlight-host::before,
  .mzk-tilt-glare { display: none !important; }
}

/* ---------------------------------------------------------------
   1) PARALLAX + idle Ken Burns drift on hero / category media
--------------------------------------------------------------- */
.mzk-parallax-layer { will-change: translate, scale; }
.mzk-parallax-layer img,
.mzk-parallax-layer video { will-change: translate, scale; }
[data-mzk-parallax] { will-change: translate; }

.mzk-kenburns { animation: mzkKenBurns 16s ease-in-out infinite; }
@keyframes mzkKenBurns {
  0%, 100% { scale: 1; }
  50%      { scale: 1.07; }
}

/* ---------------------------------------------------------------
   2) SCROLL REVEAL — stronger, and a 3rd variant with a touch of
      rotation for extra dynamism on featured blocks.
--------------------------------------------------------------- */
.reveal {
  opacity: 0;
  translate: 0 46px;
  scale: .97;
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    translate .9s cubic-bezier(.16,1,.3,1),
    scale .9s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; translate: 0 0; scale: 1; }

.reveal-scale {
  opacity: 0;
  scale: .90;
  translate: 0 16px;
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    scale .8s cubic-bezier(.16,1,.3,1),
    translate .8s cubic-bezier(.16,1,.3,1);
}
.reveal-scale.in { opacity: 1; scale: 1; translate: 0 0; }

.reveal-rotate {
  opacity: 0;
  scale: .92;
  translate: 0 24px;
  rotate: -2.5deg;
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    scale .85s cubic-bezier(.16,1,.3,1),
    translate .85s cubic-bezier(.16,1,.3,1),
    rotate .85s cubic-bezier(.16,1,.3,1);
}
.reveal-rotate.in { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; }

/* Stagger: children get a real hidden state so --i based delay
   (auto-assigned by mzk-motion.js when absent) truly cascades. */
.stagger > * {
  opacity: 0;
  translate: 0 36px;
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    translate .7s cubic-bezier(.16,1,.3,1);
  transition-delay: 0ms;
}
.stagger.in > * {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ---------------------------------------------------------------
   3) HOVER LIFT — only where no bespoke hover already exists.
--------------------------------------------------------------- */
.mzk-hover-lift {
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.mzk-hover-lift:hover {
  transform: translateY(-9px) scale(1.025);
  box-shadow: 0 20px 46px rgba(0,0,0,.34), 0 0 0 1px rgba(43,96,42,.4);
  border-color: rgba(43,96,42,.55);
}
.mzk-hover-lift:hover img { scale: 1.06; }
.mzk-hover-lift img { transition: scale .6s ease; }

/* Additive glow ring for elements with their own transform hover */
.mzk-hover-glow-add:hover {
  box-shadow: 0 0 0 1px rgba(168,224,99,.4), 0 0 40px rgba(168,224,99,.18);
}

/* 3D tilt + moving glare sheen for photo/image cards. Rotation
   uses the independent `rotate` property so it composes with the
   card's own :hover translateY instead of replacing it. Needs a
   perspective context on the grid parent (set below). */
.mzk-tilt-grid { perspective: 1100px; }
.mzk-tilt { transition: rotate .35s cubic-bezier(.22,1,.36,1); }
.mzk-tilt-glare {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mzk-gx, 50%) var(--mzk-gy, 50%), rgba(255,255,255,.22), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
  mix-blend-mode: overlay;
}
.mzk-tilt:hover .mzk-tilt-glare,
.mzk-tilt.mzk-tilting .mzk-tilt-glare { opacity: 1; }

/* ---------------------------------------------------------------
   4) CLICK GLOW — pointer-anchored radial burst
--------------------------------------------------------------- */
.mzk-clickable { position: relative; overflow: hidden; isolation: isolate; }
.mzk-click-glow::after {
  content: "";
  position: absolute;
  left: var(--mzk-gx, 50%);
  top: var(--mzk-gy, 50%);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(168,224,99,.7) 0%, rgba(43,96,42,.38) 45%, transparent 72%);
  animation: mzkClickGlow .75s cubic-bezier(.22,1,.36,1) forwards;
  z-index: 6;
}
@keyframes mzkClickGlow {
  0%   { scale: .3; opacity: 1; }
  100% { scale: 36; opacity: 0; }
}

/* ---------------------------------------------------------------
   5) SOFT PULSE / BREATHING GLOW
--------------------------------------------------------------- */
.mzk-pulse-glow { animation: mzkPulseGlow 2.4s ease-in-out infinite; }
@keyframes mzkPulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(168,224,99,0), 0 0 16px rgba(43,96,42,.25);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(168,224,99,0), 0 0 36px rgba(168,224,99,.5);
    filter: brightness(1.09);
  }
}
.mzk-pulse-dot { animation: mzkDotPulse 2s ease-in-out infinite; }
@keyframes mzkDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,224,99,.55); scale: 1; }
  50%      { box-shadow: 0 0 0 9px rgba(168,224,99,0); scale: 1.3; }
}

/* Cursor spotlight over hero / category header sections */
.mzk-spotlight-host { position: relative; }
.mzk-spotlight-host::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--mzk-sx, 50%) var(--mzk-sy, 25%), rgba(168,224,99,.14), transparent 62%);
  opacity: 0;
  transition: opacity .5s ease;
}
.mzk-spotlight-host.mzk-spot-on::before { opacity: 1; }

/* ---------------------------------------------------------------
   6) ANIMATED RUNNING BORDER — conic-gradient sweep
--------------------------------------------------------------- */
@property --mzk-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.mzk-run-border { position: relative; isolation: isolate; border-radius: inherit; }
.mzk-run-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--mzk-angle, 0deg),
    transparent 0%, #A8E063 15%, transparent 30%,
    transparent 60%, rgba(43,96,42,.95) 75%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: mzkRunBorder 3s linear infinite;
  z-index: -1;
  pointer-events: none;
  opacity: .9;
}
@keyframes mzkRunBorder { to { --mzk-angle: 360deg; } }
@supports not (background: conic-gradient(from var(--mzk-angle), red, blue)) {
  .mzk-run-border::before { animation: mzkRunBorderSpin 3s linear infinite; }
  @keyframes mzkRunBorderSpin { to { transform: rotate(360deg); } }
}

/* Hover-only variant for secondary tiles, to avoid visual noise */
.mzk-run-border-hover::before { opacity: 0; transition: opacity .4s ease; }
.mzk-run-border-hover:hover::before { opacity: .9; }

/* ---------------------------------------------------------------
   7) MAGNETIC BUTTONS — independent translate, composes with the
      button's own CSS :hover transform.
--------------------------------------------------------------- */
.mzk-magnetic { transition: translate .25s cubic-bezier(.22,1,.36,1); }


/* ============================================================
   Mobile-alive extras — stronger scroll reveals on phones
   ============================================================ */
@media (max-width:900px) and (prefers-reduced-motion: no-preference) {
  .reveal {
    translate: 0 28px;
    transition-duration: .55s;
  }
  .stagger > * {
    translate: 0 28px;
    transition-duration: .55s;
  }
  .stagger.in > * {
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .pcard:active, .wcard:active, .rcard:active, .gallery-tile:active {
    transition: scale .12s ease;
  }
}