/* ==========================================================================
   AURELIA UNIVERSITY - ANIMATIONS STYLESHEET
   Author: Senior Frontend Developer / UI Designer
   Description: Performance-optimized subtle keyframes and classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAMES
   -------------------------------------------------------------------------- */

/* Entrance Page Loader */
@keyframes loaderLogoReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loaderProgress {
  0% {
    width: 0%;
  }
  50% {
    width: 60%;
  }
  100% {
    width: 100%;
  }
}

/* Hero Headline Text Reveal (Slide up from mask) */
@keyframes revealText {
  0% {
    transform: translateY(105%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Scroll Indicators */
@keyframes scrollLineLoop {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Fade In and Slide Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Image Reveal Mask */
@keyframes imageReveal {
  from {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* Subtly Float Elements */
@keyframes floatY {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* --------------------------------------------------------------------------
   2. SCROLL REVEAL UTILITIES
   -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Delay modifiers */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Asymmetric Photo Entrance Mask */
.image-reveal-on-scroll {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: clip-path;
}

.image-reveal-on-scroll.revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Text Masking Classes */
.text-mask {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}

.text-mask-child {
  display: inline-block;
  transform: translateY(105%);
  animation: revealText 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.text-mask:nth-child(2) .text-mask-child {
  animation-delay: 0.15s;
}
.text-mask:nth-child(3) .text-mask-child {
  animation-delay: 0.3s;
}

/* Parallax-style slow motion (controlled by JS scroll offset) */
.parallax-bg {
  transform: translateY(0);
  transition: transform 0.1s linear;
  will-change: transform;
}

/* Smooth zoom on images */
.zoom-on-hover {
  overflow: hidden;
}

.zoom-on-hover img {
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.zoom-on-hover:hover img {
  transform: scale(1.05);
}

/* Subtle float decoration */
.floating-element {
  animation: floatY 6s ease-in-out infinite;
}