/* ============================================================
   DIRRICHS PORTAL — CYBERPUNK GLITCH SYSTEM
   Multi-effect glitch engine with periodic bursts (3-7s)
   ============================================================ */

/* ============================================================
   LAYER A — Subtle 3D Chromatic Drift (always on, text-shadow orbit)
   ============================================================ */

@keyframes drift3D {
    0%, 100% { text-shadow: -1px -1px 1px rgba(255,0,255,0.3), 1px  1px 1px rgba(0,255,65,0.3), 0 0 6px var(--portal-cyan, #00f0ff); }
    20%      { text-shadow: -2px  0px 1px rgba(255,0,255,0.3), 2px  0px 1px rgba(0,255,65,0.3), 0 0 6px var(--portal-cyan, #00f0ff); }
    40%      { text-shadow:  0px -2px 1px rgba(255,0,255,0.3), 0px  2px 1px rgba(0,255,65,0.3), 0 0 6px var(--portal-cyan, #00f0ff); }
    60%      { text-shadow: -2px  1px 1px rgba(255,0,255,0.3), 2px -1px 1px rgba(0,255,65,0.3), 0 0 6px var(--portal-cyan, #00f0ff); }
    80%      { text-shadow:  1px -2px 1px rgba(255,0,255,0.3), -1px 2px 1px rgba(0,255,65,0.3), 0 0 6px var(--portal-cyan, #00f0ff); }
}

@keyframes drift3Dhero {
    0%, 100% { text-shadow: -2px -2px 2px rgba(255,0,255,0.38),  2px  2px 2px rgba(0,255,65,0.38), 0 0 8px var(--portal-cyan, #00f0ff); }
    25%      { text-shadow: -4px  0px 2px rgba(255,0,255,0.38),  4px  0px 2px rgba(0,255,65,0.38), 0 0 8px var(--portal-cyan, #00f0ff); }
    50%      { text-shadow:  0px -4px 2px rgba(255,0,255,0.38),  0px  4px 2px rgba(0,255,65,0.38), 0 0 8px var(--portal-cyan, #00f0ff); }
    75%      { text-shadow: -3px  2px 2px rgba(255,0,255,0.38),  3px -2px 2px rgba(0,255,65,0.38), 0 0 8px var(--portal-cyan, #00f0ff); }
}

/* ============================================================
   LAYER B — Subtle Ghost Layer Drift (pseudo-element positions)
   ============================================================ */

@keyframes driftSubtle {
    0%, 100% { transform: translate(-1px, -1px); }
    25%      { transform: translate( 0px, -2px); }
    50%      { transform: translate( 1px,  1px); }
    75%      { transform: translate(-2px,  0px); }
}

@keyframes driftSubtleHero {
    0%, 100% { transform: translate(-2px, -2px); }
    25%      { transform: translate( 1px, -4px); }
    50%      { transform: translate( 3px,  1px); }
    75%      { transform: translate(-3px,  3px); }
}

/* ============================================================
   LAYER C — Periodic Glitch Bursts
   ============================================================ */

/* --- Brand-scale bursts --- */

@keyframes burstJitter {
    0%, 94%, 100% { opacity: 0; clip-path: none; transform: translate(0); }
    95%           { opacity: 0.92; clip-path: polygon(0 12%,100% 8%,100% 44%,0 38%);  transform: translate(-6px,2px); }
    96%           { opacity: 0.88; clip-path: polygon(0 55%,100% 60%,100% 82%,0 75%);  transform: translate(5px,-1px); }
    97.5%         { opacity: 0.85; clip-path: polygon(0 25%,100% 22%,100% 55%,0 48%);  transform: translate(-3px,3px); }
}

@keyframes burstSplit {
    0%, 93%, 100% { opacity: 0; transform: translate(0); text-shadow: none; }
    94%           { opacity: 0.95; transform: translate(8px,-4px);  text-shadow: -4px 2px 0 rgba(0,240,255,0.6), 4px -2px 0 rgba(255,0,255,0.5); }
    95.5%         { opacity: 0.90; transform: translate(-6px,3px); text-shadow: 5px -1px 0 rgba(0,240,255,0.5), -5px 1px 0 rgba(255,0,255,0.5); }
    97%           { opacity: 0.80; transform: translate(3px,2px);  text-shadow: -2px -3px 0 rgba(0,240,255,0.5), 2px 3px 0 rgba(255,0,255,0.5); }
}

@keyframes burstSkew {
    0%, 92%, 100% { opacity: 0; transform: skewX(0); clip-path: none; }
    93%           { opacity: 0.90; transform: skewX(-3deg) translate(-4px,1px);  clip-path: polygon(0 10%,100% 15%,100% 48%,0 42%); }
    94.5%         { opacity: 0.85; transform: skewX(2deg) translate(5px,-2px);   clip-path: polygon(0 55%,100% 50%,100% 88%,0 82%); }
    96%           { opacity: 0.80; transform: skewX(-1.5deg) translate(-2px,0);   clip-path: polygon(0 30%,100% 35%,100% 62%,0 56%); }
}

@keyframes burstFlash {
    0%, 91%, 100% { opacity: 0; text-shadow: none; }
    92%           { opacity: 0.70; text-shadow: 0 0 15px var(--portal-cyan, #00f0ff), 0 0 30px var(--portal-cyan, #00f0ff); }
    94%           { opacity: 0.40; text-shadow: 0 0 8px var(--portal-cyan, #00f0ff); }
    96%           { opacity: 0.15; }
}

@keyframes burstGap {
    0%, 93%, 100% { opacity: 0; clip-path: none; }
    94%           { opacity: 0.92; clip-path: polygon(0% 0%,8% 0%,8% 100%,0% 100%,15% 0%,42% 0%,42% 100%,15% 100%,50% 0%,75% 0%,75% 100%,50% 100%,83% 0%,100% 0%,100% 100%,83% 100%); }
    96%           { opacity: 0.88; clip-path: polygon(0% 0%,18% 0%,18% 100%,0% 100%,28% 0%,52% 0%,52% 100%,28% 100%,60% 0%,88% 0%,88% 100%,60% 100%); }
    98%           { opacity: 0.82; clip-path: polygon(0% 0%,22% 0%,22% 100%,0% 100%,35% 0%,60% 0%,60% 100%,35% 100%,70% 0%,100% 0%,100% 100%,70% 100%); }
}

/* --- Hero-scale bursts (2-3x pixel offsets) --- */

@keyframes burstJitterHero {
    0%, 94%, 100% { opacity: 0; clip-path: none; transform: translate(0); }
    95%           { opacity: 0.95; clip-path: polygon(0 10%,100% 5%,100% 48%,0 36%);  transform: translate(-12px,5px); }
    96%           { opacity: 0.92; clip-path: polygon(0 52%,100% 58%,100% 85%,0 72%);  transform: translate(10px,-4px); }
    97.5%         { opacity: 0.88; clip-path: polygon(0 22%,100% 18%,100% 58%,0 44%);  transform: translate(-8px,6px); }
}

@keyframes burstSplitHero {
    0%, 93%, 100% { opacity: 0; transform: translate(0); text-shadow: none; }
    94%           { opacity: 0.97; transform: translate(14px,-7px);  text-shadow: -6px 4px 0 rgba(0,240,255,0.7), 6px -4px 0 rgba(255,0,255,0.6); }
    95.5%         { opacity: 0.93; transform: translate(-11px,5px);  text-shadow: 8px -2px 0 rgba(0,240,255,0.6), -8px 2px 0 rgba(255,0,255,0.6); }
    97%           { opacity: 0.85; transform: translate(5px,4px);    text-shadow: -4px -5px 0 rgba(0,240,255,0.6), 4px 5px 0 rgba(255,0,255,0.6); }
}

@keyframes burstSkewHero {
    0%, 92%, 100% { opacity: 0; transform: skewX(0); clip-path: none; }
    93%           { opacity: 0.93; transform: skewX(-5deg) translate(-8px,2px);  clip-path: polygon(0 8%,100% 12%,100% 50%,0 40%); }
    94.5%         { opacity: 0.88; transform: skewX(4deg) translate(10px,-4px);  clip-path: polygon(0 52%,100% 46%,100% 92%,0 78%); }
    96%           { opacity: 0.82; transform: skewX(-3deg) translate(-5px,1px);   clip-path: polygon(0 28%,100% 32%,100% 64%,0 54%); }
}

/* ============================================================
   TOPBAR BRAND
   ============================================================ */

.glitch-brand {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 4px;
    position: relative;
    display: inline-block;
    overflow: visible;
    animation: drift3D 8s ease-in-out infinite;
}

.glitch-brand::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: #0a0a0f;
    color: rgba(255, 0, 255, 0.75);
    pointer-events: none;
    animation:
        driftSubtle  8s  ease-in-out infinite,
        burstJitter  7s  steps(1)     infinite,
        burstSplit  11s  steps(1)     infinite,
        burstFlash   9s  steps(1)     infinite;
}

.glitch-brand::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: #0a0a0f;
    color: rgba(0, 255, 65, 0.65);
    pointer-events: none;
    animation:
        driftSubtle  8s  ease-in-out infinite,
        burstSkew   13s  steps(1)     infinite,
        burstGap    10s  steps(1)     infinite,
        burstSplit  11s  steps(1)     infinite;
    animation-delay: -3s, 0s, 0s, -5s;
}

/* ============================================================
   HERO / PAGE TITLES — 2-3x pixel offsets
   ============================================================ */

.hero-glitch,
.portal-hero__title {
    position: relative;
    display: inline-block;
    overflow: visible;
    animation: drift3Dhero 10s ease-in-out infinite;
}

.hero-glitch::before,
.portal-hero__title::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: #0a0a0f;
    color: rgba(255, 0, 255, 0.70);
    pointer-events: none;
    animation:
        driftSubtleHero 12s ease-in-out infinite,
        burstJitterHero  8s steps(1)      infinite,
        burstSkewHero    15s steps(1)      infinite,
        burstFlash       11s steps(1)      infinite;
}

.hero-glitch::after,
.portal-hero__title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: #0a0a0f;
    color: rgba(0, 255, 65, 0.60);
    pointer-events: none;
    animation:
        driftSubtleHero 12s ease-in-out infinite,
        burstGap        12s steps(1)     infinite,
        burstSplitHero  13s steps(1)     infinite,
        burstJitterHero  9s steps(1)     infinite;
    animation-delay: -5s, 0s, -6s, 0s;
}