/* ================================================
   ELEVASI STUDIO — Animations CSS
   Initial states for GSAP + CSS transitions
   ================================================ */

/* ---- INITIAL STATES (GSAP will animate these) ---- */

/* Elements start invisible and slightly offset */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  /* GSAP ScrollTrigger will override these */
}

[data-reveal-left] {
  opacity: 0;
  transform: translateX(-28px);
}

[data-reveal-scale] {
  opacity: 0;
  transform: scale(0.96);
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
}

/* ---- HERO TITLE LINES ---- */
.hero-line {
  display: block;
  overflow: hidden;
}
.hero-line-inner {
  display: block;
  transform: translateY(100%);
  /* GSAP animates this to translateY(0) */
}

/* ---- NAVBAR ANIMATIONS ---- */
.navbar {
  animation: navbarFadeIn 1s var(--ease-out) 0.3s both;
}
@keyframes navbarFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- SCROLL PROGRESS INDICATOR ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 1px;
  background: rgba(240, 237, 230, 0.4);
  z-index: 2000;
  transform-origin: left;
  transform: scaleX(0);
  transition: none;
}

/* ---- SMOOTH IMAGE REVEAL ---- */
.img-reveal-wrapper {
  overflow: hidden;
  border-radius: inherit;
}
.img-reveal-inner {
  transform: scale(1.1);
  /* GSAP will animate to scale(1) */
}

/* ---- PROCESS CARD HOVER ---- */
.process-card {
  transition: background var(--duration-normal) var(--ease-smooth);
}
.process-card .process-num {
  transition: color var(--duration-normal) var(--ease-smooth),
              transform var(--duration-slow) var(--ease-spring);
}
.process-card:hover .process-num {
  color: var(--color-text-secondary);
  transform: translateX(4px);
}

/* ---- PHILOSOPHY CARD HOVER ---- */
.phil-card {
  transition: transform var(--duration-slow) var(--ease-out);
  cursor: default;
}
.phil-card:hover {
  transform: translateY(-4px);
}
.phil-card-img {
  transition: transform var(--duration-slow) var(--ease-out);
  overflow: hidden;
  border-radius: var(--radius-md);
}
.phil-card:hover .phil-card-img {
  transform: scale(1.02);
}

/* ---- NAV LINK HOVER UNDERLINE ---- */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text-secondary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-normal) var(--ease-smooth);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- CTA BUTTON PULSE ---- */
.cta-section .btn-primary {
  position: relative;
  overflow: hidden;
}
.cta-section .btn-primary::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: rgba(255,255,255,0.1);
  transform: scale(0);
  transition: transform var(--duration-slow) var(--ease-spring);
}
.cta-section .btn-primary:hover::after {
  transform: scale(1);
}

/* ---- TESTIMONIAL CARD REVEAL ---- */
.swiper-slide .testi-card {
  transition: transform var(--duration-slow) var(--ease-out),
              border-color var(--duration-normal) var(--ease-smooth),
              opacity var(--duration-normal);
}

/* ---- LOADING ANIMATION ---- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- CURSOR GLOW (premium touch) ---- */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,237,230,0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: opacity var(--duration-normal);
}

/* ---- SECTION DIVIDER ---- */
.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border), transparent);
  margin: 0 var(--container-pad);
}

/* ---- FADE IN UP (CSS fallback for no-JS) ---- */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    animation: fadeUp 0.8s var(--ease-out) both;
  }
  .fade-up-delay-1 { animation-delay: 0.1s; }
  .fade-up-delay-2 { animation-delay: 0.2s; }
  .fade-up-delay-3 { animation-delay: 0.3s; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- REDUCE MOTION PREFERENCE ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal],
  [data-reveal-left],
  [data-reveal-scale],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}