/* ==========================================================================
   Home hero (white theme) — headline reveal + animated dashboard visual
   Entrance animations use fill-mode "backwards" so the resting 3D tilt and
   hover transforms in style.css still apply once they finish.
   ========================================================================== */

:root {
  --hero-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --------------------------------------------------------------------------
   1. Headline — word-by-word masked reveal
      (words are wrapped server-side by ipath_hero_split_words())
   -------------------------------------------------------------------------- */
.hero-title-anim .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for descenders (g, y, p) inside the mask */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.hero-title-anim .hw-i {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  transform-origin: 0 100%;
  opacity: 0;
  filter: blur(6px);
  animation: heroWordIn 1.5s var(--hero-ease) forwards;
  animation-delay: calc(0.3s + var(--i, 0) * 0.13s);
  will-change: transform, opacity, filter;
}

@keyframes heroWordIn {
  60% { filter: blur(0); }
  to {
    transform: translateY(0) rotate(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Subhead — words drift in softly once the headline is settling */
.hero-subhead-anim .hw-i {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  filter: blur(4px);
  animation: heroSubWordIn 1.1s var(--hero-ease) forwards;
  animation-delay: calc(1.5s + var(--i, 0) * 0.035s);
}

@keyframes heroSubWordIn {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* --------------------------------------------------------------------------
   2. Right visual — container glow + mouse parallax
   -------------------------------------------------------------------------- */
.white-theme .hero-right-visual .visual-container {
  --mx: 0;
  --my: 0;
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -8px), 0);
  transition: transform 0.6s var(--hero-ease);
}

.white-theme .hero-right-visual .visual-container::before {
  content: "";
  position: absolute;
  inset: 8% 10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0) 70%);
  filter: blur(20px);
  opacity: 0;
  animation: heroGlowIn 1.4s ease 0.6s forwards, heroGlowPulse 7s ease-in-out 2s infinite;
  pointer-events: none;
}

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

@keyframes heroGlowPulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.08; }
}

/* Parallax depth layers (individual "translate" keeps transform free) */
.white-theme .hero-dash-enter {
  translate: calc(var(--mx) * 6px) calc(var(--my) * 6px);
  transition: transform 0.5s ease, translate 0.6s var(--hero-ease);
}

/* --------------------------------------------------------------------------
   3. Dashboard window — 3D settle-in
   -------------------------------------------------------------------------- */
.white-theme .hero-dash-enter {
  animation: heroDashIn 1.3s var(--hero-ease) 0.35s backwards;
}

@keyframes heroDashIn {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(-28deg) rotateX(12deg) translate3d(60px, 40px, -80px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(-8deg) rotateX(4deg);
    filter: blur(0);
  }
}

/* SVG building blocks */
.hero-dash-enter .hv-fade {
  opacity: 0;
  animation: heroFade 0.7s ease forwards;
}

.hero-dash-enter .hv-side-1 { animation-delay: 0.9s; }
.hero-dash-enter .hv-side-2 { animation-delay: 1s; }
.hero-dash-enter .hv-side-3 { animation-delay: 1.1s; }
.hero-dash-enter .hv-side-4 { animation-delay: 1.2s; }
.hero-dash-enter .hv-card-1 { animation-delay: 1s; }
.hero-dash-enter .hv-card-2 { animation-delay: 1.12s; }
.hero-dash-enter .hv-card-3 { animation-delay: 1.24s; }

@keyframes heroFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Lines that draw themselves (paths use pathLength="1") */
.hero-dash-enter .hv-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: heroDraw 1.6s var(--hero-ease-soft) forwards;
}

.hero-dash-enter .hv-spark { animation-delay: 1.5s; animation-duration: 1.2s; }
.hero-dash-enter .hv-chart-line { animation-delay: 1.35s; }

@keyframes heroDraw { to { stroke-dashoffset: 0; } }

.hero-dash-enter .hv-chart-area {
  opacity: 0;
  animation: heroFade 1.2s ease 2.2s forwards;
}

/* Donut ring fills to its value */
.hero-dash-enter .hv-donut {
  stroke-dashoffset: 80;
  animation: heroDonut 1.4s var(--hero-ease) 1.6s forwards;
}

@keyframes heroDonut { to { stroke-dashoffset: 0; } }

/* Progress bar grows from the left */
.hero-dash-enter .hv-bar {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  animation: heroGrowX 1.2s var(--hero-ease) 1.7s forwards;
}

@keyframes heroGrowX { to { transform: scaleX(1); } }

/* Data points pop in, then pulse */
.hero-dash-enter .hv-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: heroPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-dash-enter .hv-dot-1 { animation-delay: 2.15s; }
.hero-dash-enter .hv-dot-2 { animation-delay: 2.75s; }

@keyframes heroPop { to { transform: scale(1); } }

.hero-dash-enter .hv-ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: heroRing 2.4s ease-out infinite;
}

.hero-dash-enter .hv-ring-1 { animation-delay: 2.4s; }
.hero-dash-enter .hv-ring-2 { animation-delay: 3s; }

@keyframes heroRing {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Live data packet travelling along the chart line */
.hero-dash-enter .hv-runner {
  offset-path: path("M 140 340 Q 190 280, 240 290 T 340 220 T 440 250 L 480 180");
  offset-rotate: 0deg;
  opacity: 0;
  animation: heroRun 4.5s var(--hero-ease-soft) 3.2s infinite;
}

@keyframes heroRun {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Notification badge */
.hero-dash-enter .hv-notify {
  transform-box: fill-box;
  transform-origin: center;
  animation: heroNotify 3s ease-in-out 2.5s infinite;
}

@keyframes heroNotify {
  0%, 70%, 100% { transform: scale(1); }
  78% { transform: scale(1.7); }
  86% { transform: scale(0.9); }
}

/* --------------------------------------------------------------------------
   4. Floating glass windows — fly-in, then gentle float
   -------------------------------------------------------------------------- */
.white-theme .hero-float-a {
  animation:
    heroWinInA 1.1s var(--hero-ease) 0.85s backwards,
    heroBob 6s ease-in-out 2s infinite;
}

.white-theme .hero-float-b {
  animation:
    heroWinInB 1.1s var(--hero-ease) 1.15s backwards,
    heroBob 7s ease-in-out 2.6s infinite reverse;
}

@keyframes heroWinInA {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(-20deg) rotateX(10deg) translate3d(-50px, -30px, 60px) scale(0.9);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(-8deg) rotateX(4deg) translateZ(15px);
    filter: blur(0);
  }
}

@keyframes heroWinInB {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(4deg) rotateX(-6deg) translate3d(50px, 40px, 80px) scale(0.9);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(-8deg) rotateX(4deg) translateZ(25px);
    filter: blur(0);
  }
}

@keyframes heroBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* Keep the 3D tilt on hover (style.css hover drops it) */
@media (min-width: 992px) {
  .white-theme .window-it.hero-float-a:hover {
    transform: perspective(1000px) rotateY(-4deg) rotateX(2deg) translateZ(40px) scale(1.03);
  }
  .white-theme .window-kpo.hero-float-b:hover {
    transform: perspective(1000px) rotateY(-4deg) rotateX(2deg) translateZ(50px) scale(1.03);
  }
}

/* Code window — lines type in, caret blinks */
.hero-float-a .code-line {
  clip-path: inset(0 100% 0 0);
  animation: heroType 0.55s steps(18, end) forwards;
}

.hero-float-a .code-line:nth-child(1) { animation-delay: 1.7s; }
.hero-float-a .code-line:nth-child(2) { animation-delay: 2.2s; }
.hero-float-a .code-line:nth-child(3) { animation-delay: 2.6s; }
.hero-float-a .code-line:nth-child(4) { animation-delay: 3s; }
.hero-float-a .code-line:nth-child(5) { animation-delay: 3.4s; }

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

.hero-float-a .code-line:last-child::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 1em;
  margin-left: 0.2em;
  vertical-align: -0.15em;
  background: #3b82f6;
  opacity: 0;
  animation: heroCaret 1s steps(1) 3.9s infinite;
}

@keyframes heroCaret {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

/* BPO window — SLA bar fills while the counter climbs */
.hero-float-b .progress-fill {
  transform-origin: left center;
  transform: scaleX(0);
  animation: heroGrowX 1.6s var(--hero-ease) 2s forwards;
  position: relative;
  overflow: hidden;
}

.hero-float-b .progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-100%);
  animation: heroShine 2.8s ease-in-out 3.8s infinite;
}

@keyframes heroShine {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

.hero-float-b .badge-status {
  opacity: 0;
  transform: translateY(6px);
  animation: heroBadge 0.6s var(--hero-ease) 3.4s forwards;
}

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

/* --------------------------------------------------------------------------
   5. Stats strip — plays when scrolled into view (JS adds .is-in)
   -------------------------------------------------------------------------- */
.hero-stats-anim,
.hero-stats-anim::after,
.hero-stats-anim .stats-strip-item,
.hero-stats-anim .stats-strip-icon {
  animation-play-state: paused !important;
}

.hero-stats-anim.is-in,
.hero-stats-anim.is-in::after,
.hero-stats-anim.is-in .stats-strip-item,
.hero-stats-anim.is-in .stats-strip-icon {
  animation-play-state: running !important;
}

.white-theme.hero-section-wrapper + .hero-stats-anim {
  overflow: hidden;
  animation: heroStatsIn 1s var(--hero-ease) 0.1s backwards;
}

@keyframes heroStatsIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    box-shadow: 0 0 0 rgba(27, 58, 92, 0);
  }
}

/* One-off light sweep across the card */
.hero-stats-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(59, 130, 246, 0.09) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
  animation: heroStatsSweep 1.6s var(--hero-ease-soft) 0.9s forwards;
}

@keyframes heroStatsSweep {
  to { transform: translateX(100%); }
}

.hero-stats-anim .stats-strip-item {
  animation: heroStatItem 0.9s var(--hero-ease) backwards;
  animation-delay: calc(0.35s + var(--i, 0) * 0.12s);
}

@keyframes heroStatItem {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
  }
}

.hero-stats-anim .stats-strip-icon {
  animation:
    heroIconPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    heroIconRing 1.2s ease-out forwards;
  animation-delay:
    calc(0.5s + var(--i, 0) * 0.12s),
    calc(0.9s + var(--i, 0) * 0.12s);
  transition: transform 0.35s var(--hero-ease);
}

@keyframes heroIconPop {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-35deg);
  }
}

@keyframes heroIconRing {
  0% { box-shadow: 0 0 0 0 currentColor; }
  100% { box-shadow: 0 0 0 14px transparent; }
}

.hero-stats-anim .stats-strip-number {
  font-variant-numeric: tabular-nums;
}

.hero-stats-anim .stats-strip-item:hover .stats-strip-icon {
  transform: translateY(-3px) scale(1.08);
}

/* --------------------------------------------------------------------------
   6. Responsive + reduced motion
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .white-theme .hero-float-a,
  .white-theme .hero-float-b {
    animation: heroFadeUp 0.9s var(--hero-ease) 0.6s backwards;
  }
  .white-theme .hero-dash-enter {
    animation: heroFadeUp 0.9s var(--hero-ease) 0.3s backwards;
    translate: none;
  }
  .white-theme .hero-right-visual .visual-container {
    transform: none;
  }
}

@keyframes heroFadeUp {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

/* Reduced motion: keep the reveal (fades, line draws, fills, typing) but drop
   movement — no sliding words, 3D fly-ins, floating, parallax or loops. */
@keyframes heroWordFade {
  to { opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-anim .hw-i {
    transform: none;
    filter: blur(3px);
    animation-name: heroWordFade;
    animation-duration: 1.4s;
  }
  .hero-subhead-anim .hw-i {
    transform: none;
    animation-name: heroWordFade;
  }
  .white-theme.hero-section-wrapper + .hero-stats-anim,
  .hero-stats-anim .stats-strip-item,
  .hero-stats-anim .stats-strip-icon {
    animation-name: heroFade;
  }
  .hero-stats-anim::after { display: none; }
  .white-theme .hero-dash-enter,
  .white-theme .hero-float-a,
  .white-theme .hero-float-b {
    animation: heroFade 1s ease 0.4s backwards;
    translate: none;
  }
  .white-theme .hero-float-b { animation-delay: 0.7s; }
  .white-theme .hero-right-visual .visual-container {
    transform: none;
  }
  .white-theme .hero-right-visual .visual-container::before {
    animation: heroGlowIn 1.4s ease 0.6s forwards;
  }
  .hero-dash-enter .hv-runner,
  .hero-dash-enter .hv-ring { display: none; }
  .hero-dash-enter .hv-notify,
  .hero-float-a .code-line:last-child::after,
  .hero-float-b .progress-fill::after { animation: none; }
}