/* =====================================================================
   Stone Bridge — Motion / Animation Layer
   Subtle, purposeful motion only (per BRD: avoid excessive animation)
   ===================================================================== */

/* Elements are only hidden once JS confirms it will reveal them
   (.reveal-armed, added at runtime) — if JS fails or is slow, content
   stays visible by default. See assets/js/main.js for the safety-net
   timeout that force-reveals anything the observer ever misses. */
/* =====================================================================
   ADVANCED ANIMATION UTILITIES
   All effects are opt-in via data-attributes / classes and are disabled
   under prefers-reduced-motion further down this file.
   ===================================================================== */

/* ---------- Scroll progress indicator (reading position) ---------- */
.scroll-indicator {
  position: fixed; top: 0; left: 0; z-index: 9997;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  pointer-events: none;
}

/* ---------- Word-by-word heading reveal ---------- */
.word-reveal .wr-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.word-reveal .wr-inner {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .75s cubic-bezier(.2,.8,.25,1), opacity .75s ease;
  transition-delay: var(--wr-delay, 0s);
}
.word-reveal.in-view .wr-inner { transform: translateY(0); opacity: 1; }

/* ---------- Image mask reveal (clip-path wipe) ---------- */
.img-reveal { overflow: hidden; position: relative; }
.img-reveal img,
.img-reveal > .img-reveal-inner {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.12);
  transition: clip-path 1s cubic-bezier(.2,.8,.25,1), transform 1.3s cubic-bezier(.2,.8,.25,1);
}
.img-reveal.in-view img,
.img-reveal.in-view > .img-reveal-inner {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* ---------- Scroll parallax on images ---------- */
.parallax-wrap { overflow: hidden; }
.parallax-img {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.18);
}

/* ---------- Card sheen / shine sweep on hover ---------- */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: '';
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
  opacity: 0;
}
.sheen:hover::after {
  animation: sheenSweep .85s ease forwards;
}
@keyframes sheenSweep {
  0%   { left: -75%; opacity: 0; }
  12%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* ---------- Gradient border glow (feature emphasis) ---------- */
.glow-border { position: relative; }
.glow-border::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(130deg, var(--blue-400), transparent 40%, transparent 60%, var(--blue-300));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.glow-border:hover::before { opacity: 1; }

/* ---------- Icon pop on card hover ---------- */
.service-card .icon-badge,
.feature-item .icon-circle {
  transition: transform .35s cubic-bezier(.2,.8,.25,1), background .3s ease, color .3s ease;
}
.service-card:hover .icon-badge {
  transform: translateY(-3px) scale(1.06);
  background: var(--blue-500);
  color: var(--white);
}
.feature-item:hover .icon-circle {
  transform: translateY(-3px) scale(1.06);
  background: var(--blue-500);
  color: var(--white);
}

/* ---------- Underline sweep for text links ---------- */
.link-sweep { position: relative; }
.link-sweep::after {
  content: '';
  position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.2,.8,.25,1);
}
.link-sweep:hover::after { transform: scaleX(1); transform-origin: left; }

/* Hero load-in sequence: headline -> paragraph -> CTAs -> image -> trust
   indicators, each staggered. Runs once on page load, independent of
   scroll (the hero is always above the fold). */
@media (prefers-reduced-motion: no-preference) {
  .hero-anim {
    opacity: 0;
    animation: heroFadeUp .7s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .hero-anim-img { animation-name: heroFadeInImg; animation-duration: .8s; }
  .hero-anim-1 { animation-delay: .05s; }
  .hero-anim-2 { animation-delay: .18s; }
  .hero-anim-3 { animation-delay: .32s; }
  .hero-anim-4 { animation-delay: .46s; }
  .hero-anim-5 { animation-delay: .6s; }
  .hero-anim-6 { animation-delay: .7s; }
  .hero-anim-7 { animation-delay: .8s; }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeInImg {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-armed[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
    transition-delay: var(--reveal-delay, 0s);
  }
  [data-reveal].in-view {
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal-armed[data-reveal="scale"] { transform: scale(0.96); }
  .reveal-armed[data-reveal="left"] { transform: translateX(-28px); }
  .reveal-armed[data-reveal="right"] { transform: translateX(28px); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-float-card { animation: floatY 5s ease-in-out infinite; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.quote-step.active { animation: fadeInUp 0.4s ease; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}
.eyebrow::before { animation: pulseDot 2.2s ease-in-out infinite; }

/* count-up target used by main.js */
.stat-item strong[data-count] { font-variant-numeric: tabular-nums; }

/* skeleton shimmer for async-loading sections (progressive enhancement) */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #eef1f4 25%, #f8f9fb 37%, #eef1f4 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 8px;
}

/* =====================================================================
   REDUCED MOTION
   Anything decorative is neutralised, but nothing is left invisible or
   mid-transform — content must remain fully readable.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .word-reveal .wr-inner {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .img-reveal img,
  .img-reveal > .img-reveal-inner {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  .parallax-img { transform: none !important; }
  .sheen:hover::after { animation: none !important; opacity: 0 !important; }
  .service-card:hover .icon-badge,
  .feature-item:hover .icon-circle { transform: none !important; }
  .link-sweep::after { transition: none !important; }
  .hero-anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .eyebrow::before { animation: none !important; }
  .hero-float-card { animation: none !important; }
  .hero-chip { animation: none !important; }
  .trust-marquee-track { animation: none !important; }
  .scroll-indicator { transition: none !important; }
}