/* ==========================================================================
   Atlas Scroll Animations
   Self-contained @keyframes + utility classes.
   No external CDN dependency (replaces animate.css).
   ========================================================================== */

@layer utilities {

/* ------------------------------------------------------------------
   Base animation class
   ------------------------------------------------------------------ */
.os-animation {
  opacity: 0;
  visibility: hidden;
}

.os-animation.os-animated {
  visibility: visible;
  animation-fill-mode: both;
  animation-duration: var(--animate-duration, 1s);
  animation-delay: var(--animate-delay, 0s);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .os-animation {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .os-animation.os-animated {
    animation: none !important;
    opacity: 1;
  }
}

/* ------------------------------------------------------------------
   Fade
   ------------------------------------------------------------------ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate__fadeIn { animation-name: fadeIn; }

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-30px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(30px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInRight { animation-name: fadeInRight; }

@keyframes fadeInDownBig {
  from { opacity: 0; transform: translate3d(0, -100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInDownBig { animation-name: fadeInDownBig; }

@keyframes fadeInUpBig {
  from { opacity: 0; transform: translate3d(0, 100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInUpBig { animation-name: fadeInUpBig; }

@keyframes fadeInLeftBig {
  from { opacity: 0; transform: translate3d(-200px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInLeftBig { animation-name: fadeInLeftBig; }

@keyframes fadeInRightBig {
  from { opacity: 0; transform: translate3d(200px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInRightBig { animation-name: fadeInRightBig; }

@keyframes fadeInTopLeft {
  from { opacity: 0; transform: translate3d(-30px, -30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInTopLeft { animation-name: fadeInTopLeft; }

@keyframes fadeInTopRight {
  from { opacity: 0; transform: translate3d(30px, -30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInTopRight { animation-name: fadeInTopRight; }

@keyframes fadeInBottomLeft {
  from { opacity: 0; transform: translate3d(-30px, 30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInBottomLeft { animation-name: fadeInBottomLeft; }

@keyframes fadeInBottomRight {
  from { opacity: 0; transform: translate3d(30px, 30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInBottomRight { animation-name: fadeInBottomRight; }

/* ------------------------------------------------------------------
   Zoom
   ------------------------------------------------------------------ */
@keyframes zoomIn {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; }
}
.animate__zoomIn { animation-name: zoomIn; }

@keyframes zoomInDown {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animate__zoomInDown { animation-name: zoomInDown; }

@keyframes zoomInLeft {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animate__zoomInLeft { animation-name: zoomInLeft; }

@keyframes zoomInRight {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animate__zoomInRight { animation-name: zoomInRight; }

@keyframes zoomInUp {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animate__zoomInUp { animation-name: zoomInUp; }

/* ------------------------------------------------------------------
   Slide
   ------------------------------------------------------------------ */
@keyframes slideInDown {
  from { transform: translate3d(0, -100%, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
.animate__slideInDown { animation-name: slideInDown; }

@keyframes slideInUp {
  from { transform: translate3d(0, 100%, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
.animate__slideInUp { animation-name: slideInUp; }

@keyframes slideInLeft {
  from { transform: translate3d(-100%, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
.animate__slideInLeft { animation-name: slideInLeft; }

@keyframes slideInRight {
  from { transform: translate3d(100%, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
.animate__slideInRight { animation-name: slideInRight; }

/* ------------------------------------------------------------------
   Back Entrances
   ------------------------------------------------------------------ */
@keyframes backInDown {
  0% { transform: translateY(-1200px) scale(0.7); opacity: 0.7; }
  80% { transform: translateY(0) scale(0.7); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
.animate__backInDown { animation-name: backInDown; }

@keyframes backInUp {
  0% { transform: translateY(1200px) scale(0.7); opacity: 0.7; }
  80% { transform: translateY(0) scale(0.7); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
.animate__backInUp { animation-name: backInUp; }

@keyframes backInLeft {
  0% { transform: translateX(-2000px) scale(0.7); opacity: 0.7; }
  80% { transform: translateX(0) scale(0.7); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
.animate__backInLeft { animation-name: backInLeft; }

@keyframes backInRight {
  0% { transform: translateX(2000px) scale(0.7); opacity: 0.7; }
  80% { transform: translateX(0) scale(0.7); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
.animate__backInRight { animation-name: backInRight; }

/* ------------------------------------------------------------------
   Attention Seekers
   ------------------------------------------------------------------ */
@keyframes bounce {
  from, 20%, 53%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); }
  40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0) scaleY(1.1); }
  70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0) scaleY(1.05); }
  80% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0) scaleY(0.95); }
  90% { transform: translate3d(0, -4px, 0) scaleY(1.02); }
}
.animate__bounce { animation-name: bounce; transform-origin: center bottom; }

@keyframes flash {
  from, 50%, to { opacity: 1; }
  25%, 75% { opacity: 0; }
}
.animate__flash { animation-name: flash; }

@keyframes pulse {
  from { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.05, 1.05, 1.05); }
  to { transform: scale3d(1, 1, 1); }
}
.animate__pulse { animation-name: pulse; animation-timing-function: ease-in-out; }

@keyframes rubberBand {
  from { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  to { transform: scale3d(1, 1, 1); }
}
.animate__rubberBand { animation-name: rubberBand; }

@keyframes shakeX {
  from, to { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}
.animate__shakeX { animation-name: shakeX; }

@keyframes shakeY {
  from, to { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -10px, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(0, 10px, 0); }
}
.animate__shakeY { animation-name: shakeY; }

@keyframes headShake {
  0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50% { transform: translateX(0); }
}
.animate__headShake { animation-timing-function: ease-in-out; animation-name: headShake; }

@keyframes swing {
  20% { transform: rotate3d(0, 0, 1, 15deg); }
  40% { transform: rotate3d(0, 0, 1, -10deg); }
  60% { transform: rotate3d(0, 0, 1, 5deg); }
  80% { transform: rotate3d(0, 0, 1, -5deg); }
  to { transform: rotate3d(0, 0, 1, 0deg); }
}
.animate__swing { transform-origin: top center; animation-name: swing; }

@keyframes tada {
  from { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to { transform: scale3d(1, 1, 1); }
}
.animate__tada { animation-name: tada; }

@keyframes wobble {
  from { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to { transform: translate3d(0, 0, 0); }
}
.animate__wobble { animation-name: wobble; }

@keyframes jello {
  from, 11.1%, to { transform: translate3d(0, 0, 0); }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
.animate__jello { animation-name: jello; transform-origin: center; }

@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
.animate__heartBeat { animation-name: heartBeat; animation-duration: calc(var(--animate-duration, 1s) * 1.3); animation-timing-function: ease-in-out; }

/* ------------------------------------------------------------------
   Specials (Flip, Rotate, Roll, LightSpeed)
   ------------------------------------------------------------------ */
@keyframes flip {
  from { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; }
  40% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; }
  50% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; }
  80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); animation-timing-function: ease-in; }
  to { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); animation-timing-function: ease-in; }
}
.animate__flip { backface-visibility: visible; animation-name: flip; }

@keyframes flipInX {
  from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
  40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to { transform: perspective(400px); }
}
.animate__flipInX { backface-visibility: visible !important; animation-name: flipInX; }

@keyframes flipInY {
  from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
  40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { transform: perspective(400px); }
}
.animate__flipInY { backface-visibility: visible !important; animation-name: flipInY; }

@keyframes lightSpeedInLeft {
  from { transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; }
  60% { transform: skewX(-20deg); opacity: 1; }
  80% { transform: skewX(5deg); }
  to { transform: translate3d(0, 0, 0); }
}
.animate__lightSpeedInLeft { animation-name: lightSpeedInLeft; animation-timing-function: ease-out; }

@keyframes lightSpeedInRight {
  from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
  60% { transform: skewX(20deg); opacity: 1; }
  80% { transform: skewX(-5deg); }
  to { transform: translate3d(0, 0, 0); }
}
.animate__lightSpeedInRight { animation-name: lightSpeedInRight; animation-timing-function: ease-out; }

@keyframes rotateIn {
  from { transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}
.animate__rotateIn { animation-name: rotateIn; transform-origin: center; }

@keyframes rollIn {
  from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__rollIn { animation-name: rollIn; }

/* ------------------------------------------------------------------
   Bounce Entrances
   ------------------------------------------------------------------ */
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}
.animate__bounceIn { animation-name: bounceIn; animation-duration: calc(var(--animate-duration, 1s) * 0.75); }

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(0.9); }
  75% { transform: translate3d(0, -10px, 0) scaleY(0.95); }
  90% { transform: translate3d(0, 5px, 0) scaleY(0.985); }
  to { transform: translate3d(0, 0, 0); }
}
.animate__bounceInDown { animation-name: bounceInDown; }

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(-10px, 0, 0) scaleX(0.98); }
  90% { transform: translate3d(5px, 0, 0) scaleX(0.995); }
  to { transform: translate3d(0, 0, 0); }
}
.animate__bounceInLeft { animation-name: bounceInLeft; }

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(10px, 0, 0) scaleX(0.98); }
  90% { transform: translate3d(-5px, 0, 0) scaleX(0.995); }
  to { transform: translate3d(0, 0, 0); }
}
.animate__bounceInRight { animation-name: bounceInRight; }

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); }
  60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(0.9); }
  75% { transform: translate3d(0, 10px, 0) scaleY(0.95); }
  90% { transform: translate3d(0, -5px, 0) scaleY(0.985); }
  to { transform: translate3d(0, 0, 0); }
}
.animate__bounceInUp { animation-name: bounceInUp; }

} /* end @layer utilities */