/* ================================================================
   animations.css — Animation States & Keyframes
   Initial states for GSAP ScrollTrigger reveals
   ================================================================ */

/* ── Reveal (fade up) ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(60px);
}

/* ── Split Heading chars (SplitType) ───────────────────────────── */
.split-heading .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px);
}
.split-heading .word {
  display: inline-block;
  overflow: hidden;
}

/* ── Split Fade words (SplitType) ──────────────────────────────── */
.split-fade .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

/* ── Scale Enter ───────────────────────────────────────────────── */
.scale-enter {
  opacity: 0;
  transform: scale(0.96);
}

/* ── Image Reveal (clip-path wipe) ─────────────────────────────── */
.img-reveal {
  clip-path: inset(100% 0 0 0);
}

/* ── Image Zoom on hover ───────────────────────────────────────── */
.img-zoom {
  transition: transform 0.6s var(--ease-expo);
}
.img-zoom:hover {
  transform: scale(1.05);
}

/* ── Parallax ──────────────────────────────────────────────────── */
.parallax-container {
  overflow: hidden;
  position: relative;
}
.parallax-img {
  will-change: transform;
}

/* ── Stagger children ──────────────────────────────────────────── */
.stagger > * {
  opacity: 0;
  transform: translateY(40px);
}

/* ── Hero Page Handcrafted Animation Initial States ─────────────── */
#hero-body,
#hero-body-2,
#hero-ctas,
#hero-caption,
.hero-badge {
  opacity: 0;
}
#hero-img {
  opacity: 0;
  transform: scale(1.05);
}

/* ── Case Study Detail Parallax Image Initial Scale ────────────── */
.cs-img {
  transform: scale(1.05);
  will-change: transform;
}

/* ── EXPERTISE ICON ANIMATIONS ──────────────────────────────────── */
.icon-animated-systems svg {
  animation: icon-stack-rotate 6s ease-in-out infinite;
}
@keyframes icon-stack-rotate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%  { transform: translateY(-3px) rotate(3deg); }
  66%  { transform: translateY(0) rotate(-2deg); }
}

.icon-animated-ai svg {
  animation: icon-ai-spin 8s linear infinite;
}
@keyframes icon-ai-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.icon-animated-onboarding svg {
  animation: icon-slide-in 4s ease-in-out infinite;
}
@keyframes icon-slide-in {
  0%, 100% { transform: translateX(0); }
  40%  { transform: translateX(3px); }
  60%  { transform: translateX(-2px); }
}

.icon-animated-leadership svg {
  animation: icon-grow-people 5s ease-in-out infinite;
}
@keyframes icon-grow-people {
  0%, 100% { transform: scale(1); }
  40%  { transform: scale(1.08) translateY(-2px); }
  80%  { transform: scale(0.97) translateY(1px); }
}

/* ── SECTION STAT COUNTER ANIMATION ─────────────────────────────── */
@keyframes count-up-glow {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.stat__number { animation: none; }
.stat__number.is-visible { animation: count-up-glow 0.6s var(--ease-expo) forwards; }

/* ── SCROLL REVEAL VARIANTS ──────────────────────────────────────── */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

/* ── HERO H1 WORD CLIP INITIAL STATE ─────────────────────────────── */
.hero-h1-word {
  display: inline-block;
  overflow: hidden;
}
.hero-h1-word > * {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
}

/* ── STAGGERED PAGE TRANSITIONS ─────────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}
.transition-panel {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
}
.transition-panel--orange {
  background: var(--orange);
  z-index: 201;
}
.transition-panel--peach {
  background: #FFEDD5; /* Peach */
  z-index: 202;
}
.transition-panel--white {
  background: var(--bg);
  z-index: 203;
}