/**
 * Hologram Theme Styles
 * Sci-fi 3D projection
 */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@700&display=swap');

.theme-hologram {
  background-color: var(--holo-bg, #020a14);
  font-family: 'Rajdhani', 'Orbitron', 'Arial', sans-serif;
  overflow: hidden;
  position: relative;
  perspective: 1000px; /* Essential for 3D */
}

/* Projection beams/Scanlines */
.theme-hologram .holo-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 212, 255, 0.03) 3px,
    rgba(0, 212, 255, 0.03) 4px
  );
  z-index: 2;
  pointer-events: none;
}

/* Projection Plate Glow (Bottom) */
.theme-hologram::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 100px;
  background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 1;
}

/* Text Container Wrapper for common effects */
.theme-hologram .holo-sign-text,
.theme-hologram .holo-flow-track {
  /* 3D Transform to look like a projection from below */
  transform: rotateX(10deg) translateY(-20px); 
  transform-origin: center bottom;
}

/* Base Text Styles */
.theme-hologram .holo-sign-text,
.theme-hologram .holo-flow-text {
  color: var(--holo-color, #00d4ff);
  font-weight: 700;
  white-space: nowrap;
  user-select: none;
  line-height: 1.1;
  opacity: 0.85;
  
  text-shadow:
    0 0 5px rgba(0, 212, 255, 0.8),
    0 0 10px rgba(0, 212, 255, 0.5),
    0 0 20px rgba(0, 212, 255, 0.3);
    
  /* Scanline texture ON the text */
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.1) 0px,
    transparent 1px,
    transparent 2px
  );
  -webkit-background-clip: text;
  
  animation: holo-flicker 0.1s infinite alternate;
}

/* SIGN Mode specific */
.theme-hologram .holo-sign-text {
  position: relative;
  z-index: 10;
}

/* Ghosting Effect (Duplicate text for sign) */
.theme-hologram .holo-sign-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  color: #00ffff;
  transform: scale(1.02) translateY(-2px);
  filter: blur(2px);
  z-index: -1;
  animation: holo-ghost 2s ease-in-out infinite alternate;
}

/* FLOW Mode specific */
.theme-hologram .holo-flow-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}

.theme-hologram .holo-flow-text {
  padding: 0 0.5em;
  flex-shrink: 0;
}

/* Animations */
@keyframes holo-flicker {
  0% { opacity: 0.85; }
  100% { opacity: 0.75; }
}

@keyframes holo-ghost {
  0% { transform: scale(1.02) translateY(-2px); opacity: 0.3; }
  100% { transform: scale(0.98) translateY(2px); opacity: 0.1; }
}