/* ==========================================================
   CALA CREATIVE AGENCY — Animation System
   ========================================================== */

/* ==========================================================
   KEYFRAMES
   ========================================================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lineGrow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes counterUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes widthExpand {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* Hero headline letter reveal */
@keyframes letterReveal {
  from {
    opacity: 0;
    transform: translateY(60%) rotate(3deg);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0);
  }
}

/* Page enter transition */
@keyframes pageEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Marquee scroll */
@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================
   PAGE LOAD
   ========================================================== */

.page-fade-in {
  animation: pageEnter var(--dur-slower) var(--ease-out) both;
}

/* Initial nav slide-down */
.nav-animate {
  animation: slideDown 0.6s var(--ease-out) 0.1s both;
}

/* ==========================================================
   SCROLL REVEAL — Base States & Fail-Safe Visibility
   ========================================================== */

@keyframes failSafeReveal {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Elements start with smooth fade-in animation and fallback to visible */
.reveal,
.reveal-fade,
.reveal-left,
.reveal-right,
.reveal-scale,
.stagger-child {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
  animation: failSafeReveal 0.6s var(--ease-out) 0.3s forwards;
}

.reveal {
  transform: translateY(40px);
}

.reveal.revealed,
.reveal-fade.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed,
.stagger.revealed .stagger-child {
  opacity: 1 !important;
  transform: none !important;
}

/* Slide from left */
.reveal-left {
  transform: translateX(-40px);
}

/* Slide from right */
.reveal-right {
  transform: translateX(40px);
}

/* Scale in */
.reveal-scale {
  transform: scale(0.92);
}

/* ==========================================================
   STAGGER CHILDREN
   ========================================================== */

.stagger .stagger-child:nth-child(1) {
  transition-delay: 0.05s;
}

.stagger .stagger-child:nth-child(2) {
  transition-delay: 0.12s;
}

.stagger .stagger-child:nth-child(3) {
  transition-delay: 0.19s;
}

.stagger .stagger-child:nth-child(4) {
  transition-delay: 0.26s;
}

.stagger .stagger-child:nth-child(5) {
  transition-delay: 0.33s;
}

.stagger .stagger-child:nth-child(6) {
  transition-delay: 0.4s;
}

.stagger .stagger-child:nth-child(7) {
  transition-delay: 0.47s;
}

.stagger .stagger-child:nth-child(8) {
  transition-delay: 0.54s;
}

.stagger-child {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}

.stagger.revealed .stagger-child {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================
   HERO SECTION ANIMATIONS
   ========================================================== */

.hero-label {
  animation: fadeIn 0.8s var(--ease-out) 0.3s both;
}

.hero-headline .word {
  display: inline-block;
  overflow: hidden;
}

.hero-headline .word-inner {
  display: inline-block;
  animation: letterReveal 0.9s var(--ease-out) both;
}

.hero-headline .word:nth-child(1) .word-inner {
  animation-delay: 0.4s;
}

.hero-headline .word:nth-child(2) .word-inner {
  animation-delay: 0.55s;
}

.hero-headline .word:nth-child(3) .word-inner {
  animation-delay: 0.7s;
}

.hero-headline .word:nth-child(4) .word-inner {
  animation-delay: 0.85s;
}

.hero-headline .word:nth-child(5) .word-inner {
  animation-delay: 1s;
}

.hero-sub {
  animation: fadeUp 0.9s var(--ease-out) 1s both;
}

.hero-ctas {
  animation: fadeUp 0.9s var(--ease-out) 1.15s both;
}

.hero-image-wrap {
  animation: scaleIn 1.2s var(--ease-out) 0.2s both;
}

/* Floating badge */
.hero-badge {
  animation: float 6s ease-in-out infinite;
}

/* ==========================================================
   COUNTER ANIMATION
   ========================================================== */

.counter-num {
  display: inline-block;
  animation: counterUp 0.7s var(--ease-out) both;
}

/* ==========================================================
   MARQUEE / LOGO SCROLL
   ========================================================== */

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-wrap {
  overflow: hidden;
}

/* ==========================================================
   PARALLAX
   ========================================================== */

.parallax-el {
  will-change: transform;
}

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

/* Image scale on hover */
.img-hover-zoom {
  overflow: hidden;
}

.img-hover-zoom img,
.img-hover-zoom .img-inner {
  transition: transform 0.7s var(--ease-out);
}

.img-hover-zoom:hover img,
.img-hover-zoom:hover .img-inner {
  transform: scale(1.04);
}

/* Underline reveal on hover */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentcolor;
  transition: width 0.35s var(--ease-out);
}

.link-underline:hover::after {
  width: 100%;
}

/* Nav link underline from center */
.nav-link-animated {
  position: relative;
}

.nav-link-animated::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--green);
  transition:
    left 0.3s var(--ease-out),
    right 0.3s var(--ease-out);
}

.nav-link-animated:hover::after,
.nav-link-animated.active::after {
  left: 0;
  right: 0;
}

/* ==========================================================
   PREFERS REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-fade,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-child {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-headline .word-inner,
  .hero-label,
  .hero-sub,
  .hero-ctas,
  .hero-image-wrap {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* New hero reveal elements */
  .hero-intro,
  .hero-scan {
    display: none !important;
  }

  .hero-line-inner {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .hero-corner,
  .hero-metrics,
  .hero-cta-group,
  .hero-grain {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}