/* ============================================================
   CUREX24 — Advanced Animation Layer
   Purely additive. Does not modify or override existing rules
   beyond what is necessary to "opt in" via new classes / vars.

   Contents:
     1.  Custom cursor follower (ring + dot)
     2.  Word-stagger reveal for headings
     3.  Hero panel 3D parallax tilt
     4.  Floating ambient particles
     5.  Count-up numbers (panel-foot-stat)
     6.  Rotating conic-gradient halo on offer card
     7.  Alternating L / R slide reveal (problem / automation grids)
     8.  Scroll-velocity-reactive marquee
     9.  Section-heading shimmer underline draw-in
   ============================================================ */

/* ---------- 1. Custom cursor follower ---------- */
.aa-cursor-ring,
.aa-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2000;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}
.aa-cursor-ring {
  width: 34px;
  height: 34px;
  margin-left: -17px;
  margin-top: -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 114, 231, 0.55);
  background: radial-gradient(
    circle,
    rgba(10, 165, 164, 0.08) 0%,
    rgba(11, 114, 231, 0.04) 50%,
    transparent 75%
  );
  transition:
    width 0.22s ease,
    height 0.22s ease,
    margin 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    opacity 0.25s ease;
  opacity: 0;
  mix-blend-mode: multiply;
}
.aa-cursor-dot {
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: #0b72e7;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.08s linear, background 0.2s ease;
  box-shadow: 0 0 10px rgba(11, 114, 231, 0.4);
}
.aa-cursor-ready .aa-cursor-ring,
.aa-cursor-ready .aa-cursor-dot {
  opacity: 1;
}
/* Larger ring when hovering interactive targets */
.aa-cursor-hot .aa-cursor-ring {
  width: 58px;
  height: 58px;
  margin-left: -29px;
  margin-top: -29px;
  border-color: rgba(10, 165, 164, 0.75);
  background: radial-gradient(
    circle,
    rgba(10, 165, 164, 0.18) 0%,
    rgba(11, 114, 231, 0.10) 60%,
    transparent 80%
  );
}
.aa-cursor-hot .aa-cursor-dot {
  background: #0aa5a4;
}

/* Hide on coarse pointers / reduced motion */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .aa-cursor-ring,
  .aa-cursor-dot { display: none !important; }
  body.aa-cursor-active { cursor: auto; }
}

/* ---------- 2. Word-stagger reveal for headings ---------- */
.aa-split .aa-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotateX(-25deg);
  transform-origin: 50% 100%;
  filter: blur(6px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.8, 0.3, 1),
    transform 0.8s cubic-bezier(0.22, 0.8, 0.3, 1),
    filter 0.7s ease;
  transition-delay: calc(var(--aa-i, 0) * 55ms);
  will-change: transform, opacity, filter;
}
.aa-split.aa-on .aa-word {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .aa-split .aa-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ---------- 3. Hero panel 3D parallax tilt ---------- */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  .hero .hero-grid { perspective: 1400px; }
  /* Only enable the parallax transform once the panel's initial reveal
     slide-up has finished — JS adds .aa-panel-tilt then. This keeps
     the existing `.reveal` enter animation intact. */
  .hero .panel.aa-panel-tilt {
    transform-style: preserve-3d;
    transform:
      perspective(1400px)
      rotateX(var(--aa-panel-rx, 0deg))
      rotateY(var(--aa-panel-ry, 0deg))
      translateZ(0);
    transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
    will-change: transform;
  }
  .hero .panel.aa-panel-tilt.aa-panel-active { transition: transform 0.12s linear; }
  /* lift inner items slightly so the parallax reads as depth */
  .hero .panel.aa-panel-tilt .panel-header,
  .hero .panel.aa-panel-tilt .panel-feed,
  .hero .panel.aa-panel-tilt .panel-footer { transform: translateZ(22px); }
  .hero .panel.aa-panel-tilt .feed-icon { transform: translateZ(32px); }
}

/* ---------- 4. Floating ambient particles ---------- */
.aa-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.aa-particle {
  position: absolute;
  top: 100%;
  left: var(--aa-p-x, 50%);
  width: var(--aa-p-s, 6px);
  height: var(--aa-p-s, 6px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(10, 165, 164, 0.55) 0%,
    rgba(11, 114, 231, 0.35) 55%,
    rgba(124, 92, 255, 0) 80%
  );
  opacity: 0;
  filter: blur(0.5px);
  animation: aa-particle-rise var(--aa-p-d, 22s) linear var(--aa-p-delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes aa-particle-rise {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: var(--aa-p-o, 0.45); }
  50%  { transform: translate(var(--aa-p-dx, 30px), -55vh) scale(1); }
  90%  { opacity: var(--aa-p-o, 0.45); }
  100% { transform: translate(calc(var(--aa-p-dx, 30px) * 1.6), -115vh) scale(0.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aa-particles { display: none; }
}

/* ---------- 5. Count-up numbers ---------- */
.aa-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s ease;
}
.aa-count.aa-count-pop { transform: scale(1.08); }

/* ---------- 6. Rotating conic-gradient halo on offer card ---------- */
.offer-card { position: relative; isolation: isolate; }
.offer-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    rgba(11, 114, 231, 0.0) 0deg,
    rgba(11, 114, 231, 0.55) 60deg,
    rgba(10, 165, 164, 0.55) 140deg,
    rgba(124, 92, 255, 0.55) 220deg,
    rgba(11, 114, 231, 0.0) 300deg,
    rgba(11, 114, 231, 0.0) 360deg
  );
  filter: blur(14px);
  opacity: 0.65;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .offer-card::before { animation: aa-halo-spin 9s linear infinite; }
}
@keyframes aa-halo-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .offer-card::before { opacity: 0.35; }
}

/* ---------- 7. Alternating L / R slide reveal ---------- */
/* Applied only when the host has the opt-in class so it doesn't fight
   the existing fade-up reveal-group baseline. */
.aa-alt-slide.reveal-group > * {
  transform: translateX(var(--aa-slide-x, -32px)) translateY(14px);
}
.aa-alt-slide.reveal-group > *:nth-child(even) {
  --aa-slide-x: 32px;
}
.aa-alt-slide.reveal-group.visible > * {
  transform: translateX(0) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .aa-alt-slide.reveal-group > * { transform: none !important; }
}

/* ---------- 8. Scroll-velocity-reactive marquee ---------- */
.marquee-track {
  animation-duration: var(--aa-marquee-dur, 45s) !important;
  transition: animation-duration 0.5s linear;
}

/* ---------- 9. Section-heading shimmer underline draw-in ---------- */
.section-head { position: relative; }
.section-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  height: 3px;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(11, 114, 231, 0) 0%,
    #0b72e7 20%,
    #0aa5a4 50%,
    #7c5cff 80%,
    rgba(124, 92, 255, 0) 100%
  );
  background-size: 220% 100%;
  transform: translateX(-50%);
  transition: width 0.9s cubic-bezier(0.22, 0.8, 0.3, 1);
  pointer-events: none;
}
.section-head.aa-underline-on::after {
  width: clamp(80px, 18%, 200px);
}
@media (prefers-reduced-motion: no-preference) {
  .section-head.aa-underline-on::after {
    animation: aa-underline-shimmer 4s ease-in-out infinite;
  }
}
@keyframes aa-underline-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 220% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .section-head::after { transition: none; }
}