/* =============================================================
   Orion DS — Visual Effects Layer (vfx.css)
   Premium effects: glow, glass, gradients, textures, decorative
   Requires: tokens.css (--vfx-* tokens)
   Load AFTER all base CSS files
   ============================================================= */


/* =============================================================
   1. AMBIENT GLOW SYSTEM
   ============================================================= */

.vfx-glow-ambient {
  position: relative;
}

.vfx-glow-ambient::before {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    var(--vfx-glow-primary-faint) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: var(--vfx-z-behind);
}

/* data-vfx-glow attribute variants */
[data-vfx-glow="primary"] .vfx-glow-ambient::before,
.vfx-glow-ambient::before {
  background: radial-gradient(
    circle at center,
    var(--vfx-glow-primary-faint) 0%,
    transparent 70%
  );
}

[data-vfx-glow="secondary"] .vfx-glow-ambient::before,
[data-vfx-glow="secondary"].vfx-glow-ambient::before {
  background: radial-gradient(
    circle at center,
    var(--vfx-glow-secondary-faint) 0%,
    transparent 70%
  );
}

[data-vfx-glow="warm"] .vfx-glow-ambient::before,
[data-vfx-glow="warm"].vfx-glow-ambient::before {
  background: radial-gradient(
    circle at center,
    var(--vfx-glow-warm) 0%,
    transparent 70%
  );
}

[data-vfx-glow="dual"] .vfx-glow-ambient::before,
[data-vfx-glow="dual"].vfx-glow-ambient::before {
  background:
    radial-gradient(circle at 30% 50%, var(--vfx-glow-primary-faint) 0%, transparent 60%),
    radial-gradient(circle at 70% 50%, var(--vfx-glow-secondary-faint) 0%, transparent 60%);
}

/* Card hover glow */
.vfx-glow-card {
  transition: box-shadow var(--vfx-glow-transition);
  box-shadow: 0 0 0 transparent;
}

.vfx-glow-card:hover {
  box-shadow:
    0 0 20px var(--vfx-glow-primary-faint),
    0 0 40px var(--vfx-glow-primary-faint);
}

.vfx-glow-card--always {
  box-shadow:
    0 0 20px var(--vfx-glow-primary-faint),
    0 0 40px var(--vfx-glow-primary-faint);
}

/* Text glow */
.vfx-glow-text {
  text-shadow:
    0 0 10px var(--vfx-glow-primary-faint),
    0 0 20px var(--vfx-glow-primary-faint);
}

.vfx-glow-text--strong {
  text-shadow:
    0 0 10px var(--vfx-glow-primary),
    0 0 30px var(--vfx-glow-primary),
    0 0 60px var(--vfx-glow-primary-faint);
}

/* Section mode integration */
[data-section-mode="accent"] .vfx-glow-ambient::before,
[data-section-mode="accent"] .vfx-glow-card:hover,
[data-section-mode="accent"] .vfx-glow-card--always,
[data-section-mode="accent"] .vfx-glow-text,
[data-section-mode="accent"] .vfx-glow-text--strong {
  opacity: 0;
  box-shadow: none;
  text-shadow: none;
}

[data-section-mode="raised"] .vfx-glow-ambient::before,
[data-section-mode="subtle"] .vfx-glow-ambient::before {
  opacity: 0.7;
}


/* =============================================================
   2. GRADIENT SYSTEM
   ============================================================= */

/* Text gradients */
.text-gradient {
  background: linear-gradient(135deg, var(--vfx-glow-primary-strong), var(--vfx-glow-secondary-strong));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient--lime-teal {
  background: linear-gradient(135deg, var(--vfx-glow-primary-strong), #2dd4bf);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient--purple-pink {
  background: linear-gradient(135deg, var(--vfx-glow-secondary-strong), #ec4899);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient--warm {
  background: linear-gradient(135deg, var(--vfx-glow-warm-strong), #ef4444);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Border gradients */
.border-gradient {
  position: relative;
  border: none;
  background-clip: padding-box;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--vfx-glow-primary), var(--vfx-glow-secondary));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.border-gradient--2::before {
  padding: 2px;
}

@property --vfx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.border-gradient--animated::before {
  background: conic-gradient(
    from var(--vfx-angle),
    var(--vfx-glow-primary),
    var(--vfx-glow-secondary),
    var(--vfx-glow-warm),
    var(--vfx-glow-primary)
  );
  animation: vfx-border-rotate 3s linear infinite;
}

@keyframes vfx-border-rotate {
  to {
    --vfx-angle: 360deg;
  }
}

/* Image overlays */
.vfx-overlay {
  position: relative;
  overflow: hidden;
}

.vfx-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--vfx-z-texture);
}

.vfx-overlay--darken::after {
  background: linear-gradient(to bottom, transparent 40%, var(--color-dark-900, #0a0a0a));
}

.vfx-overlay--warm::after {
  background: linear-gradient(135deg, var(--vfx-glow-warm) 0%, transparent 60%);
}

.vfx-overlay--vignette::after {
  background: radial-gradient(ellipse at center, transparent 50%, var(--color-dark-900, #0a0a0a));
}

.vfx-overlay--top-fade::after {
  background: linear-gradient(to top, transparent 40%, var(--color-dark-900, #0a0a0a));
}

/* Section mode override for accent */
[data-section-mode="accent"] .text-gradient,
[data-section-mode="accent"] .text-gradient--lime-teal,
[data-section-mode="accent"] .text-gradient--purple-pink,
[data-section-mode="accent"] .text-gradient--warm {
  background: none;
  -webkit-text-fill-color: currentColor;
}


/* =============================================================
   3. GLASSMORPHISM SYSTEM
   ============================================================= */

/* BEM modifiers on .card */
.card--glass-light {
  background: var(--vfx-glass-bg-light);
  backdrop-filter: blur(var(--vfx-glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--vfx-glass-blur-sm));
  border: 1px solid var(--vfx-glass-border);
}

.card--glass-medium {
  background: var(--vfx-glass-bg-medium);
  backdrop-filter: blur(var(--vfx-glass-blur-md));
  -webkit-backdrop-filter: blur(var(--vfx-glass-blur-md));
  border: 1px solid var(--vfx-glass-border);
}

.card--glass-heavy {
  background: var(--vfx-glass-bg-heavy);
  backdrop-filter: blur(var(--vfx-glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--vfx-glass-blur-lg));
  border: 1px solid var(--vfx-glass-border-strong);
}

/* Standalone glass utility */
.vfx-glass {
  background: var(--vfx-glass-bg-medium);
  backdrop-filter: blur(var(--vfx-glass-blur-md));
  -webkit-backdrop-filter: blur(var(--vfx-glass-blur-md));
  border: 1px solid var(--vfx-glass-border);
}

.vfx-glass--sm {
  backdrop-filter: blur(var(--vfx-glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--vfx-glass-blur-sm));
}

.vfx-glass--lg {
  backdrop-filter: blur(var(--vfx-glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--vfx-glass-blur-lg));
}

/* Glass-in-glass nesting rules */
[data-section-mode="raised"] .card--glass-light {
  background: var(--vfx-glass-bg-medium);
}

[data-section-mode="raised"] .card--glass-medium {
  background: var(--vfx-glass-bg-heavy);
}

[data-section-mode="raised"] .vfx-glass {
  background: var(--vfx-glass-bg-heavy);
  border-color: var(--vfx-glass-border-strong);
}


/* =============================================================
   4. TEXTURE / NOISE SYSTEM
   ============================================================= */

.vfx-noise {
  position: relative;
}

.vfx-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--vfx-noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: var(--vfx-z-texture);
}

.vfx-noise--light::after {
  opacity: 0.02;
}

.vfx-noise--heavy::after {
  opacity: 0.06;
}

/* Dot grid */
.vfx-dots {
  position: relative;
}

.vfx-dots::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    var(--vfx-dot-color) var(--vfx-dot-size),
    transparent var(--vfx-dot-size)
  );
  background-size: var(--vfx-dot-gap) var(--vfx-dot-gap);
  pointer-events: none;
  z-index: var(--vfx-z-texture);
}

/* Scanlines */
.vfx-scanlines {
  position: relative;
}

.vfx-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent var(--vfx-scanline-gap),
    var(--vfx-scanline-color) var(--vfx-scanline-gap),
    var(--vfx-scanline-color) calc(var(--vfx-scanline-gap) * 2)
  );
  pointer-events: none;
  z-index: var(--vfx-z-texture);
}


/* =============================================================
   5. DECORATIVE ELEMENTS
   ============================================================= */

/* Floating orbs */
.vfx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: vfx-float var(--vfx-float-duration) ease-in-out infinite alternate;
  z-index: var(--vfx-z-behind);
}

.vfx-orb--primary {
  background: var(--vfx-glow-primary);
}

.vfx-orb--secondary {
  background: var(--vfx-glow-secondary);
}

.vfx-orb--warm {
  background: var(--vfx-glow-warm);
}

.vfx-orb--sm {
  width: 200px;
  height: 200px;
}

.vfx-orb--md {
  width: 400px;
  height: 400px;
}

.vfx-orb--lg {
  width: 600px;
  height: 600px;
}

@keyframes vfx-float {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-30px) scale(1.05);
  }
}

/* Light streaks */
.vfx-streak {
  position: absolute;
  width: 200px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--vfx-glow-primary-faint),
    var(--vfx-glow-primary),
    var(--vfx-glow-primary-faint),
    transparent
  );
  transform: rotate(-35deg);
  pointer-events: none;
  z-index: var(--vfx-z-behind);
}

.vfx-streak--wide {
  width: 400px;
  height: 2px;
}

/* Gradient divider */
.vfx-divider-gradient {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--vfx-glow-primary),
    var(--vfx-glow-secondary),
    transparent
  );
}

.vfx-divider-gradient--glow {
  height: 2px;
  box-shadow:
    0 0 8px var(--vfx-glow-primary-faint),
    0 0 20px var(--vfx-glow-primary-faint);
}


/* =============================================================
   6. PREMIUM BUTTON EFFECTS
   ============================================================= */

.btn--glow {
  transition: box-shadow var(--vfx-glow-transition);
}

.btn--glow:hover {
  box-shadow:
    0 0 15px var(--vfx-glow-primary),
    0 0 30px var(--vfx-glow-primary-faint);
}

.btn--gradient {
  background: linear-gradient(135deg, var(--vfx-glow-primary-strong), var(--vfx-glow-secondary-strong));
  border: none;
  transition: filter var(--duration-normal, 0.2s) var(--easing-default, ease);
}

.btn--gradient:hover {
  filter: brightness(1.15);
}

.btn--shimmer {
  position: relative;
  overflow: hidden;
}

.btn--shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left var(--vfx-shimmer-duration) var(--easing-default, ease);
}

.btn--shimmer:hover::after {
  left: 100%;
}

.btn--pulse {
  animation: vfx-btn-pulse var(--vfx-pulse-duration) ease-in-out infinite;
}

@keyframes vfx-btn-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--vfx-glow-primary);
  }
  50% {
    box-shadow: 0 0 0 8px transparent;
  }
}

/* Button section mode overrides */
[data-section-mode="accent"] .btn--glow:hover {
  box-shadow:
    0 0 15px var(--vfx-glow-secondary),
    0 0 30px var(--vfx-glow-secondary-faint);
}

[data-section-mode="accent"] .btn--pulse {
  animation-name: vfx-btn-pulse-accent;
}

@keyframes vfx-btn-pulse-accent {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--vfx-glow-secondary);
  }
  50% {
    box-shadow: 0 0 0 8px transparent;
  }
}


/* =============================================================
   7. REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .vfx-orb {
    animation: none;
  }

  .border-gradient--animated::before {
    animation: none;
  }

  .btn--shimmer::after {
    transition: none;
  }

  .btn--pulse {
    animation: none;
  }

  .vfx-glow-card {
    transition: none;
  }

  .btn--glow {
    transition: none;
  }

  .btn--gradient {
    transition: none;
  }
}