/* local_demofx — shared foreground effect library (MagicUI-inspired, vanilla).
 *
 * Pure-CSS / class-driven effects applied by the per-tenant init scripts via
 * window.DemoFX helpers. All are FOREGROUND effects (text, buttons, cards,
 * headings) so they stay visible on themes with opaque backgrounds. Each
 * respects prefers-reduced-motion.
 *
 * Tenant palette hooks (override on :root or a container if desired):
 *   --demofx-c1 / --demofx-c2 / --demofx-c3  (effect accent colors)
 *
 * @copyright 2026 SoftSys Solutions
 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

:root {
  --demofx-c1: #4f46e5;
  --demofx-c2: #06b6d4;
  --demofx-c3: #a855f7;
}

/* 1) Animated gradient text — for hero/section headings. */
.demofx-gradient-text {
  background-image: linear-gradient(90deg, var(--demofx-c1), var(--demofx-c2), var(--demofx-c3), var(--demofx-c1));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .demofx-gradient-text { animation: demofx-move-bg 8s linear infinite; }
}
@keyframes demofx-move-bg { to { background-position: 300% 0; } }

/* 2) Shimmer / shine sweep — for CTA buttons (and any clickable). */
.demofx-shimmer { position: relative; overflow: hidden; }
.demofx-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 80%);
  transform: skewX(-25deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .demofx-shimmer::before { transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .demofx-shimmer:hover::before,
  .demofx-shimmer:focus-visible::before { left: 130%; }
}

/* 3) Animated underline reveal — for section headings (class toggled by JS). */
.demofx-underline-reveal { position: relative; display: inline-block; padding-bottom: 4px; }
.demofx-underline-reveal::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--demofx-c1), var(--demofx-c2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.demofx-underline-reveal.demofx-in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .demofx-underline-reveal::after { transition: none; }
}

/* 4) Blur-fade-in — a richer scroll reveal (class toggled by JS, staggered). */
.demofx-blur-fade {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(18px);
  transition: opacity 0.65s ease, filter 0.65s ease, transform 0.65s ease;
  transition-delay: var(--demofx-delay, 0ms);
}
.demofx-blur-fade.demofx-in { opacity: 1; filter: blur(0); transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .demofx-blur-fade { opacity: 1; filter: none; transform: none; transition: none; }
}

/* 5) Rotating border beam — a living glow border on cards (runs on hover). */
@property --demofx-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.demofx-border-beam {
  position: relative;
  border: 2px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--demofx-card-bg, #fff), var(--demofx-card-bg, #fff)) padding-box,
    conic-gradient(from var(--demofx-angle), var(--demofx-c1), var(--demofx-c2), var(--demofx-c3), var(--demofx-c1)) border-box;
}
@media (prefers-reduced-motion: no-preference) {
  .demofx-border-beam { animation: demofx-spin 4s linear infinite; animation-play-state: paused; }
  .demofx-border-beam:hover { animation-play-state: running; }
}
@keyframes demofx-spin { to { --demofx-angle: 360deg; } }

/* 6) Click ripple — for buttons (element injected by JS). */
.demofx-ripple-host { position: relative; overflow: hidden; }
.demofx-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  animation: demofx-ripple 0.6s ease-out;
}
@keyframes demofx-ripple { to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demofx-ripple { display: none; } }

/* 7) Scroll progress bar — a thin gradient bar at the very top of the page. */
#demofx-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 100000;
  background: linear-gradient(90deg, var(--demofx-c1), var(--demofx-c2), var(--demofx-c3));
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  transition: width 0.08s linear;
}
@media (prefers-reduced-motion: reduce) { #demofx-progress { transition: none; } }

/* 8) Cursor-follow spotlight glow — for cards (vars set by JS on mousemove). */
.demofx-spotlight { position: relative; }
.demofx-spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--demofx-mx, 50%) var(--demofx-my, 50%),
    rgba(255, 255, 255, 0.22), transparent 42%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.demofx-spotlight:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .demofx-spotlight::after { display: none; } }

/* 9) Meteors — diagonal shooting stars overlaid on a hero (injected by JS). */
.demofx-meteors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.demofx-meteor {
  position: absolute;
  top: -10%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.65);
  transform: rotate(215deg);
  animation: demofx-meteor linear infinite;
}
.demofx-meteor::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), transparent);
}
@keyframes demofx-meteor {
  0%   { transform: rotate(215deg) translateX(0); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: rotate(215deg) translateX(-800px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .demofx-meteors { display: none; } }

/* 10) Sparkles — tiny twinkles around a hero accent (injected by JS). */
.demofx-sparkle {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background:
    linear-gradient(var(--demofx-c2), var(--demofx-c2)) center / 100% 2px no-repeat,
    linear-gradient(var(--demofx-c2), var(--demofx-c2)) center / 2px 100% no-repeat;
  opacity: 0;
  transform: scale(0) rotate(0deg);
  animation: demofx-sparkle 1.8s ease-in-out infinite;
}
@keyframes demofx-sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .demofx-sparkle { display: none; } }