/* =====================================================================
   Sethji Enterprises — animations.css
   Supplemental, additive stylesheet for the GSAP / ScrollTrigger / AOS /
   Lenis / VanillaTilt animation layer (assets/js/animations.js).

   IMPORTANT: this file only ADDS new visual layers (cursor, progress bar,
   glow, gradients, floating shapes, tilt helpers). It never overrides an
   existing brand colour, font, spacing or layout rule from style.css.
   Everything here is either a brand-new element injected by animations.js,
   or a narrowly-scoped helper class that animations.js toggles on/off.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Reduced-motion master switch
   animations.js adds html.no-anim when prefers-reduced-motion matches
   (or when GSAP fails to load). Every custom layer is hidden/neutralised.
   --------------------------------------------------------------------- */
html.no-anim .cursor-dot,
html.no-anim .cursor-ring,
html.no-anim .scroll-progress,
html.no-anim .float-shape,
html.no-anim .page-transition-overlay { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring, .scroll-progress, .float-shape, .page-transition-overlay { display: none !important; }
}

/* ---------------------------------------------------------------------
   1. Scroll progress bar (fixed under the sticky header)
   --------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 999;
  background: linear-gradient(90deg, var(--amber, #12B4E0), var(--copper-light, #3FA0FF), var(--teal, #0B5CD6));
  background-size: 200% 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
  pointer-events: none;
  animation: sp-flow 6s linear infinite;
}
@keyframes sp-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ---------------------------------------------------------------------
   2. Cursor follower (desktop / fine-pointer only)
   --------------------------------------------------------------------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  mix-blend-mode: normal;
}
.cursor-dot {
  width: 7px; height: 7px;
  background: var(--amber, #12B4E0);
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(18, 180, 224, 0.55);
  background: rgba(11, 92, 214, 0.06);
  transform: translate(-50%, -50%);
  transition: width .25s ease, height .25s ease, background .25s ease, border-color .25s ease;
}
.cursor-ring.is-active {
  width: 52px; height: 52px;
  background: rgba(18, 180, 224, 0.12);
  border-color: var(--amber, #12B4E0);
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ---------------------------------------------------------------------
   3. Button glow + magnetic hover (works alongside existing .btn styles)
   --------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.35), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.btn:hover::before { opacity: 1; }
.btn-line::before, .btn-outline::before {
  background: radial-gradient(120px circle at var(--gx, 50%) var(--gy, 50%), rgba(18,180,224,.28), transparent 60%);
}

/* ---------------------------------------------------------------------
   4. Animated gradient backgrounds (hero / teal / cta) — same brand hues,
   just given gentle motion. Applied via class so it never fights the
   slide-image Ken Burns transform already on .slide .bg img.
   --------------------------------------------------------------------- */
.hero { background: linear-gradient(120deg, var(--teal-deep) 0%, #0a2a6bcc 40%, var(--teal-deep) 100%); background-size: 220% 220%; animation: bg-drift 18s ease-in-out infinite; }
.bg-teal { background-image: linear-gradient(120deg, var(--teal-deep) 0%, var(--teal) 50%, var(--teal-deep) 100%); background-size: 220% 220%; animation: bg-drift 22s ease-in-out infinite; }
.cta-banner { background-size: 220% 220%; animation: bg-drift 20s ease-in-out infinite; }
@keyframes bg-drift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------------------------------------------------------------------
   5. Floating decorative shapes (injected by animations.js; purely
   decorative, absolutely positioned, never affect layout/flow)
   --------------------------------------------------------------------- */
.float-shape-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.float-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .35;
  will-change: transform;
}
.hero .float-shape-layer { z-index: 1; }
.hero .content, .hero .trust-strip { position: relative; z-index: 2; }
.page-hero .float-shape-layer { z-index: 0; }
.page-hero .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   6. Reveal helpers driven by GSAP/ScrollTrigger
   The existing CSS-transition based .reveal system in style.css is left
   completely intact as a no-JS fallback. animations.js marks elements it
   has taken over with .anim-managed and turns their CSS transition off
   (inline, per element) so GSAP is the single source of truth for that
   element's opacity/transform — no double-animation, no fighting.
   --------------------------------------------------------------------- */
.anim-managed { transition: none !important; }

/* Split-text word spans used for heading reveals */
.split-word { display: inline-block; will-change: transform, opacity; }
.split-line { display: inline-block; overflow: hidden; vertical-align: top; }

/* ---------------------------------------------------------------------
   7. Image zoom-reveal wrapper support (uses existing overflow:hidden
   containers such as .thumb, .imgwrap, .store-main, .store-cell)
   --------------------------------------------------------------------- */
.thumb img, .store-main img, .store-cell img, .imgwrap img, .insta-tile img,
.gallery-grid img, #pdImage, .pd-media-main img { will-change: transform; }

/* ---------------------------------------------------------------------
   8. Tilt niceties for VanillaTilt-enhanced cards
   --------------------------------------------------------------------- */
[data-tilt] { transform-style: preserve-3d; }
.tilt-glare-wrap { border-radius: inherit; }

/* ---------------------------------------------------------------------
   9. Page loading / page transition overlay (multi-page site — a quick
   brand-coloured wipe between page navigations, on top of the existing
   #pageLoader mark/ring/word already in the markup)
   --------------------------------------------------------------------- */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--teal-deep, #0A2A6B);
  transform: translateY(-100%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   10. Number counter — no visual change needed, GSAP writes textContent
   --------------------------------------------------------------------- */
.t-item b, .stat b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   11. Timeline connector draw-in (About page) — enhances .timeline .tl-item
   without touching existing layout rules in style.css
   --------------------------------------------------------------------- */
.timeline .tl-item { will-change: transform, opacity; }

/* ---------------------------------------------------------------------
   12. FAQ smooth accordion support — overrides the UA default of
   instantly hiding non-open <details> content so animations.js can
   drive height with GSAP. Arrow rotation stays exactly as in style.css.
   --------------------------------------------------------------------- */
.faq-item .faq-a { display: block; overflow: hidden; }

/* ---------------------------------------------------------------------
   13. Footer reveal helper (children animate in as a group)
   --------------------------------------------------------------------- */
.foot-grid > * { will-change: transform, opacity; }

/* ---------------------------------------------------------------------
   14. Responsive dampening — smaller/faster motion on tablets & phones
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none !important; }
  .float-shape { opacity: .22; }
}
@media (max-width: 640px) {
  .hero, .bg-teal, .cta-banner { animation-duration: 30s; }
}