/**
 * BSP Polymer Solution — Motion Design System
 * CSS-only animations + transitions (Vanilla/WordPress)
 * Stack: CSS Animations + IntersectionObserver + Vanilla JS
 * A11y: prefers-reduced-motion honored
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
  --bsp-orange: #FF6600;
  --bsp-dark: #E65C00;
  --bsp-black: #1A1A1A;
  --bsp-text: #333333;
  --bsp-bg: #ffffff;

  /* Motion tokens */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-micro: 200ms;
  --duration-ui: 350ms;
  --duration-reveal: 700ms;
  --duration-hero: 1000ms;
  --stagger: 80ms;

  /* Reduced motion baseline */
  --rm-duration: 0.01ms;
}

/* ============================================
   REDUCED MOTION — Global override
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: var(--rm-duration) !important;
    transition-duration: var(--rm-duration) !important;
    animation-iteration-count: 1 !important;
  }

  /* Render final state immediately — no animation */
  .reveal,
  .hero-content > *,
  .stat-item,
  .card-reveal,
  .leistung-card,
  .about-item {
    opacity: 1 !important;
    transform: none !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

/* ============================================
   SMOOTH SCROLL
   ============================================ */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* ============================================
   HERO ANIMATIONS
   ============================================ */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-bg {
  opacity: 0;
  animation: hero-bg-fade-in 1.2s var(--ease-out-quart) 0.1s forwards;
}

@keyframes hero-bg-fade-in {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-content > * {
  opacity: 0;
  transform: translateY(32px);
  animation: hero-item-reveal var(--duration-hero) var(--ease-out-quart) forwards;
}

.hero-content > *:nth-child(1) { animation-delay: 200ms; }
.hero-content > *:nth-child(2) { animation-delay: 350ms; }
.hero-content > *:nth-child(3) { animation-delay: 500ms; }
.hero-content > *:nth-child(4) { animation-delay: 650ms; }

@keyframes hero-item-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   SCROLL REVEAL — IntersectionObserver target
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-quart),
    transform var(--duration-reveal) var(--ease-out-quart);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal for lists/children */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-quart),
    transform var(--duration-reveal) var(--ease-out-quart);
  will-change: opacity, transform;
}

.stagger-reveal.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger-reveal.is-visible > *:nth-child(2) { transition-delay: var(--stagger); }
.stagger-reveal.is-visible > *:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.stagger-reveal.is-visible > *:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
.stagger-reveal.is-visible > *:nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
.stagger-reveal.is-visible > *:nth-child(6) { transition-delay: calc(var(--stagger) * 5); }

.stagger-reveal.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in from left/right */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-quart),
    transform var(--duration-reveal) var(--ease-out-quart);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-quart),
    transform var(--duration-reveal) var(--ease-out-quart);
  will-change: opacity, transform;
}

.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale reveal for cards */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity var(--duration-reveal) var(--ease-out-quart),
    transform var(--duration-reveal) var(--ease-out-quart);
  will-change: opacity, transform;
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   HOVER MICRO-INTERACTIONS
   ============================================ */

/* Card hover lift */
.card-reveal,
.produkt-card,
.leistung-card,
.about-item {
  transition:
    transform var(--duration-micro) var(--ease-out-quart),
    box-shadow var(--duration-micro) var(--ease-out-quart);
  will-change: transform;
}

.card-reveal:hover,
.produkt-card:hover,
.leistung-card:hover,
.about-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(255, 102, 0, 0.18);
}

/* Button hover */
.wp-block-button__link,
button,
a.button,
.cta-button {
  transition:
    background-color var(--duration-micro) var(--ease-out-quart),
    transform var(--duration-micro) var(--ease-out-quart),
    box-shadow var(--duration-micro) var(--ease-out-quart);
  will-change: transform;
}

.wp-block-button__link:hover,
button:hover,
a.button:hover,
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 102, 0, 0.35);
}

.wp-block-button__link:active,
button:active,
a.button:active,
.cta-button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Nav link hover underline */
.main-navigation .main-nav a {
  position: relative;
  transition: color var(--duration-micro) var(--ease-out-quart);
}

.main-navigation .main-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--bsp-orange);
  transition: width var(--duration-ui) var(--ease-out-quart);
  will-change: width;
}

.main-navigation .main-nav a:hover::after,
.main-navigation .main-nav a:focus::after {
  width: 100%;
}

/* ============================================
   STAT COUNTERS
   ============================================ */
.stat-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-quart),
    transform var(--duration-reveal) var(--ease-out-quart);
  will-change: opacity, transform;
}

.stat-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Stat card hover glow */
.stat-item:hover {
  transform: translateY(-4px);
}

/* ============================================
   SECTION DIVIDERS / DECORATIVE
   ============================================ */
.section-divider {
  width: 0;
  transition: width 0.8s var(--ease-out-quart);
  will-change: width;
}

.section-divider.is-visible {
  width: 80px;
}

/* ============================================
   PAGE TRANSITIONS (Link hovers)
   ============================================ */
a {
  transition: color var(--duration-micro) var(--ease-out-quart);
}

/* ============================================
   PERFORMANCE
   ============================================ */
/* Don't animate off-screen elements */
.reveal:not(.is-visible) {
  pointer-events: none;
}

/* Respect visibility */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger-reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .hero-bg,
  .hero-content > * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bsp-hidden {
  display: none;
}