/* Hologram theme — glowing holographic surfaces with scanline + jitter. */
:root[data-theme="hologram"] {
    --tl-accent-primary: #96c8ff;
    --tl-accent-primary-light: #c8e6ff;
    --tl-accent-primary-dark: #64a0ff;
    --tl-accent-primary-darker: #4080e0;
    --tl-bg-base: #0a0e1a;
    --tl-bg-elevated: rgba(20, 30, 50, 0.55);
    --tl-bg-elevated-1: rgba(24, 36, 60, 0.6);
    --tl-bg-elevated-2: rgba(28, 42, 70, 0.65);
    --tl-bg-elevated-3: rgba(32, 48, 80, 0.7);
    --tl-bg-input: rgba(20, 30, 50, 0.6);
    --tl-bg-hover: rgba(130, 180, 255, 0.18);
    --tl-border-subtle: rgba(150, 200, 255, 0.25);
    --tl-border-default: rgba(150, 200, 255, 0.45);
    --tl-border-strong: rgba(180, 220, 255, 0.7);
    --tl-border-focus: var(--tl-accent-primary-light);
    --tl-text-primary: rgba(220, 240, 255, 0.95);
    --tl-text-secondary: rgba(180, 210, 240, 0.85);
    --tl-text-muted: rgba(150, 190, 230, 0.6);
    --tl-text-subtle: rgba(130, 170, 220, 0.45);
    --tl-text-inverse: #0a0e1a;
    --tl-success: #66ffcc; --tl-error: #ff6e8a; --tl-warning: #ffd86e; --tl-info: #6ec8ff;
    --tl-card-bg: var(--tl-bg-elevated);
    --tl-card-border: var(--tl-border-default);
    --tl-shadow-sm: 0 0 8px rgba(130,180,255,.2);
    --tl-shadow-md: 0 0 18px rgba(130,180,255,.3);
    --tl-shadow-lg: 0 0 30px 5px rgba(100,160,255,.25);
}

/* Holographic card surface */
:root[data-theme="hologram"] .tl-card,
:root[data-theme="hologram"] .card {
    position: relative;
    border: 1px solid var(--tl-border-default);
    border-radius: 12px;
    background:
        radial-gradient(circle at center, rgba(100,160,255,.15) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(100,160,255,.15) 1px, transparent 1px),
        var(--tl-bg-elevated);
    background-size: 20px 12px; background-position: 0 0, 10px 6px;
    box-shadow: 0 0 15px 2px rgba(130,180,255,.3), 0 0 30px 5px rgba(100,160,255,.15),
                inset 0 0 20px rgba(130,180,255,.1);
    animation: tl-holo-glow 3s ease-in-out infinite;
}
/* Jitter (toggle: data-effect-jitter-off) */
:root[data-theme="hologram"]:not([data-effect-jitter-off]) .tl-card,
:root[data-theme="hologram"]:not([data-effect-jitter-off]) .card {
    animation: tl-holo-glow 3s ease-in-out infinite, tl-holo-jitter .15s steps(2) infinite;
}
/* Scanline (toggle: data-effect-scanline-off) */
:root[data-theme="hologram"]:not([data-effect-scanline-off]) .tl-card::after,
:root[data-theme="hologram"]:not([data-effect-scanline-off]) .card::after {
    content: ''; position: absolute; left: 0; right: 0; height: 3px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(150,200,255,.15),
                rgba(200,230,255,.3), rgba(150,200,255,.15), transparent);
    filter: blur(1px); animation: tl-holo-scan 4s linear infinite;
}
@keyframes tl-holo-glow {
    0%,100% { box-shadow: 0 0 15px 2px rgba(130,180,255,.3), 0 0 30px 5px rgba(100,160,255,.15), inset 0 0 20px rgba(130,180,255,.1); }
    50%     { box-shadow: 0 0 20px 4px rgba(130,180,255,.4), 0 0 40px 8px rgba(100,160,255,.2),  inset 0 0 25px rgba(130,180,255,.15); }
}
@keyframes tl-holo-jitter {
    0%,100%{transform:translateX(0)}10%{transform:translateX(-.5px)}30%{transform:translateX(.3px)}
    50%{transform:translateX(-.3px)}70%{transform:translateX(.4px)}90%{transform:translateX(-.4px)}
}
@keyframes tl-holo-scan { 0%{top:100%;opacity:0}5%{opacity:1}95%{opacity:1}100%{top:-5px;opacity:0} }