/* CSS Animations System - Replace Framer Motion */

/* Circle Progress Animation */
@keyframes clock-animation {
  0% {
    stroke-dashoffset: 471;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Clock Colons Animation */
@keyframes colons-animation {
  50% {
    opacity: 0;
  }
}

/* Scrolling Text Animation */
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Page Transition Animations */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(80px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0.001px);
  }
}

/* Page Transition Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateZ(0.001px);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0.001px);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0.001px);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100px) translateZ(0.001px);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px) translateZ(0.001px);
  }
}

/* Page Transition Classes */
.page-enter {
  animation: slideInRight 0.5s ease-out forwards;
  transform: translateZ(0);
}

.page-exit {
  animation: slideOutLeft 0.5s ease-out forwards;
  transform: translateZ(0);
}

.page-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
  transform: translateZ(0);
  will-change: opacity;
}

.page-fade-out {
  animation: fadeOut 0.3s ease-out forwards;
  transform: translateZ(0);
  will-change: opacity;
}

/* Smooth timing functions */
.smooth-transition {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}

.smooth-fast {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}

/* Component specific animations */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
  transform: translateZ(0);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0.001px);
  }
}

.animate-fade-in-delay {
  animation: fadeIn 0.8s ease-out 0.3s both;
  transform: translateZ(0);
}

/* Scrolling Text Marquee Animation */
@keyframes scroll-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 10px 0;
}

.scrolling-text {
  font-size: 80px;
  color: #ae9142;
  font-family: ivymode, sans-serif;
  margin-top: 20rem;
  display: inline-block;
  white-space: nowrap;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Clock Colons Animation Class */
.colons {
  animation: colons-animation linear 2s infinite;
}