/**
 * ============================================================================
 * LEARN WITH JC — LUXURY SMOOTH SCROLLING & GSAP REVEAL ANIMATIONS
 * Modern smooth momentum scroll (Lenis) + GSAP ScrollTrigger section-by-section
 * reveals, unique image portal reveals, 3D tilt depth, and floating ambient effects.
 * ============================================================================
 */

/* ----------------------------------------------------------------------------
   1. PAGE-TO-PAGE SMOOTH TRANSITIONS
   ---------------------------------------------------------------------------- */
.page-transition-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #1f5038, #cca34b, #dfb96c);
  z-index: 9999999;
  pointer-events: none;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

body.page-is-exiting .page-transition-progress {
  width: 100% !important;
}

body {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-is-exiting {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
}

/* ----------------------------------------------------------------------------
   2. LENIS SMOOTH SCROLL REQUIRED STYLES
   ---------------------------------------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   3. MODERN UNIQUE IMAGE REVEAL & 3D DEPTH STYLES
   ---------------------------------------------------------------------------- */
.gsap-reveal-wrap {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 100%;
}

.gsap-parallax-img {
  will-change: transform;
  transform: translateZ(0);
}

/* Luxury 3D Perspective Photo Frames */
.approach-photo-frame,
.community-photo-frame,
.about-arch-frame,
.journey-pebble-frame,
.why-circle-frame,
.course-photo-wrapper {
  overflow: hidden !important;
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}

.approach-photo-img,
.community-photo-img,
.about-arch-img,
.journey-pebble-img,
.why-student-photo,
.course-photo,
.hero-student-img {
  will-change: transform;
  transform: translateZ(0);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Subtle image scale depth on hover */
.approach-photo-frame:hover .approach-photo-img,
.community-photo-frame:hover .community-photo-img,
.about-arch-frame:hover .about-arch-img,
.journey-pebble-frame:hover .journey-pebble-img,
.why-circle-frame:hover .why-student-photo,
.course-card:hover .course-photo {
  transform: scale(1.08) !important;
}

/* Floating Badges with Drop Shadow */
.approach-badge-gold,
.journey-badge-gold,
.about-badge-circle,
.why-crown-badge {
  will-change: transform;
  filter: drop-shadow(0 12px 24px rgba(11, 38, 25, 0.22));
}

/* Hero Visual Enhancements */
.hero-visual-wrapper {
  perspective: 1000px;
}

.hero-student-img {
  will-change: transform, opacity;
  transform-origin: bottom center;
}

.stat-badge {
  will-change: transform;
  transition: box-shadow 0.3s ease;
}

.stat-badge:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
}

/* Why JC Section Enhancements */
.why-card {
  will-change: transform, opacity;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease !important;
}

.why-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
}

/* Course Cards Enhancements */
.course-card {
  will-change: transform, opacity;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease !important;
}

.course-card:hover {
  transform: translateY(-8px) !important;
}

.course-photo-wrapper {
  overflow: hidden;
}

/* About Section Visuals */
.about-student-card {
  will-change: transform, opacity;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.about-student-card:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 16px 32px rgba(11, 38, 25, 0.22) !important;
}

/* Testimonial Story Cards */
.story-main-card {
  will-change: transform, opacity;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

/* GUARANTEE: The quote text inside the testimonial card is always 100% visible */
.story-text-quote,
#storyQuoteText {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.story-preview-item {
  will-change: transform, opacity;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease !important;
}

.story-preview-item:hover {
  transform: translateX(-4px) !important;
}

/* Footer Enhancements */
.footer-social-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease !important;
}

.footer-social-btn:hover {
  transform: translateY(-4px) scale(1.12) !important;
}

/* Back to Top Smooth Button */
#backToTopBtn {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#backToTopBtn:hover {
  transform: translateY(-4px) scale(1.08) !important;
}

/* Accessibility: Respect Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}