/* ============================================================
   IGS — Invoria Global Solutions
   animations.css  |  Keyframes · Reveals · Transitions
   ============================================================ */

/* ================================================================
   1. PRELOADER ANIMATIONS
   ================================================================ */
.preloader-letter {
  animation: letterReveal 0.65s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  animation-play-state: paused;
}

.preloader-letter:nth-child(1) { animation-delay: 0.1s; }
.preloader-letter:nth-child(2) { animation-delay: 0.28s; }
.preloader-letter:nth-child(3) { animation-delay: 0.46s; }

.preloader-started .preloader-letter {
  animation-play-state: running;
}

@keyframes letterReveal {
  to { clip-path: inset(0% 0 0 0); }
}

/* ================================================================
   2. HERO WORD REVEAL (index.html)
   ================================================================ */

/* Words start hidden via clip-path */
.hero-word {
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
  /* Safety fallback: reveal at 3s regardless of hero-animate class */
  animation: wordRevealFallback 0.01s 3s forwards;
}

@keyframes wordRevealFallback {
  to { clip-path: inset(0 0 0% 0); opacity: 1; }
}

/* Animation is triggered by JS adding .hero-animate to body */
.hero-animate .hero-word {
  animation: wordReveal 0.75s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Stagger each word */
.hero-animate .hero-word:nth-child(1) { animation-delay: 0.00s; }
.hero-animate .hero-word:nth-child(2) { animation-delay: 0.15s; }
.hero-animate .hero-word:nth-child(3) { animation-delay: 0.28s; }
.hero-animate .hero-word:nth-child(4) { animation-delay: 0.41s; }
.hero-animate .hero-word:nth-child(5) { animation-delay: 0.54s; }
.hero-animate .hero-word:nth-child(6) { animation-delay: 0.67s; }

@keyframes wordReveal {
  to { clip-path: inset(0 0 0% 0); }
}

/* Hero subtext and CTA fades */
.hero-animate .hero-brand {
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.1s;
}

.hero-animate .hero-tagline {
  animation: heroFadeUp 0.55s ease forwards;
  animation-delay: 0.35s;
}

.hero-animate .hero-sub {
  animation: heroFadeUp 0.7s ease forwards;
  animation-delay: 1.0s;
}

.hero-animate .hero-ctas {
  animation: heroFadeUp 0.7s ease forwards;
  animation-delay: 1.15s;
}

.hero-animate .scroll-indicator {
  animation: heroFadeIn 0.6s ease forwards;
  animation-delay: 1.4s;
}

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  to { opacity: 1; }
}

/* ================================================================
   2b. REVEAL (IntersectionObserver in core.js — Resn-style motion)
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  clip-path: inset(0 0 8% 0);
  transition:
    opacity 1s cubic-bezier(0.76, 0, 0.24, 1),
    transform 1s cubic-bezier(0.76, 0, 0.24, 1),
    clip-path 1s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: opacity, transform, clip-path;
}

.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0% 0);
}

.reveal-child {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.85s cubic-bezier(0.76, 0, 0.24, 1),
    transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: opacity, transform;
}

.reveal-child.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* GSAP card stagger owns entrance — never leave grid cards invisible */
:is(
  .why-grid,
  .offering-grid,
  .grid-3,
  .grid-4,
  .stats-grid,
  .testimonials-grid,
  .jobs-grid
) > :is(
  .why-card,
  .value-card,
  .offering-item,
  .persona-card,
  .team-card,
  .testimonial-card,
  .job-card,
  .stat-item,
  .service-full-card,
  .card,
  .reveal-child
) {
  opacity: 1;
  transform: none;
}

.why-row.reveal-child {
  opacity: 1;
  transform: none;
}

.reveal-child:nth-child(1) { transition-delay: 0ms; }
.reveal-child:nth-child(2) { transition-delay: 90ms; }
.reveal-child:nth-child(3) { transition-delay: 180ms; }
.reveal-child:nth-child(4) { transition-delay: 270ms; }
.reveal-child:nth-child(5) { transition-delay: 360ms; }
.reveal-child:nth-child(6) { transition-delay: 450ms; }
.reveal-child:nth-child(7) { transition-delay: 540ms; }
.reveal-child:nth-child(8) { transition-delay: 630ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-child {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* Subtle parallax targets (GSAP scrub in animations.js) */
[data-parallax-slow] {
  will-change: transform;
}

/* ================================================================
   3. SCROLL ANIMATIONS — GSAP-managed classes
   ================================================================ */

/* These elements start hidden; GSAP adds .visible */
.gsap-reveal {
  opacity: 0;
  transform: translateY(50px);
  will-change: opacity, transform;
}

.gsap-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  will-change: opacity, transform;
}

.gsap-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  will-change: opacity, transform;
}

.gsap-scale-in {
  opacity: 0;
  transform: scale(0.9);
  will-change: opacity, transform;
}

/* CSS fallback for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gsap-reveal,
  .gsap-reveal-left,
  .gsap-reveal-right,
  .gsap-scale-in {
    opacity: 1;
    transform: none;
  }
}

/* Contact page: main grid must never stay hidden if GSAP reveal classes are used */
.contact-layout .gsap-reveal-left,
.contact-layout .gsap-reveal-right {
  opacity: 1 !important;
  transform: none !important;
}

/* ================================================================
   4. SECTION LABEL — fade up (spacing fixed in global.css)
   ================================================================ */
.section-label.visible {
  letter-spacing: 0.14em;
}

/* ================================================================
   5. NAV ENTRY
   ================================================================ */
.site-nav {
  animation: navSlideDown 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ================================================================
   6. GLOW BREATH (hero background)
   ================================================================ */
@keyframes glowBreath {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.18); }
}

/* Alias for any references using glow-breathe */
@keyframes glow-breathe {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.18); }
}

@keyframes heroOpticGridDrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(64px, 48px, 0); }
}

@keyframes heroOpticDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-28px, 20px, 0) scale(1.06); }
}

@keyframes heroOpticDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(22px, -16px, 0) scale(1.05); }
}

@keyframes heroOpticSway {
  0%   { transform: rotate(-6deg); }
  100% { transform: rotate(7deg); }
}

@keyframes heroOpticArcDrift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(12px, -10px, 0) rotate(8deg); }
}

/* ================================================================
   7. SCROLL LINE PULSE (hero indicator)
   ================================================================ */
@keyframes scrollLinePulse {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* ================================================================
   8. BUTTON RIPPLE
   ================================================================ */
@keyframes rippleEffect {
  to {
    transform: scale(4.5);
    opacity: 0;
  }
}

/* ================================================================
   9. PAGE TRANSITION
   ================================================================ */
@keyframes slideInFromRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutToLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ================================================================
   10. SERVICE ROW REVEAL (stagger managed by GSAP)
   ================================================================ */
.service-row {
  will-change: transform, opacity;
}

/* Card / offering icons: always visible (no stroke-draw hide) */
:is(.why-grid, .grid-3, .grid-4, .value-grid) .card-icon svg,
:is(.why-grid, .grid-3, .grid-4, .value-grid) .card-icon svg *,
:is(.why-grid, .grid-3, .grid-4, .value-grid) .value-icon svg,
:is(.why-grid, .grid-3, .grid-4, .value-grid) .value-icon svg *,
.offering-grid .offering-icon svg,
.offering-grid .offering-icon svg path,
.offering-grid .offering-icon svg circle,
.offering-grid .offering-icon svg line,
.offering-grid .offering-icon svg polyline,
.offering-grid .offering-icon svg rect,
.offering-grid .offering-icon svg ellipse {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:is(.why-grid, .grid-3, .grid-4) .card-icon {
  color: var(--color-primary);
}

:is(.why-grid, .grid-3, .grid-4) .card-icon svg {
  color: var(--color-primary);
  stroke: currentColor;
}

/* ================================================================
   12. STAT PROGRESS LINE
   ================================================================ */
.stat-item {
  position: relative;
}

.stat-progress {
  width: 0;
  height: 2px;
  background: rgba(255,255,255,0.55);
  margin: 14px auto 0;
  border-radius: 2px;
  overflow: hidden;
  max-width: 80px;
  transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-item.counted .stat-progress {
  width: 80px;
}

/* ================================================================
   13. FOOTER REVEAL (columns stagger via GSAP)
   ================================================================ */
.footer-grid > * {
  will-change: transform, opacity;
}

/* ================================================================
   14. CARD ENTRANCE (managed by GSAP, CSS fallback)
   ================================================================ */
.why-card,
.value-card,
.testimonial-card,
.team-card,
.persona-card,
.offering-item {
  will-change: transform, opacity;
}

/* ================================================================
   16. IMAGE / ICON SCALE-IN (GSAP managed)
   ================================================================ */
.card-icon,
.value-icon,
.offering-icon {
  will-change: transform, opacity;
}

/* ================================================================
   17. FLOATING LABEL TRANSITION (via CSS, enhanced by JS)
   ================================================================ */
@keyframes labelFloat {
  to {
    top: 6px;
    font-size: 11px;
    color: var(--color-primary);
  }
}

/* ================================================================
   18. MOBILE DRAWER LINK STAGGER
   ================================================================ */
@keyframes drawerLinkIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ================================================================
   19. TESTIMONIAL CARD QUOTE MARK FLOAT
   ================================================================ */
@keyframes quoteFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.testimonial-card::before {
  animation: quoteFloat 4s ease-in-out infinite;
}