// Use theme variables with namespace to avoid conflicts
@use 'variables' as vars;
@use 'mixins' as mix;

// ============================================
// Hikari Glow Component - Single Glow Color System
// ============================================
//
// Glow states are controlled by CSS variables updated via mouse events:
// - --hi-glow-x, --hi-glow-y: Position of glow center (percentage, 0-100%)
// - --hi-glow-intensity-scale: Visibility level (0 = hidden, 0.5 = hover, 1.0 = active)
// - --hi-glow-opacity: Direct opacity control (overrides calculated value)
// - --hi-glow-color: Glow color
//
// CSS provides:
// 1. Base structure (::before pseudo-element)
// 2. Intensity classes (dim/soft/bright) for base opacity multiplier
// 3. Smooth transitions for position and opacity
// 4. Fallback :hover and :active states

// Base glow wrapper styles
.hi-glow-wrapper,
.hi-glow-wrapper-block {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: var(--hi-glow-radius, inherit);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;

    background: radial-gradient(
      circle at var(--hi-glow-x, 50%) var(--hi-glow-y, 50%),
      var(--hi-glow-color) 0%,
      transparent calc(var(--hi-glow-spread, 1.5) * 100%)
    );
  }

  &:hover::before {
    opacity: var(--hi-glow-opacity, 0.15);
  }

  > * {
    pointer-events: auto;
    position: relative;
    z-index: 1;
  }
}

// ============================================
// Glow Blur Levels (Backdrop Blur Effect)
// ============================================

// These classes control the backdrop blur intensity for the glow effect
// None: No blur (default, for crisp glow edges)
.hi-glow-blur-none {
  // No additional blur effect
}

// Light: Subtle blur (2px) for soft glow edges
.hi-glow-blur-light {
  &::before {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

// Medium: Medium blur (4px) for balanced glow effect
.hi-glow-blur-medium {
  &::before {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

// Heavy: Heavy blur (8px) for intense glow diffusion
.hi-glow-blur-heavy {
  &::before {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

// ============================================
// Glow Intensity Levels (Opacity & Spread)
// ============================================

// These classes define the BASE opacity for different glow intensities
// The actual visibility is controlled by --hi-glow-intensity-scale (0 = hidden, 1 = full intensity)
// IMPORTANT: --glow-base-opacity must be defined on the parent, not on ::before
//
// Opacity calculation: base-opacity * intensity-scale
// - Hover (0.5): subtle glow
// - Active (1.0): intense glow (2x hover)

// 30% intensity (subtle, for large surfaces: cards, panels, containers)
// Very low opacity + wide spread for an almost imperceptible ambient glow
.hi-glow-dim {
  --hi-glow-opacity: 0.07;
  --hi-glow-spread: 2.4;

  &::before {
    --hi-glow-opacity: 0.07;
    --hi-glow-spread: 2.4;
  }
}

// 70% intensity (medium, default for interactive elements: buttons, inputs)
// Balanced opacity + moderate spread for clear but non-distracting feedback
.hi-glow-soft {
  --hi-glow-opacity: 0.15;
  --hi-glow-spread: 1.6;

  &::before {
    --hi-glow-opacity: 0.15;
    --hi-glow-spread: 1.6;
  }
}

// 100% intensity (intense, for emphasis: active states, focus rings)
.hi-glow-bright {
  --hi-glow-opacity: 0.30;
  --hi-glow-spread: 1.3;

  &::before {
    --hi-glow-opacity: 0.30;
    --hi-glow-spread: 1.3;
  }
}

.hi-glow-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  overflow: visible;
  border-radius: var(--hi-glow-radius, inherit);
}

// Block variant for wrapping block-level elements (like Card)
.hi-glow-wrapper-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: visible;
  border-radius: var(--hi-glow-radius, inherit);
}

// ============================================
// Radius Matching
// ============================================
// Glow wrapper must match its child's border-radius.
// Since CSS cannot "inherit upward", we set radius on common child types.
// Components set their own --hi-*-radius tokens in button-vars.scss etc.

.hi-glow-wrapper > .hi-button { border-radius: var(--hi-button-radius, var(--hi-radius-md, 8px)); }
.hi-glow-wrapper > .hi-input,
.hi-glow-wrapper > .hi-textarea,
.hi-glow-wrapper > .hi-search,
.hi-glow-wrapper > .hi-number-input { border-radius: var(--hi-input-radius, var(--hi-radius-md, 8px)); }
.hi-glow-wrapper > li { border-radius: var(--hi-glow-radius, var(--hi-radius-sm, 4px)); }

.hi-glow-wrapper-block > .hi-input,
.hi-glow-wrapper-block > .hi-textarea,
.hi-glow-wrapper-block > .hi-search,
.hi-glow-wrapper-block > .hi-number-input { border-radius: var(--hi-input-radius, var(--hi-radius-md, 8px)); }

// ============================================
// Button Enhancement
// ============================================

// When button is wrapped in glow, let the button handle its own hover effects
// The glow wrapper adds the mouse-following spotlight effect on top
.hi-glow-wrapper .hi-button:hover {
  transform: none;
}

// Combine button outline with glow effect
.hi-glow-wrapper .hi-button:focus-visible {
  box-shadow:
    0 0 0 2px currentColor,
    0 0 12px var(--hi-glow-color);
}

// Let button handle its own active state
.hi-glow-wrapper .hi-button:active:not(:disabled) {
  box-shadow:
    0 0 4px currentColor,
    inset 0 1px 0 var(--hi-white-10, rgba(255,255,255,0.1));
  transform: translateY(0) scale(0.98);
}

.hi-glow-wrapper .hi-button:focus-visible {
  // Combine button outline with glow effect
  outline-offset: 2px;
}

.hi-glow-wrapper .hi-button:active:not(:disabled) {
  // Let button handle its own active state
}

// Input hover enhancement
.hi-glow-wrapper .hi-input-wrapper:hover {
  // No hover effect - handled by glow overlay
}

// ============================================
// Glow Animation Presets
// ============================================
//
// These presets add continuous animation effects to the glow component.
// They are activated by adding the corresponding class to the wrapper.
//
// Note: Preset animations pause during mouse interaction to maintain performance.

// Pulse animation - heartbeat-like pulsing glow
@keyframes glow-pulse {
  0%, 100% {
    --hi-glow-intensity-scale: 0.5;
  }
  50% {
    --hi-glow-intensity-scale: 1.0;
  }
}

.hi-glow-wrapper.pulse::before {
  animation: glow-pulse 2s ease-in-out infinite;
}

// Breathe animation - slow, smooth intensity variation
@keyframes glow-breathe {
  0%, 100% {
    --hi-glow-intensity-scale: 0.3;
  }
  50% {
    --hi-glow-intensity-scale: 1.0;
  }
}

.hi-glow-wrapper.breathe::before {
  animation: glow-breathe 4s ease-in-out infinite;
}

// Shimmer animation - moving light spot across the element
@keyframes glow-shimmer {
  0% {
    --hi-glow-x: 20%;
    --hi-glow-y: 50%;
  }
  25% {
    --hi-glow-x: 50%;
    --hi-glow-y: 80%;
  }
  50% {
    --hi-glow-x: 80%;
    --hi-glow-y: 50%;
  }
  75% {
    --hi-glow-x: 50%;
    --hi-glow-y: 20%;
  }
  100% {
    --hi-glow-x: 20%;
    --hi-glow-y: 50%;
  }
}

.hi-glow-wrapper.shimmer::before {
  animation: glow-shimmer 3s linear infinite;
}

// Pause preset animations during mouse interaction
.hi-glow-wrapper.pulse:has(:hover)::before,
.hi-glow-wrapper.pulse:has(:active)::before,
.hi-glow-wrapper.breathe:has(:hover)::before,
.hi-glow-wrapper.breathe:has(:active)::before,
.hi-glow-wrapper.shimmer:has(:hover)::before,
.hi-glow-wrapper.shimmer:has(:active)::before {
  animation-play-state: paused;
}
