/* Motion utilities and Scroll-driven Animation States */

/* Section Entrance Animation — Upward Rise from Below */
.anim-section-rise {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.anim-section-rise.visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-zoom-in {
  opacity: 0.85;
  transform: scale(0.82);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  will-change: opacity, transform;
}
.anim-zoom-in.visible {
  opacity: 1;
  transform: scale(1);
}

.anim-zoom-out {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  will-change: opacity, transform;
}
.anim-zoom-out.scrolled-out {
  opacity: 0.85;
  transform: scale(0.78);
}

.anim-stagger-word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.anim-stagger-word.visible span {
  opacity: 1;
  transform: translateY(0);
}

.anim-blur-focus {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, filter 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, filter, transform;
}
.anim-blur-focus.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.anim-parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Inner Content Blocks — Alternating Horizontal Reveals */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-45px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--stagger-delay, 0ms);
  will-change: opacity, transform;
}
.anim-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-slide-right {
  opacity: 0;
  transform: translateX(45px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--stagger-delay, 0ms);
  will-change: opacity, transform;
}
.anim-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-pinned {
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .anim-pinned {
    position: sticky;
    top: 84px;
  }
}

/* Global Button Click & Tap Animations */
button,
.btn-primary,
.btn-secondary,
.menu-toggle,
.category-button,
.device,
.cat-card,
.footer-links a,
a.btn-primary,
a.btn-secondary,
a.cat-card,
[role="button"] {
  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),
              background-color 150ms ease,
              border-color 150ms ease,
              box-shadow 150ms ease,
              filter 150ms ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

/* Hover brightness enhancement */
button:not([disabled]):not([aria-disabled="true"]):hover,
.btn-primary:not([disabled]):not([aria-disabled="true"]):hover,
.btn-secondary:not([disabled]):not([aria-disabled="true"]):hover,
.category-button:hover,
.device:hover,
.menu-toggle:hover,
.cat-card:hover,
[role="button"]:not([disabled]):hover {
  filter: brightness(1.06);
}

/* Active Press & Tap Animation (Scale down to ~0.96) */
button:not([disabled]):not([aria-disabled="true"]):active,
button:not([disabled]):not([aria-disabled="true"]).is-pressed,
.btn-primary:not([disabled]):not([aria-disabled="true"]):active,
.btn-primary:not([disabled]):not([aria-disabled="true"]).is-pressed,
.btn-secondary:not([disabled]):not([aria-disabled="true"]):active,
.btn-secondary:not([disabled]):not([aria-disabled="true"]).is-pressed,
a.btn-primary:not([disabled]):not([aria-disabled="true"]):active,
a.btn-primary:not([disabled]):not([aria-disabled="true"]).is-pressed,
a.btn-secondary:not([disabled]):not([aria-disabled="true"]):active,
a.btn-secondary:not([disabled]):not([aria-disabled="true"]).is-pressed,
.menu-toggle:active,
.menu-toggle.is-pressed,
.category-button:active,
.category-button.is-pressed,
.device:active,
.device.is-pressed,
.cat-card:active,
.cat-card.is-pressed {
  transform: scale(0.96) !important;
  filter: brightness(0.92);
  transition-duration: 120ms;
}

/* Keyboard Focus Indicators */
button:focus-visible,
a:focus-visible,
.category-button:focus-visible,
.device:focus-visible,
.menu-toggle:focus-visible,
.cat-card:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent, #ffd43b);
  outline-offset: 3px;
}

/* Disabled & Coming Soon Buttons */
button[disabled],
button[aria-disabled="true"],
.btn-disabled,
.btn-unsupported {
  transform: none !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .anim-section-rise,
  .anim-zoom-in,
  .anim-zoom-out,
  .anim-blur-focus,
  .anim-slide-left,
  .anim-slide-right,
  .anim-stagger-word span,
  .anim-parallax,
  button,
  .btn-primary,
  .btn-secondary,
  .menu-toggle,
  .category-button,
  .device,
  .cat-card,
  [role="button"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}