/* =========================================================
   CENTUAL PREMIUM - 07 EFFECTS
   Glassmorphism, Glows, Overlays, Visual Effects
   ========================================================= */

/* ========================================
   GLASSMORPHISM
   ======================================== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

.glass-subtle {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
  background: rgba(27, 20, 100, 0.75);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-on-dark);
}

.glass-dark-strong {
  background: rgba(19, 14, 70, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-on-dark);
}

/* ========================================
   GLOW EFFECTS
   ======================================== */
.glow-primary {
  box-shadow: 0 0 20px rgba(27, 20, 100, 0.3),
              0 0 40px rgba(27, 20, 100, 0.2),
              0 0 60px rgba(27, 20, 100, 0.1);
}

.glow-secondary {
  box-shadow: 0 0 20px rgba(75, 113, 161, 0.3),
              0 0 40px rgba(75, 113, 161, 0.2),
              0 0 60px rgba(75, 113, 161, 0.1);
}

.glow-accent {
  box-shadow: 0 0 20px rgba(45, 90, 140, 0.3),
              0 0 40px rgba(45, 90, 140, 0.2);
}

.glow-white {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2),
              0 0 60px rgba(255, 255, 255, 0.1);
}

/* Animated glow */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(27, 20, 100, 0.3),
                0 0 40px rgba(27, 20, 100, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(27, 20, 100, 0.4),
                0 0 60px rgba(27, 20, 100, 0.3),
                0 0 80px rgba(27, 20, 100, 0.2);
  }
}

/* Text glow */
.text-glow {
  text-shadow: 0 0 10px rgba(27, 20, 100, 0.5),
               0 0 20px rgba(27, 20, 100, 0.3),
               0 0 30px rgba(27, 20, 100, 0.2);
}

.text-glow-light {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5),
               0 0 20px rgba(255, 255, 255, 0.3),
               0 0 40px rgba(255, 255, 255, 0.2);
}

/* ========================================
   OVERLAYS
   ======================================== */
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.overlay-dark {
  background: rgba(0, 0, 0, 0.5);
}

.overlay-light {
  background: rgba(255, 255, 255, 0.3);
}

.overlay-gradient {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

.overlay-gradient-top {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.overlay-gradient-bottom {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.overlay-primary {
  background: linear-gradient(
    180deg,
    rgba(27, 20, 100, 0.8) 0%,
    rgba(27, 20, 100, 0.6) 100%
  );
}

.overlay-primary-gradient {
  background: linear-gradient(
    135deg,
    rgba(27, 20, 100, 0.85) 0%,
    rgba(75, 113, 161, 0.7) 100%
  );
}

/* Video overlay specific */
.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(27, 20, 100, 0.7) 0%,
    rgba(27, 20, 100, 0.5) 40%,
    rgba(27, 20, 100, 0.7) 100%
  );
  pointer-events: none;
}

/* ========================================
   GRADIENTS
   ======================================== */
.gradient-primary {
  background: linear-gradient(135deg, var(--centual-primary) 0%, var(--centual-secondary) 100%);
}

.gradient-dark {
  background: linear-gradient(180deg, var(--centual-primary-dark) 0%, var(--centual-primary) 100%);
}

.gradient-subtle {
  background: linear-gradient(180deg, var(--centual-subtle) 0%, var(--centual-bg) 100%);
}

.gradient-radial {
  background: radial-gradient(ellipse at center, var(--centual-secondary) 0%, var(--centual-primary) 100%);
}

.gradient-mesh {
  background:
    radial-gradient(at 40% 20%, rgba(75, 113, 161, 0.3) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(27, 20, 100, 0.2) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(45, 90, 140, 0.2) 0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(27, 20, 100, 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(75, 113, 161, 0.2) 0px, transparent 50%);
}

/* Text gradient */
.text-gradient {
  background: linear-gradient(135deg, var(--centual-primary) 0%, var(--centual-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   LIGHT BEAMS
   ======================================== */
.light-beam {
  position: absolute;
  width: 200px;
  height: 400px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(15deg);
  pointer-events: none;
}

.light-beam--left {
  left: 10%;
  top: -100px;
}

.light-beam--right {
  right: 10%;
  top: -100px;
  transform: rotate(-15deg);
}

/* Animated light sweep */
.light-sweep {
  position: relative;
  overflow: hidden;
}

.light-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: lightSweep 3s ease-in-out infinite;
}

@keyframes lightSweep {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* ========================================
   SHINE EFFECTS
   ======================================== */
.shine {
  position: relative;
  overflow: hidden;
}

.shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
}

.shine:hover::after {
  transform: translateX(100%);
}

/* ========================================
   NOISE TEXTURE
   ======================================== */
.noise {
  position: relative;
}

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

/* ========================================
   BLUR EFFECTS
   ======================================== */
.blur-sm { filter: blur(4px); }
.blur-md { filter: blur(8px); }
.blur-lg { filter: blur(16px); }
.blur-xl { filter: blur(24px); }

/* Blur on hover */
.blur-hover:hover {
  filter: blur(0);
}

/* ========================================
   FROSTED PANELS
   ======================================== */
.frosted-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 10px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.frosted-panel-dark {
  background: rgba(27, 20, 100, 0.6);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
}

/* ========================================
   HIGHLIGHT BORDER
   ======================================== */
.border-glow {
  border: 1px solid rgba(75, 113, 161, 0.3);
  box-shadow:
    inset 0 0 20px rgba(75, 113, 161, 0.1),
    0 0 20px rgba(75, 113, 161, 0.1);
}

.border-gradient {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--centual-bg), var(--centual-bg)) padding-box,
    linear-gradient(135deg, var(--centual-primary), var(--centual-secondary)) border-box;
}

/* ========================================
   ELEVATION / DEPTH
   ======================================== */
.elevation-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.elevation-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
}

.elevation-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.elevation-4 {
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
}

.elevation-5 {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* ========================================
   HOVER LIFT
   ======================================== */
.hover-lift {
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* ========================================
   SPOTLIGHT EFFECT
   ======================================== */
.spotlight {
  position: relative;
  overflow: hidden;
}

.spotlight::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--transition-fast);
}

.spotlight:hover::before {
  opacity: 1;
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .glow-pulse,
  .light-sweep::before,
  .shine::after {
    animation: none;
  }
}

/* ========================================
   FALLBACK FOR NO BACKDROP-FILTER
   ======================================== */
@supports not (backdrop-filter: blur(1px)) {
  .glass,
  .glass-subtle,
  .glass-strong {
    background: rgba(255, 255, 255, 0.95);
  }

  .glass-dark,
  .glass-dark-strong {
    background: rgba(27, 20, 100, 0.95);
  }

  .frosted-panel {
    background: rgba(255, 255, 255, 0.95);
  }

  .frosted-panel-dark {
    background: rgba(27, 20, 100, 0.9);
  }
}