/**
 * animations.css - Atmosphere, hero load sequence, and process line.
 * Animated values use only transform and opacity (Requirement 23.2).
 *
 * Requirements: 3.2, 6.3, 9.3, 23.2
 */

@keyframes atmosphere-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.55;
  }
  40% {
    transform: translate3d(3%, -2%, 0) scale(1.06);
    opacity: 0.8;
  }
  70% {
    transform: translate3d(-2%, 3%, 0) scale(1.03);
    opacity: 0.65;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.55;
  }
}

@keyframes red-pulse {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.28;
  }
  50% {
    transform: translate3d(2%, -4%, 0) scale(1.18);
    opacity: 0.55;
  }
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes glass-materialise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes headline-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes line-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes specular-sweep {
  0% {
    transform: translate3d(-120%, 0, 0) rotate(18deg);
    opacity: 0;
  }
  20% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.18;
  }
  100% {
    transform: translate3d(180%, 0, 0) rotate(18deg);
    opacity: 0;
  }
}

@keyframes orb-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(8%, -12%, 0);
    opacity: 0.6;
  }
}

.animated-bg__layer-2 {
  animation: atmosphere-drift 20s ease-in-out infinite;
  will-change: transform;
}

.animated-bg__layer-3 {
  animation: red-pulse 8s ease-in-out infinite;
  will-change: transform;
}

.animated-bg__orb {
  animation: orb-float 18s ease-in-out infinite;
  will-change: transform;
}

.animated-bg__orb--delay {
  animation-delay: -7s;
}

.hero__bg--active {
  animation: hero-fade-in 700ms var(--ease-apple) both;
}

.hero__logo--active {
  animation: glass-materialise 700ms var(--ease-apple) both;
}

.hero__glass--active {
  animation: glass-materialise 800ms var(--ease-apple) both;
}

.hero__headline--active {
  animation: headline-in 700ms var(--ease-apple) both;
}

.hero__buttons--active {
  animation: glass-materialise 600ms var(--ease-apple) both;
}

.hero__reflections--active::after {
  animation: specular-sweep 4.5s var(--ease-apple) infinite;
}

.process-line--active {
  animation: line-draw 900ms var(--ease-apple) both;
}

.hero__logo,
.hero__glass,
.hero__headline,
.hero__buttons,
.hero__reflections,
.hero__bg {
  opacity: 0;
}

.hero__logo--active,
.hero__glass--active,
.hero__headline--active,
.hero__buttons--active,
.hero__reflections--active,
.hero__bg--active {
  opacity: 1;
}