/* =============================================
   SHINE IT CARE — ANIMATIONS CSS
   ============================================= */

/* ---------- INITIAL HIDDEN STATES ---------- */
.split-text .char { opacity: 0; transform: translateY(60px) rotateX(-20deg); }
.fade-right { opacity: 0; transform: translateX(60px); }
.fade-up { opacity: 0; transform: translateY(40px); }
.fade-in { opacity: 0; }
.reveal-img { clip-path: inset(0 100% 0 0); }
.scale-in { opacity: 0; transform: scale(0.92); }
.tl-content { opacity: 0; }
.tl-right.tl-content { transform: translateX(40px); }
.tl-left.tl-content { transform: translateX(-40px); }
.industry-card { opacity: 0; transform: translateY(24px); }
.care-card { opacity: 0; transform: translateY(32px); }
.h-card { opacity: 0; transform: translateX(40px); }
.stat-item { opacity: 0; transform: translateY(20px); }
.testimonial-card { opacity: 0; transform: translateY(20px); }

/* ---------- ANIMATED STATES (added by JS) ---------- */
.split-text.anim-done .char {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-right.anim-done {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.anim-done {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.anim-done {
  opacity: 1;
  transition: opacity 0.6s ease;
}
.reveal-img.anim-done {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
.scale-in.anim-done {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.tl-content.anim-done {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.industry-card.anim-done {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.care-card.anim-done {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.h-card.anim-done {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stat-item.anim-done {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.testimonial-card.anim-done {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ---------- HERO INITIAL ANIMATIONS ---------- */
.hero-eyebrow {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFade 0.7s 0.2s ease forwards;
}
.hero-heading {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFade 0.8s 0.4s ease forwards;
}
.hero-sub {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFade 0.7s 0.6s ease forwards;
}
.hero-actions {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFade 0.7s 0.8s ease forwards;
}
.hero-trust {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFade 0.7s 1s ease forwards;
}
.hero-visual {
  opacity: 0;
  transform: translateX(40px);
  animation: heroSlideIn 1s 0.5s ease forwards;
}
.hero-image-showcase {
  opacity: 0;
  transform: scale(0.95);
  animation: heroImageIn 1.2s 0.6s ease forwards;
}
@keyframes heroImageIn {
  to { opacity: 1; transform: scale(1); }
}
.scroll-indicator {
  opacity: 0;
  animation: heroFade 0.8s 1.2s ease forwards;
}

@keyframes heroFade {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- TILT EFFECT ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(1000px);
}
[data-tilt] > * { transform: translateZ(20px); }

/* ---------- MAGNETIC BTN EFFECT ---------- */
.magnetic-btn { transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); }

/* ---------- LOADER ---------- */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--text);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
.loader-logo {
  font-family: 'Syne', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
}
.loader-logo span { color: #70951A; }
.loader-bar-wrap {
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.loader-bar {
  height: 100%;
  background: #70951A;
  border-radius: 2px;
  width: 0%;
  transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.loader-percent {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
}

/* ---------- SCROLLED NAV LINK STATES ---------- */
.navbar.scrolled .nav-link:hover {
  background: rgba(81, 113, 10, 0.08);
  color: var(--primary);
}
.navbar.scrolled .nav-link::after {
  background: var(--primary);
}

/* ---------- PAGE ENTRANCE ---------- */
body {
  animation: pageEntrance 0.6s ease forwards;
}
@keyframes pageEntrance {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- SECTION DIVIDER ANIMATION ---------- */
.section-divider {
  opacity: 0;
  animation: dividerReveal 1s ease forwards;
}
@keyframes dividerReveal {
  to { opacity: 0.5; }
}

/* ---------- WHY CARD ANIMATION ---------- */
.why-card {
  opacity: 0;
  transform: translateY(24px);
}
.why-card.anim-done {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}