/* =============================================================================
   TEDCLEANING — animations.css
   Complete keyframe definitions, animation utility classes, and
   prefers-reduced-motion overrides.
   ============================================================================= */

/* =============================================================================
   01. KEYFRAME DEFINITIONS
   ============================================================================= */

/* Floating orb background element */
@keyframes orbFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -40px) scale(1.05);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.98);
  }
}

/* Hero section entrance */
@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll indicator inner line pulse */
@keyframes scrollPulse {
  0% {
    transform: translateY(-100%);
    opacity: 1;
  }
  100% {
    transform: translateY(200%);
    opacity: 0;
  }
}

/* Shimmer / loading skeleton effect */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Generic fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Generic slide up */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Generic slide down */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Generic slide in from left */
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Generic slide in from right */
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Generic scale in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Floating particle rising effect — uses CSS custom properties for variation */
@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-80vh) translateX(var(--drift, 20px)) scale(0.5);
    opacity: 0;
  }
}

/* Button click ripple */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Error / validation shake */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* Animated gradient background shift */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/* =============================================================================
   02. SCROLL REVEAL — PRODUCTION STEPS
   ============================================================================= */

/**
 * Default reveal: slides in from the left.
 * JavaScript adds .is-visible when the element enters the viewport.
 */
.production-step.reveal-element {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity  0.7s cubic-bezier(0.0, 0.0, 0.2, 1),
    transform 0.7s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.production-step.reveal-element.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/**
 * Reverse reveal: slides in from the right.
 */
.production-step--reverse.reveal-element {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity  0.7s cubic-bezier(0.0, 0.0, 0.2, 1),
    transform 0.7s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.production-step--reverse.reveal-element.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered delays for up to five production steps */
.production-step:nth-child(1) {
  transition-delay: 0ms;
}
.production-step:nth-child(2) {
  transition-delay: 100ms;
}
.production-step:nth-child(3) {
  transition-delay: 200ms;
}
.production-step:nth-child(4) {
  transition-delay: 300ms;
}
.production-step:nth-child(5) {
  transition-delay: 400ms;
}


/* =============================================================================
   03. SCROLL REVEAL — GROUP PANELS
   ============================================================================= */

/**
 * Group company panels fade and slide up on reveal.
 * Flex-basis also transitions to support animated accordion-style layout.
 */
.group-panel {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.6s cubic-bezier(0.0, 0.0, 0.2, 1),
    transform 0.6s cubic-bezier(0.0, 0.0, 0.2, 1),
    flex      0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

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

/* Staggered delays for up to three group panels */
.group-panel:nth-child(1) {
  transition-delay: 0ms;
}
.group-panel:nth-child(2) {
  transition-delay: 100ms;
}
.group-panel:nth-child(3) {
  transition-delay: 200ms;
}


/* =============================================================================
   04. GENERIC REVEAL ELEMENT
   ============================================================================= */

/**
 * Catch-all class for any element that should fade/slide in on scroll.
 * Does NOT override production-step or group-panel specifics above.
 */
.reveal-element:not(.production-step):not(.production-step--reverse) {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity  0.6s cubic-bezier(0.0, 0.0, 0.2, 1),
    transform 0.6s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-element:not(.production-step):not(.production-step--reverse).is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =============================================================================
   05. PARTICLES
   ============================================================================= */

.particle {
  position: absolute;
  width:  2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(0, 180, 230, 0.6);
  pointer-events: none;
  animation: particleFloat var(--duration, 12s) var(--delay, 0s) infinite linear;
}


/* =============================================================================
   06. BUTTON RIPPLE
   ============================================================================= */

/**
 * Ripple elements are injected by main.js on click.
 * The parent .btn must have position: relative and overflow: hidden.
 */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}


/* =============================================================================
   07. SHIMMER UTILITY
   ============================================================================= */

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  background-size: 200% auto;
  animation: shimmer 1.8s linear infinite;
}


/* =============================================================================
   08. GRADIENT SHIFT UTILITY
   ============================================================================= */

.gradient-shift {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}


/* =============================================================================
   09. HERO ENTRANCE HELPERS
   ============================================================================= */

.animate-hero-reveal {
  animation: heroReveal 0.8s cubic-bezier(0.0, 0.0, 0.2, 1) both;
}

.hero-orb {
  animation: orbFloat 14s ease-in-out infinite;
}

.hero-orb:nth-child(2) {
  animation-duration: 18s;
  animation-delay: -6s;
}

.hero-orb:nth-child(3) {
  animation-duration: 22s;
  animation-delay: -12s;
}

.scroll-indicator .scroll-line::after {
  animation: scrollPulse 1.8s ease-in-out infinite;
}


/* =============================================================================
   10. @media prefers-reduced-motion: reduce
   IMPORTANT — MUST be last to guarantee overrides.
   Reset ALL motion for users who have requested reduced motion.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

  /* ── Scroll reveal elements ── */
  .reveal-element,
  .production-step,
  .production-step--reverse,
  .group-panel {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  /* ── Generic reveal catch-all ── */
  .reveal-element:not(.production-step):not(.production-step--reverse) {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  /* ── Hero section entrance elements ── */
  .hero__eyebrow,
  .hero__headline,
  .hero__headline-word,
  .hero__subline,
  .hero__ctas,
  .hero__cta,
  .scroll-indicator {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* ── Hero animated background elements ── */
  .hero-orb {
    animation: none;
  }

  /* ── Scroll indicator line ── */
  .scroll-line::after {
    animation: none;
  }

  /* ── Floating particles ── */
  .particle {
    animation: none;
  }

  /* ── Shimmer and gradient shift utilities ── */
  .shimmer {
    animation: none;
    background: transparent;
  }

  .gradient-shift {
    animation: none;
  }

  /* ── Remove hover transforms on interactive elements ── */
  .pillar:hover {
    transform: none;
  }

  .btn:hover,
  .btn--primary:hover,
  .btn--secondary:hover,
  .btn--outline:hover,
  .btn--ghost:hover {
    transform: none;
  }

  /* ── Any remaining CSS animation or transition ── */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}