/* Sci‑Fi UI — Hologram title 3D/glow (BLUE variant for STAR WARS theme)
   Scope: ONLY the HOLOGRAM theme headline (.theme-holo .title)
   Changes from previous:
   - Blue-tinted prism fill and glows
   - Blue outer aura
   - Blue glint/fringing
*/

.theme-holo .title {
  position: relative;
  isolation: isolate;

  /* Blue prism gradient fill inside the glyphs */
  background:
    radial-gradient(120% 140% at 20% 10%, rgba(190,220,255,.85) 0%, rgba(120,170,255,.72) 28%, rgba(40,100,210,.46) 60%, rgba(10,30,80,0) 100%),
    conic-gradient(from 200deg at 60% 40%, rgba(96,170,255,.76), rgba(150,200,255,.82), rgba(210,235,255,.74), rgba(64,140,255,.80), rgba(96,170,255,.76));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Depth extrusion + blue glow */
  text-shadow:
    0  1px 0 rgba(10,22,60,.72),
    0  2px 0 rgba(10,22,60,.70),
    0  3px 0 rgba(10,22,60,.66),
    0  4px 0 rgba(10,22,60,.62),
    0  5px 0 rgba(10,22,60,.60),
    0  0   3px rgba(120,180,255,.46),
    0  0  10px rgba(120,180,255,.40),
    0  7px 20px rgba(64,140,255,.34);

  /* Slight tilt for holographic presence */
  transform: perspective(700px) rotateX(1.2deg);
}

/* Outer rim/aura — blue */
.theme-holo .title::before {
  content: "";
  position: absolute; inset: -6px -10px -10px -6px;
  border-radius: .02em;
  pointer-events: none;
  filter: blur(10px);
  opacity: .32;
  background:
    radial-gradient(80% 120% at 50% 50%, rgba(64,140,255,.30), rgba(64,140,255,0) 70%);
  mix-blend-mode: screen;
}

/* Chromatic aberration + glint — blue biased */
.theme-holo .title::after {
  content: attr(data-glitch);
  position: absolute; inset: 0;
  pointer-events: none;
  color: #5FB1FF;
  -webkit-text-stroke: 0 transparent;
  mix-blend-mode: screen;
  opacity: .28;
  transform: translate(.6px, .6px);
  text-shadow:
    -1px 0 0 rgba(255,0,168,.22),
     1px 0 0 rgba(96,170,255,.28);
  animation: holo-glint 4.2s ease-in-out infinite;
}

/* Glint: diagonal sweep across clipped text */
@keyframes holo-glint {
  0%   { mask-image: linear-gradient(110deg, transparent 33%, rgba(255,255,255,.95) 45%, transparent 57%); mask-size: 220% 220%; mask-position: -120% -120%; opacity: .22 }
  50%  { mask-image: linear-gradient(110deg, transparent 33%, rgba(255,255,255,.95) 45%, transparent 57%); mask-size: 220% 220%; mask-position: 100% 100%;   opacity: .36 }
  100% { mask-image: linear-gradient(110deg, transparent 33%, rgba(255,255,255,.95) 45%, transparent 57%); mask-size: 220% 220%; mask-position: 160% 160%;  opacity: .26 }
}

/* Fallback for browsers lacking mask-image support */
@supports not (mask-image: linear-gradient(white, black)) {
  .theme-holo .title::after {
    background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.36) 50%, transparent 62%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    transform: none;
    animation: holo-glint-fallback 4.2s ease-in-out infinite;
  }
  @keyframes holo-glint-fallback {
    0%   { background-position: -120% -120%; opacity: .22; background-size: 220% 220% }
    50%  { background-position:  100%  100%; opacity: .36 }
    100% { background-position:  160%  160%; opacity: .26 }
  }
}

/* Reduced motion: disable animations */
@media (prefers-reduced-motion: reduce) {
  .theme-holo .title,
  .theme-holo .title::after { animation: none !important }
}