/* ==========================================================================
   SNTTI — PREMIUM ANIMATION SYSTEM
   Senior UI/UX Grade: Soft, Elegant, Refined, Luxurious
   GPU-accelerated only: opacity, transform (translateY/X, scale)
   Easing: cubic-bezier(0.22, 1, 0.36, 1)
   Durations: 0.5s to 0.85s  |  Stagger: 60-80ms
   ========================================================================== */

:root {
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-xs: 0.3s;
  --dur-sm: 0.5s;
  --dur-md: 0.65s;
  --dur-lg: 0.8s;
  --dur-xl: 1.1s;
}

/* 1. SCROLL REVEAL */
.animate-on-scroll {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--dur-lg) var(--ease-premium),
    transform var(--dur-lg) var(--ease-premium);
}
.animate-on-scroll.fade-up    { transform: translateY(32px); }
.animate-on-scroll.fade-down  { transform: translateY(-24px); }
.animate-on-scroll.fade-left  { transform: translateX(36px); }
.animate-on-scroll.fade-right { transform: translateX(-36px); }
.animate-on-scroll.zoom-in    { transform: scale(0.94) translateY(16px); }
.animate-on-scroll.stagger-up {
  transform: translateY(24px);
  transition-delay: calc(var(--stagger-index, 1) * 0.08s);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger & Transition Delay Helpers */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }

/* 2. IMAGE REVEAL */
.editorial-collage-grid .collage-img,
.card-image-box .card-img,
.pl-img-frame img,
.why-image-wrapper img {
  transition: transform 0.9s var(--ease-premium), filter 0.6s ease;
  will-change: transform;
}
.collage-item:hover .collage-img,
.pl-img-frame:hover img,
.why-image-wrapper:hover img { transform: scale(1.04); }
.animate-on-scroll .collage-img,
.animate-on-scroll .card-img {
  transform: scale(1.06);
  transition: transform 1.1s var(--ease-premium);
}
.animate-on-scroll.is-visible .collage-img,
.animate-on-scroll.is-visible .card-img { transform: scale(1); }

/* 3. HERO - Ken Burns */
@keyframes kenBurns {
  0%   { transform: scale(1.00) translate3d(0%, 0%, 0); }
  50%  { transform: scale(1.06) translate3d(-1%, -0.5%, 0); }
  100% { transform: scale(1.00) translate3d(0%, 0%, 0); }
}
@keyframes kenBurnsAlt {
  0%   { transform: scale(1.00) translate3d(0%, 0%, 0); }
  50%  { transform: scale(1.05) translate3d(0.8%, 0.4%, 0); }
  100% { transform: scale(1.00) translate3d(0%, 0%, 0); }
}
.hero-carousel .carousel-item.active img {
  animation: kenBurns 12s var(--ease-gentle) infinite;
  will-change: transform;
}
.hero-carousel .carousel-item:nth-child(2).active img {
  animation: kenBurnsAlt 14s var(--ease-gentle) infinite;
}

/* Hero text entrance */
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge-label  { animation: heroTextIn 0.7s var(--ease-premium) 0.2s both; }
.hero-title        { animation: heroTextIn 0.8s var(--ease-premium) 0.35s both; }
.hero-paragraph    { animation: heroTextIn 0.7s var(--ease-premium) 0.52s both; }
.hero-buttons-group{ animation: heroTextIn 0.65s var(--ease-premium) 0.65s both; }

/* 4. CARD HOVER - Lift 6-8px */
.course-showcase-card {
  transition:
    transform var(--dur-sm) var(--ease-premium),
    box-shadow var(--dur-sm) var(--ease-premium),
    border-color var(--dur-sm) ease !important;
}
.course-showcase-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 24px 52px rgba(90, 29, 22, 0.16) !important;
}
.why-feature-card {
  transition:
    transform var(--dur-sm) var(--ease-premium),
    box-shadow var(--dur-sm) var(--ease-premium),
    background-color var(--dur-sm) ease;
}
.why-feature-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(0,0,0,0.18); }
.pl-card {
  transition:
    transform var(--dur-sm) var(--ease-premium),
    box-shadow var(--dur-sm) var(--ease-premium);
}
.pl-card:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(90,29,22,0.10); }
.collage-item {
  transition:
    transform var(--dur-sm) var(--ease-premium),
    box-shadow var(--dur-sm) var(--ease-premium);
}
.collage-item:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 20px 50px rgba(90,29,22,0.14);
  z-index: 2;
  position: relative;
}

/* 5. BUTTON HOVER */
.btn-hero-primary,
.btn-hero-secondary,
.btn-consultation,
.btn-mobile-consultation,
.courses-view-all-cta,
.btn-gold-pill,
.btn-dark-pill {
  transition:
    transform var(--dur-xs) var(--ease-premium),
    box-shadow var(--dur-xs) var(--ease-premium),
    background-color var(--dur-xs) ease,
    border-color var(--dur-xs) ease,
    color var(--dur-xs) ease !important;
}
.btn-hero-primary:hover,
.btn-consultation:hover { transform: translateY(-3px) scale(1.02) !important; }
.btn-hero-secondary:hover { transform: translateY(-2px) scale(1.01) !important; }
.btn-mobile-consultation:hover { transform: translateY(-2px) !important; }
.courses-view-all-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.courses-cta-arrow { transition: transform var(--dur-xs) var(--ease-premium); }
.courses-view-all-cta:hover .courses-cta-arrow { transform: translateX(5px); }

/* 6. ICON MICRO-ANIMATIONS */
.why-icon-box, .pl-icon {
  transition: transform var(--dur-sm) var(--ease-premium);
}
.why-feature-card:hover .why-icon-box,
.pl-card:hover .pl-icon { transform: scale(1.08) rotate(4deg); }
.card-action-link i {
  transition: transform var(--dur-xs) var(--ease-premium);
  display: inline-block;
}
.card-action-link:hover i { transform: translateX(5px); }
.mobile-social-icon {
  transition:
    transform var(--dur-xs) var(--ease-premium),
    background-color var(--dur-xs) ease,
    border-color var(--dur-xs) ease,
    color var(--dur-xs) ease;
}
.mobile-social-icon:hover { transform: translateY(-3px) scale(1.08); }
.hero-side-btn {
  transition:
    transform var(--dur-xs) var(--ease-premium),
    background-color var(--dur-xs) ease,
    box-shadow var(--dur-xs) ease !important;
}

/* 7. FORM FOCUS GLOW */
.luxury-form-input,
.luxury-form-select,
.luxury-form-textarea,
.contact-input,
.contact-textarea,
.contact-select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  transition:
    border-color var(--dur-xs) var(--ease-gentle),
    box-shadow var(--dur-xs) var(--ease-gentle),
    background-color var(--dur-xs) ease !important;
}
.luxury-form-input:focus,
.luxury-form-select:focus,
.luxury-form-textarea:focus,
.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus,
.form-control-luxury-input:focus,
.form-control-luxury:focus {
  box-shadow: 0 0 0 3px rgba(233,177,58,0.18), 0 2px 12px rgba(233,177,58,0.1) !important;
  outline: none !important;
}

/* 8. NAVBAR */
.custom-navbar {
  transition:
    background-color var(--dur-sm) var(--ease-gentle),
    box-shadow var(--dur-sm) var(--ease-gentle) !important;
}
.nav-link { transition: color var(--dur-xs) ease, opacity var(--dur-xs) ease !important; }

/* 9. MARQUEE CARDS HOVER & TOUCH SUPPORT */
.marquee-container {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* Allows vertical page scroll while swiping horizontally */
}
.marquee-container:active {
  cursor: grabbing;
}
.marquee-track {
  will-change: transform;
}
.marquee-track .testi-card {
  transition:
    transform var(--dur-sm) var(--ease-premium),
    box-shadow var(--dur-sm) var(--ease-premium);
}
.marquee-track .testi-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 44px rgba(90,29,22,0.13);
}
/* 10. COURSE NAV BUTTONS */
.courses-nav-btn {
  transition:
    transform var(--dur-xs) var(--ease-premium),
    background-color var(--dur-xs) ease,
    border-color var(--dur-xs) ease,
    color var(--dur-xs) ease;
}
.courses-nav-btn:hover  { transform: scale(1.08); }
.courses-nav-btn:active { transform: scale(0.95); }

/* 11. MODAL */
.modal.fade .modal-dialog {
  transform: scale(0.97) translateY(12px);
  transition:
    transform var(--dur-md) var(--ease-premium),
    opacity var(--dur-md) ease !important;
}
.modal.show .modal-dialog { transform: scale(1) translateY(0); }

/* 12. COLLAGE STAGGER */
.animate-on-scroll.is-visible .collage-item:nth-child(1) { transition-delay: 0.00s; }
.animate-on-scroll.is-visible .collage-item:nth-child(2) { transition-delay: 0.08s; }
.animate-on-scroll.is-visible .collage-item:nth-child(3) { transition-delay: 0.16s; }
.animate-on-scroll.is-visible .collage-item:nth-child(4) { transition-delay: 0.24s; }

/* 13. PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
  *:not(.marquee-left):not(.marquee-right), 
  *::before, 
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll { opacity: 1 !important; transform: none !important; }
  .hero-carousel .carousel-item img { animation: none !important; }
}

/* 14. MOBILE - Simplify */
@media (max-width: 767.98px) {
  .animate-on-scroll { transition-duration: 0.5s; }
  .hero-carousel .carousel-item img { animation: none !important; }
  .course-showcase-card:hover,
  .why-feature-card:hover,
  .pl-card:hover,
  .visiting-step-card:hover { transform: none !important; }
  .btn-hero-primary:hover,
  .btn-consultation:hover,
  .btn-hero-secondary:hover,
  .btn-hero-call:hover,
  .btn-hero-outline:hover,
  .btn-luxury-submit:hover { transform: none !important; }
}

/* 15. SNTTI CONTACT PAGE ANIMATIONS */
.btn-hero-call,
.btn-hero-outline,
.btn-luxury-submit {
  transition:
    transform var(--dur-xs) var(--ease-premium),
    box-shadow var(--dur-xs) var(--ease-premium),
    background-color var(--dur-xs) ease,
    border-color var(--dur-xs) ease,
    color var(--dur-xs) ease !important;
}
.btn-hero-call:hover,
.btn-luxury-submit:hover {
  transform: translateY(-3px) scale(1.02) !important;
}
.btn-hero-outline:hover {
  transform: translateY(-2px) scale(1.01) !important;
}

.visiting-step-card {
  transition:
    transform var(--dur-sm) var(--ease-premium),
    box-shadow var(--dur-sm) var(--ease-premium),
    border-color var(--dur-sm) ease,
    background-color var(--dur-sm) ease !important;
}
.visiting-step-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(90, 29, 22, 0.08) !important;
}
.visiting-step-card i {
  transition: transform var(--dur-sm) var(--ease-premium) !important;
}
.visiting-step-card:hover i {
  transform: scale(1.1) rotate(6deg) !important;
}