/* ============================================================
   CUREX24 — Premium UI Enhancements
   Adds: scroll progress bar, pointer/touch aurora spotlight,
   ripple splashes, magnetic buttons, animated gradient text,
   confetti splash, focus glow, blur-in reveals.
   Purely additive — no existing rules are modified.
   ============================================================ */

/* ---------- 1. Scroll progress bar (top) ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 1000;
  background: linear-gradient(90deg, #0b72e7 0%, #0aa5a4 50%, #7c5cff 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(11, 114, 231, 0.55), 0 0 24px rgba(10, 165, 164, 0.35);
  pointer-events: none;
  border-bottom-right-radius: 6px;
  will-change: width, background-position;
  transition: width 0.08s linear;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-progress { animation: progress-shimmer 6s linear infinite; }
}
@keyframes progress-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---------- 2. Pointer / touch aurora spotlight ---------- */
.aurora-spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  background:
    radial-gradient(
      520px circle at var(--aurora-x, 50%) var(--aurora-y, 30%),
      rgba(11, 114, 231, 0.22),
      rgba(10, 165, 164, 0.16) 28%,
      rgba(124, 92, 255, 0.10) 55%,
      transparent 72%
    );
  mix-blend-mode: screen;
  will-change: background;
}
.aurora-spotlight.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .aurora-spotlight { display: none; }
}

/* ---------- 3. Ripple / splash effect ---------- */
.ripple-host { position: relative; overflow: hidden; }

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  width: 12px;
  height: 12px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.25) 40%,
    rgba(255, 255, 255, 0) 70%
  );
  mix-blend-mode: screen;
  animation: ripple-splash 650ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  z-index: 1;
}
/* Darker ripple variant for light-colored surfaces (cards / secondary btns) */
.ripple--ink {
  background: radial-gradient(
    circle,
    rgba(11, 114, 231, 0.32) 0%,
    rgba(10, 165, 164, 0.20) 45%,
    rgba(11, 114, 231, 0) 75%
  );
  mix-blend-mode: multiply;
}

@keyframes ripple-splash {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.9; }
  60%  { opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(28); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ripple { animation: none; opacity: 0; }
}

/* ---------- 4. Magnetic button transform ---------- */
.btn[data-magnetic] {
  transform:
    translate(var(--mag-x, 0px), var(--mag-y, 0px))
    translateY(var(--mag-lift, 0px));
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    background var(--transition),
    box-shadow var(--transition);
  will-change: transform;
}
.btn[data-magnetic]:hover { --mag-lift: -2px; }

@media (prefers-reduced-motion: reduce) {
  .btn[data-magnetic] { transform: none !important; }
}

/* ---------- 5. Animated gradient shimmer on highlight text ---------- */
.gradient-text {
  background: linear-gradient(
    100deg,
    #0b72e7 0%,
    #0aa5a4 35%,
    #7c5cff 65%,
    #0b72e7 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .gradient-text { animation: gradient-flow 6s ease-in-out infinite; }
}
@keyframes gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- 6. Premium focus glow ---------- */
.btn:focus-visible,
.nav-links a:focus-visible,
.faq-list summary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(11, 114, 231, 0.18),
    0 0 0 6px rgba(10, 165, 164, 0.18),
    0 8px 22px rgba(11, 114, 231, 0.25);
}

/* ---------- 7. Blur-in reveal polish ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal:not(.visible) { filter: blur(6px); transition: filter 0.7s ease, opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible       { filter: blur(0); }
}

/* ---------- 8. Confetti splash particles ---------- */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1500;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
  animation: confetti-fall 1100ms cubic-bezier(0.2, 0.65, 0.3, 1) forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  80%  { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(var(--cf-x, 0px), var(--cf-y, 200px))
      rotate(var(--cf-r, 540deg)) scale(0.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-layer { display: none; }
}

/* ---------- 9. Subtle press feedback on interactive surfaces ---------- */
.btn:active { transform: translateY(0) scale(0.985); }

/* ---------- 10. Touch-friendly tilt cards ---------- */
[data-tilt] {
  touch-action: pan-y; /* allow vertical scroll, intercept horizontal for tilt */
}

/* ---------- 11. Card glow follow (cursor reactive sheen) ---------- */
.feature3d-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--glow-x, 50%) var(--glow-y, 0%),
    rgba(255, 255, 255, 0.35),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: overlay;
  z-index: 1;
}
.feature3d:hover .feature3d-inner::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .feature3d-inner::before { display: none; }
}