.wood-reveal {
  position: relative;
  display: inline-block;
  opacity: 1;
}

.u-anim-hidden {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  will-change: opacity, transform;
}

.u-anim-hidden.in-view.u-anim-in {
  animation: card-in var(--anim-base) var(--ease-out) forwards;
  animation-delay: var(--card-delay, 0ms);
}

.product-card {
  --card-delay: 0ms;
  --outline-delay: calc(var(--card-delay, 0ms) + 120ms);
}

.catalog-grid .product-card:nth-child(3n + 2) {
  --card-delay: 30ms;
}

.catalog-grid .product-card:nth-child(3n + 3) {
  --card-delay: 60ms;
}

.product-card__outline.has-outline {
  opacity: 1;
}

.product-card__outline svg.stroke-draw-once {
  animation: outline-draw 620ms var(--ease-out) forwards;
  animation-delay: var(--outline-delay, 120ms);
}

#gallery-modal.is-visible {
  animation: modal-backdrop-in var(--anim-fast) linear forwards;
}

#gallery-modal.is-visible .gallery-modal__body {
  animation: gallery-modal-in var(--anim-fast) var(--ease-out) forwards;
}

.hero__tool {
  animation-duration: 7s;
  animation-iteration-count: infinite;
}

/* heading animation removed for reliability */

@keyframes card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes outline-draw {
  from {
    stroke-dashoffset: 480;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes grid-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(10px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes grid-drift-mobile {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(6px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tool-float {
  0% {
    transform: translate3d(0, 0, 0) rotate(-4deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate3d(-6px, -6px, 0) rotate(3deg);
    opacity: 1;
  }
  80% {
    transform: translate3d(2px, 8px, 0) rotate(-2deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(-4deg);
    opacity: 0;
  }
}

@keyframes tool-glide {
  0% {
    transform: translate3d(8px, -4px, 0) rotate(6deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  45% {
    transform: translate3d(-12px, 6px, 0) rotate(-4deg);
    opacity: 1;
  }
  70% {
    transform: translate3d(6px, 12px, 0) rotate(2deg);
  }
  100% {
    transform: translate3d(8px, -4px, 0) rotate(6deg);
    opacity: 0;
  }
}

@keyframes modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes gallery-modal-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grid-animated::before {
    animation: none;
    transform: none;
    opacity: 0.25;
  }

  .wood-reveal,
  .wood-reveal.is-visible {
    opacity: 1;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .u-anim-hidden,
  .u-anim-hidden.in-view.u-anim-in {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .product-card__outline {
    opacity: 1;
  }

  .product-card__outline svg {
    stroke-dashoffset: 0;
    animation: none !important;
  }

  #gallery-modal.is-visible,
  #gallery-modal.is-visible .gallery-modal__body {
    animation: modal-backdrop-in var(--anim-fast) linear forwards;
  }

  .badge {
    transition-duration: 0ms;
    transform: none !important;
  }

  .gallery-grid img {
    transition-duration: 0ms;
    transform: none !important;
  }

  .hero__tool {
    animation: none !important;
    opacity: 1;
    transform: none !important;
  }
}