/* =====================================================================
   sbipay.online – shared animation layer
   Loaded AFTER each page's own <style> blocks so it can calmly override
   the old one-shot load animations. Everything here is progressive:
   if animations.js doesn't run, the page simply shows normally.
   Individual transform properties (translate / scale / rotate) are used
   so nothing here fights with the pages' own `transform` rules.
   ===================================================================== */

/* ---------- 1. Hero: hidden for a split second until JS has queued the intro ---------- */
.gx-js :is(.hero-section, header.hero, .sp-hero, .terms-hero-section) {
  visibility: hidden;
  animation: gxFailsafe 0s linear 2.2s forwards;      /* if JS never runs, show anyway */
}
.gx-js.gx-ready :is(.hero-section, header.hero, .sp-hero, .terms-hero-section) {
  visibility: visible;
  animation: none;
}
@keyframes gxFailsafe { to { visibility: visible; } }

/* ---------- 2. Scroll "grow" reveal: pre-state ---------- */
html .gx.gx { opacity: 0; will-change: opacity, translate, scale; }

/* Old per-page load animations would play off-screen; scroll reveal replaces them */
.service-card, .card { opacity: 1; animation: none; }
.rv {
  opacity: 1; transform: none;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s, background .3s, opacity .3s;
  transition-delay: 0s;
}

/* stop sideways reveal from creating a horizontal scrollbar */
html { overflow-x: clip; }

/* ---------- 3. Scroll progress bar ---------- */
.gx-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 4px;
  z-index: 10001; pointer-events: none;
  background: linear-gradient(90deg, #1245e8, #14a3f0 55%, #1b9a48);
  transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(18, 69, 232, .45);
}

/* ---------- 4. Hero decoration (light heroes: home, about, services) ---------- */
.hero-section, header.hero { position: relative; overflow: hidden; }
header.hero > .wrap { position: relative; z-index: 1; }

.gx-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(46px); opacity: .55;
}
.gx-o1 { width: 360px; height: 360px; left: -110px; top: -90px;
  background: radial-gradient(circle, rgba(18, 69, 232, .38), transparent 68%);
  animation: gxDrift1 14s ease-in-out infinite alternate; }
.gx-o2 { width: 320px; height: 320px; right: -80px; bottom: -110px;
  background: radial-gradient(circle, rgba(27, 154, 72, .34), transparent 68%);
  animation: gxDrift2 17s ease-in-out infinite alternate; }
.gx-o3 { width: 220px; height: 220px; left: 46%; top: 8%;
  background: radial-gradient(circle, rgba(20, 163, 240, .30), transparent 68%);
  animation: gxDrift3 12s ease-in-out infinite alternate; }
@keyframes gxDrift1 { to { transform: translate(90px, 60px) scale(1.15); } }
@keyframes gxDrift2 { to { transform: translate(-80px, -50px) scale(1.2); } }
@keyframes gxDrift3 { to { transform: translate(-60px, 70px) scale(.85); } }

/* parallax target gets a soft follow-the-mouse transition */
.gx-par { transition: translate .6s cubic-bezier(.2, .8, .2, 1); }

/* ---------- 5. Hero loops: things that keep gently alive after the intro ---------- */
@keyframes gxBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes gxMorph {
  0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  50% { translate: 8px -14px; rotate: 5deg; scale: 1.05; }
}
@keyframes gxBreath { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }

/* home */
.hero-circle { animation: gxBreath 6s ease-in-out infinite; }

/* about + services floating chips */
header.hero .float { animation: gxBob 5s ease-in-out infinite; }
header.hero .tile.t1 { animation-duration: 4.2s; animation-delay: -.6s; }
header.hero .tile.t2 { animation-duration: 5.1s; animation-delay: -1.8s; }
header.hero .tile.t3 { animation-duration: 4.6s; animation-delay: -2.7s; }
header.hero .tile.t4 { animation-duration: 3.8s; animation-delay: -1.1s; }
header.hero .f1 { animation-duration: 5.4s; }
header.hero .f2 { animation-duration: 4.4s; animation-delay: -1.5s; }
header.hero .f3 { animation-duration: 6s;   animation-delay: -3s; }
header.hero .count { animation: gxBob 4.6s ease-in-out infinite; animation-delay: -2s; }
header.hero .blob.g { animation: gxMorph 9s ease-in-out infinite; }
header.hero .blob.b { animation: gxMorph 11s ease-in-out infinite reverse; }

/* terms / privacy / contact hero: drifting rings + breathing light */
.terms-hero-section::before { animation: gxRing1 15s ease-in-out infinite alternate; }
.terms-hero-section::after  { animation: gxRing2 19s ease-in-out infinite alternate; }
@keyframes gxRing1 { to { translate: 70px 50px; rotate: 30deg; scale: 1.14; } }
@keyframes gxRing2 { to { translate: -80px -40px; rotate: -24deg; scale: 1.12; } }
.terms-hero-overlay { animation: gxGlow 8s ease-in-out infinite alternate; }
@keyframes gxGlow { to { opacity: .55; scale: 1.08; } }

/* service pages: icon tile gets a halo, plus the CTA band's circle floats */
.sp-ic .big { box-shadow: 0 24px 50px rgba(0, 0, 0, .2), 0 0 0 0 rgba(255, 255, 255, .35); }
.sp-cta::after { animation: gxBob 7s ease-in-out infinite; }
.cta-shape { animation: gxBob 7s ease-in-out infinite; }
.cta-shape + .cta-shape { animation-duration: 9s; animation-delay: -3s; }

/* ---------- 6. Little extras ---------- */
.step-icon, .why-card-icon, .service-icon, .sp-card .ci, .contact-info-icon {
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.why-card:hover .why-card-icon,
.service-card:hover .service-icon,
.how-step:hover .step-icon,
.contact-info-item:hover .contact-info-icon { transform: scale(1.12) rotate(-6deg); }

/* ---------- 7. Accessibility / print ---------- */
@media (prefers-reduced-motion: reduce) {
  .gx-js :is(.hero-section, header.hero, .sp-hero, .terms-hero-section) { visibility: visible; animation: none; }
  html .gx.gx { opacity: 1; }
  .gx-orb, .hero-circle, header.hero .float, header.hero .count, header.hero .blob,
  .terms-hero-section::before, .terms-hero-section::after, .terms-hero-overlay,
  .sp-cta::after, .cta-shape { animation: none; }
  .gx-progress { display: none; }
}
@media print {
  html .gx.gx { opacity: 1 !important; }
  .gx-progress, .gx-orb { display: none !important; }
}
@media (max-width: 640px) {
  .gx-o1 { width: 240px; height: 240px; }
  .gx-o2 { width: 220px; height: 220px; }
  .gx-o3 { display: none; }
}