/* ==========================================
   GYWAN - Professional Sliding Animation System
   ========================================== */

/* 
   Core Scroll Reveal Class 
   Base state: Hidden and ready to slide.
   Using cubic-bezier for a sharp, premium "slide" feel.
*/
.scroll-reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
              transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000),
              filter 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  will-change: opacity, transform;
}

/* 
   The 'revealed' state
   Resets all transforms to their natural position.
*/
.scroll-reveal.revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0) skew(0);
  filter: blur(0);
}

/* --- Sliding Variants (Strong Movement) --- */

/* Slide Up (Standard Reveal) */
.scroll-reveal.slide-up {
  transform: translateY(100px);
}

/* Slide Down */
.scroll-reveal.slide-down {
  transform: translateY(-100px);
}

/* Slide Left (From Right to Left) */
.scroll-reveal.slide-left {
  transform: translateX(100px);
}

/* Slide Right (From Left to Right) */
.scroll-reveal.slide-right {
  transform: translateX(-100px);
}

/* 
   Legacy Fade Aliases 
   (Mapping old classes to new sliding behavior for partial backward compatibility 
   until HTML is fully updated, but forcing the stronger slide effect)
*/
.scroll-reveal.fade-up { transform: translateY(100px); }
.scroll-reveal.fade-down { transform: translateY(-100px); }
.scroll-reveal.fade-left { transform: translateX(100px); } /* Assuming visual logic: fade-left usually meant "appearing FROM right moving LEFT"? Or "appearing on Left"? Standard is usually "animate INTO position FROM offset". so fade-left usually means transform: translateX(-distance) if we want it to come FROM left.  Let's stick to standard naming: slide-right means "slide TO the right" or "enter FROM left".
   Wait, if I want element to appear to slide IN from the LEFT, it starts at translateX(-100px) and goes to 0.
   So:
   slide-right (visual movement: ->) starts at -100px.
   slide-left (visual movement: <-) starts at 100px.
   
   Let's check previous CSS:
   fade-left was translateX(-60px). -60 to 0 is moving RIGHT (->). 
   Wait. translateX(-60px) puts it to the left. When revealed (0), it moves RIGHT.
   Usually "fade-left" implies "fade IN FROM the left". So yes, starts at -60. 
   
   Let's ensure my new names are intuitive:
   slide-from-left: start at -100px.
   slide-from-right: start at 100px.
   slide-from-bottom: start at 100px. (slide-up)
   slide-from-top: start at -100px. (slide-down)
   
   I will use these descriptive names to be clear, and alias the old simple ones.
*/

.scroll-reveal.slide-from-left,
.scroll-reveal.slide-right /* Alias for similarity */ {
  transform: translateX(-100px);
}

.scroll-reveal.slide-from-right,
.scroll-reveal.slide-left /* Alias */ {
  transform: translateX(100px);
}

.scroll-reveal.slide-from-bottom,
.scroll-reveal.slide-up /* Alias */ {
  transform: translateY(100px);
}

.scroll-reveal.slide-from-top,
.scroll-reveal.slide-down /* Alias */ {
  transform: translateY(-100px);
}

/* Zoom Variants */
.scroll-reveal.zoom-in {
  transform: scale(0.85);
  opacity: 0;
}

.scroll-reveal.zoom-out {
  transform: scale(1.15);
  opacity: 0;
}

/* Blur Slide */
.scroll-reveal.blur-slide {
  transform: translateY(50px) scale(0.95);
  filter: blur(20px);
}

/* --- Stagger Delays --- */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; }

/* --- Interactions --- */
.hover-scale { transition: transform 0.3s ease; }
.hover-scale:hover { transform: scale(1.05); }

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}