/* Motion tokens matching the Airo / Framer Motion site */
:root {
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fade: 0.6s;
  --duration-hero-image: 0.7s;
  --duration-hero-badge: 0.5s;
  --stagger-step: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduced *,
  .motion-reduced *::before,
  .motion-reduced *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Header scroll transition (original: transition-all duration-300) */
.site-header {
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.site-header.is-scrolled {
  box-shadow: 0 4px 24px rgb(0 0 0 / .06);
}

/* Buttons & links — hover:scale-105 / hover:opacity-90 */
.btn,
.nav-link,
.feature-pill,
.filter-btn {
  transition:
    transform 0.15s var(--ease-out),
    opacity 0.15s var(--ease-out),
    background-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
}
.btn-primary:hover,
.btn-light:hover {
  opacity: 0.9;
  transform: scale(1.05);
}
.btn-secondary:hover {
  transform: scale(1.02);
}
.btn-outline:hover {
  transform: scale(1.02);
}
.btn-light-outline:hover {
  transform: scale(1.02);
}
.color-item,
.product-card,
.shop-item,
.benefit-card,
.belief-card,
.ingredient-card,
.contact-card,
.benefit-preview-card {
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.color-item[data-reveal-item].is-revealed:hover {
  transform: translateY(-6px) scale(1.15);
  z-index: 2;
  transition-delay: 0s;
}
.color-item[data-reveal-item]:not(.is-revealed) {
  transition:
    opacity var(--duration-fade) var(--ease-out),
    transform var(--duration-fade) var(--ease-out);
}
.color-item[data-reveal-item].is-revealed {
  transition:
    opacity var(--duration-fade) var(--ease-out),
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.color-item[data-reveal-item].is-revealed:hover {
  transition-delay: 0s;
}
.color-item:hover .color-swatch {
  box-shadow: 0 14px 22px -6px rgb(0 0 0 / 0.18);
}
.product-card:hover,
.shop-item:hover {
  transform: scale(1.03);
}
.benefit-card[data-reveal-item].is-revealed:hover,
.belief-card[data-reveal-item].is-revealed:hover,
.ingredient-card[data-reveal-item].is-revealed:hover,
.contact-card[data-reveal-item].is-revealed:hover,
.benefit-preview-card[data-reveal-item].is-revealed:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgb(0 0 0 / .08);
}
.benefit-card[data-reveal-item].is-revealed,
.belief-card[data-reveal-item].is-revealed,
.ingredient-card[data-reveal-item].is-revealed,
.contact-card[data-reveal-item].is-revealed,
.benefit-preview-card[data-reveal-item].is-revealed {
  transition:
    opacity var(--duration-fade) var(--ease-out),
    transform 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out);
}

/* Hero load animations */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroBadgeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-hero-item] {
  opacity: 0;
  transform: translateY(32px);
}
[data-hero-item].is-animated {
  animation: heroFadeUp var(--duration-fade) var(--ease-out) forwards;
}

[data-hero-image] {
  opacity: 0;
  transform: scale(0.95);
}
[data-hero-image].is-animated {
  animation: heroImageIn var(--duration-hero-image) var(--ease-out) 0.2s forwards;
}

[data-hero-badge] {
  opacity: 0;
  transform: translateY(10px);
}
[data-hero-badge].is-animated {
  animation: heroBadgeIn var(--duration-hero-badge) var(--ease-out) 0.8s forwards;
}

/* Scroll reveal — fadeUp variant */
[data-reveal],
[data-reveal-item] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--duration-fade) var(--ease-out),
    transform var(--duration-fade) var(--ease-out);
}
[data-reveal].is-visible,
[data-reveal-item].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Shop cards: fade only — transform was clipping card bodies inside the card */
.shop-item[data-reveal-item] {
  transform: none;
}
.shop-item[data-reveal-item].is-visible,
.shop-item[data-reveal-item].is-revealed {
  transform: none;
}
.shop-item[data-reveal-item]:hover {
  transform: scale(1.03);
}

[data-reveal-slide-left] {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}
[data-reveal-slide-left].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-reveal-slide-right] {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}
[data-reveal-slide-right].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Decorative SVG blobs */
.hero-blob-svg {
  position: absolute;
  pointer-events: none;
  opacity: 0.15;
}
.hero-blob-svg.blob-primary { color: var(--primary); opacity: 0.2; }
.hero-blob-svg.blob-accent { color: var(--accent); opacity: 0.15; }
.hero-blob-svg.blob-secondary { color: var(--secondary); opacity: 0.1; }

/* Mobile nav slide */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s var(--ease-out), opacity 0.25s var(--ease-out), padding 0.3s var(--ease-out);
  padding-top: 0;
  padding-bottom: 0;
}
body.menu-open .mobile-nav {
  max-height: 320px;
  opacity: 1;
  padding-bottom: 1rem;
}