/* ═══════════════════════════════════════════════
   SERIAN GROUP — Animations & Scroll Reveal
   Pure CSS + IntersectionObserver system
   ═══════════════════════════════════════════════ */

/* ═══ SCROLL REVEAL BASE ═════════════════════════ */

[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

[data-reveal="fade-up"] {
  transform: translateY(30px);
}

[data-reveal="fade-in"] {
  transform: none;
}

[data-reveal="fade-left"] {
  transform: translateX(30px);
}

[data-reveal="fade-right"] {
  transform: translateX(-30px);
}

[data-reveal="scale"] {
  transform: scale(0.95);
}

/* Visible state */
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ═══ CARD SKELETON LOADING ══════════════════════ */

.product-image.is-loading,
.card-image.is-loading,
.brand-logo-container.is-loading {
  background: linear-gradient(
    90deg,
    var(--color-bg-light) 25%,
    var(--color-bg-muted) 50%,
    var(--color-bg-light) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-bg 1.5s ease-in-out infinite;
}

@keyframes shimmer-bg {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.product-image.is-loading img,
.card-image.is-loading img,
.brand-logo-container.is-loading img {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.product-image img.loaded,
.card-image img.loaded,
.brand-logo-container img.loaded {
  opacity: 1;
}

/* ═══ ENHANCED CARD HOVER MICRO-INTERACTIONS ═════ */

/* Inner glow on hover for product cards */
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(90, 140, 58, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

.product-card:hover::before {
  opacity: 1;
}

/* Arrow bounce on card hover */
.product-card:hover .product-arrow {
  animation: arrowBounce 0.6s ease-in-out;
}

@keyframes arrowBounce {
  0%,
  100% {
    transform: translateX(4px) translateY(-2px);
  }
  50% {
    transform: translateX(8px) translateY(-2px);
  }
}

/* Brand card subtle ring on hover */
.brand-card {
  position: relative;
}

.brand-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  border: 2px solid transparent;
  transition: border-color 0.4s ease;
  pointer-events: none;
}

.brand-card:hover::after {
  border-color: rgba(45, 80, 22, 0.15);
}

/* Homepage card image overlay on hover */
.card .card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    rgba(45, 80, 22, 0.08) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.card:hover .card-image::after {
  opacity: 1;
}

/* ═══ BUTTON PRESS FEEDBACK ══════════════════════ */

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}

/* ═══ SMOOTH SCROLL ══════════════════════════════ */

html {
  scroll-behavior: smooth;
}

/* ═══ ACCESSIBILITY: REDUCED MOTION ══════════════ */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .product-image.is-loading,
  .card-image.is-loading,
  .brand-logo-container.is-loading {
    animation: none;
  }

  .product-card:hover .product-arrow {
    animation: none;
  }

  .product-grid.active .product-card {
    animation: none;
    opacity: 1;
  }

  .brand-card {
    animation: none;
    opacity: 1;
  }

  html {
    scroll-behavior: auto;
  }
}