/**
 * Holographic Text CSS
 * Prismatic shimmer effect on headlines
 */

/* ============================================================================
   BASE HOLOGRAPHIC TEXT
   ============================================================================ */

.holographic-text {
  position: relative;
  display: inline-block;
  
  /* Base text styling */
  background: linear-gradient(
    135deg,
    var(--color-ferni, var(--color-ferni)) 0%,
    var(--color-ferni-secondary) 50%,
    var(--color-ferni, var(--color-ferni)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Prepare for shimmer */
  overflow: visible;
}

/* ============================================================================
   SHIMMER OVERLAY
   ============================================================================ */

.holographic-text__shimmer {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  
  /* Prismatic gradient */
  background: radial-gradient(
    ellipse at var(--shimmer-x, 50%) var(--shimmer-y, 50%),
    rgba(255, 255, 255, 0.4) 0%,
    rgba(200, 220, 255, 0.2) 25%,
    rgba(255, 200, 220, 0.15) 50%,
    rgba(220, 255, 200, 0.1) 75%,
    transparent 100%
  );
  
  /* Blend with text */
  mix-blend-mode: overlay;
  opacity: 0.6;
  
  /* Smooth transitions */
  transition: opacity 0.3s ease;
  
  /* Prevent interaction */
  z-index: 1;
}

/* Intensify on hover */
.holographic-text:hover .holographic-text__shimmer {
  opacity: 0.9;
}

/* ============================================================================
   HERO HEADLINE ACCENT - Special Treatment
   ============================================================================ */

.hero__headline-accent {
  position: relative;
  
  /* Enhanced gradient with more colors */
  background: linear-gradient(
    calc(135deg + var(--hue-shift, 0deg)),
    var(--color-ferni) 0%,
    var(--color-ferni) 25%,
    var(--color-ferni) 50%,
    var(--color-ferni-secondary) 75%,
    var(--color-ferni) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Animate background position */
  animation: holo-gradient 8s ease infinite;
}

@keyframes holo-gradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Additional shimmer layer for accent */
.hero__headline-accent::before {
  content: '';
  position: absolute;
  inset: -5px;
  background: radial-gradient(
    ellipse at var(--shimmer-x, 50%) var(--shimmer-y, 50%),
    rgba(255, 255, 255, 0.3) 0%,
    transparent 60%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0.5;
  border-radius: var(--radius-xs);
}

/* ============================================================================
   LIGHT REFRACTION EFFECT
   ============================================================================ */

/* Rainbow edge glow */
.holographic-text::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    calc(90deg + var(--hue-shift, 0deg)),
    transparent 0%,
    rgba(255, 100, 100, 0.1) 20%,
    rgba(100, 255, 100, 0.1) 40%,
    rgba(100, 100, 255, 0.1) 60%,
    rgba(255, 255, 100, 0.1) 80%,
    transparent 100%
  );
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

.holographic-text:hover::after {
  opacity: 0.6;
}

/* ============================================================================
   TEXT SHADOW VARIANT
   ============================================================================ */

.holographic-text--shadow {
  text-shadow: 
    calc(var(--holo-x, 0) * 2px) calc(var(--holo-y, 0) * 2px) 0 rgba(255, 100, 100, 0.3),
    calc(var(--holo-x, 0) * -2px) calc(var(--holo-y, 0) * -2px) 0 rgba(100, 100, 255, 0.3);
}

/* ============================================================================
   CHROMATIC ABERRATION VARIANT
   ============================================================================ */

.holographic-text--chromatic {
  position: relative;
}

.holographic-text--chromatic::before,
.holographic-text--chromatic::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.holographic-text--chromatic::before {
  background: #ff0000;
  -webkit-text-fill-color: rgba(255, 0, 0, 0.2);
  transform: translate(calc(var(--holo-x, 0) * 2px), calc(var(--holo-y, 0) * 1px));
  mix-blend-mode: multiply;
}

.holographic-text--chromatic::after {
  background: #00ffff;
  -webkit-text-fill-color: rgba(0, 255, 255, 0.2);
  transform: translate(calc(var(--holo-x, 0) * -2px), calc(var(--holo-y, 0) * -1px));
  mix-blend-mode: multiply;
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .holographic-text__shimmer,
  .holographic-text::before,
  .holographic-text::after {
    display: none;
  }
  
  .hero__headline-accent {
    animation: none;
  }
}