/**
 * Free Presets Holographic Effects Plugin - CSS
 * 
 * Provides viewport-responsive holographic background effects.
 * 
 * Usage:
 * - Add class="holographic-effect" to any element for holographic background
 * - Add class="holographic-effect--meta-blend" for text blend mode effects  
 * - Add class="holographic-badge holographic-effect" for holographic badges
 * 
 * Version: 1.0.0
 */

.holographic-effect {
  position: relative;
  /* Initialize CSS custom properties with defaults for immediate rendering */
  --viewport-x: 50%;
  --viewport-y: 50%;
  --viewport-x-value: 50;
  --svg-pattern: conic-gradient(
    from 90deg,
    #0ff,
    #fff 59.4deg,
    hsl(300 100% 50% / 1) 118.8deg,
    #fff 178.2deg,
    #ff0 237.6deg,
    #fff 298.8deg,
    #0ff
  );

  background-image:
    linear-gradient(
      calc(3.6deg * var(--viewport-x-value)),
      rgba(255, 0, 80, 0.5),
      #00000033,
      rgba(255, 120, 0, 0.5),
      #00000033,
      rgba(255, 255, 0, 0.5),
      #00000033,
      rgba(0, 255, 0, 0.5),
      #00000033,
      rgba(0, 150, 255, 0.5),
      #00000033,
      rgba(150, 0, 255, 0.5),
      #00000033,
      rgba(255, 0, 80, 0.5),
      #00000033
    ),
    var(--svg-pattern);
  background-size: 200% 50vh, 24px auto;
  background-position: var(--viewport-x, 0%) var(--viewport-y, 50%), 0 0;
  background-blend-mode: overlay;
}

/**
 * Meta Blend Mode Modifier
 * Apply mix-blend-mode to specific child elements for enhanced holographic effects
 */
.holographic-effect--meta-blend .slide-film-preset-type,
.holographic-effect--meta-blend .slide-film-badge-container,
.holographic-effect--meta-blend .meta,
.holographic-effect--meta-blend .entry-meta,
.holographic-effect--meta-blend .post-meta,
.holographic-effect--meta-blend small,
.holographic-effect--meta-blend .small {
  mix-blend-mode: multiply;
}

/**
 * Holographic Badge Styles
 * Reusable badge component with holographic background
 */
.holographic-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 6px;
  font-size: 8px;
  letter-spacing: 0.5px;
  overflow: hidden;

  background: linear-gradient(
    calc(45deg + var(--viewport-x-value, 0) * 1.2deg),
    oklch(86% 0.08 51.51deg),
    oklch(78% 0.11 188.53deg),
    oklch(73% 0.11 215.82deg),
    oklch(81% 0.07 164.42deg),
    oklch(86% 0.08 51.51deg)
  );
  background-size: 300%;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Container query support for holographic badge */
@supports (font-size: 1cqi) {
  .holographic-badge {
    padding: max(2cqi, 3px) max(4cqi, 6px);
    font-size: max(4cqi, 8px);
    letter-spacing: max(0.5cqi, 0.5px);
  }
}

/**
 * Utility Classes
 */

/* Apply holographic effect to block-level elements */
.holographic-block {
  @extend .holographic-effect;
  display: block;
}

/* Apply holographic effect to inline elements */
.holographic-inline {
  @extend .holographic-effect;
  display: inline-block;
}

/* Subtle holographic effect (reduced opacity) */
.holographic-effect--subtle {
  opacity: 0.7;
}

/* Intense holographic effect (enhanced saturation) */
.holographic-effect--intense {
  filter: saturate(1.5);
}

/**
 * WordPress Block Editor Support
 */
.block-editor-writing-flow .holographic-effect,
.editor-styles-wrapper .holographic-effect {
  /* Ensure holographic effects work in block editor */
  background-attachment: local;
}

/**
 * Accessibility Support
 */
@media (prefers-reduced-motion: reduce) {
  .holographic-effect {
    /* Disable animation for users who prefer reduced motion */
    transition: none;
    animation: none;
  }
}

@media (prefers-color-scheme: dark) {
  .holographic-effect {
    /* Adjust holographic effects for dark mode */
    opacity: 0.9;
  }
}