/* ============================================================================
 * LetterFlood — glitch layer stylesheet (Layer 1.5: monochrome breakup)
 * Standalone companion to parallax.css. Loaded only where the glitch markup
 * (#layer-glitch) exists. Black & white only: channels, strobes, geometry,
 * scanlines, tear bars, dropout band. Driven by LetterFlood's velocity rig
 * (opacity + --bx/--by/--bs); stepped keyframes run gated by layer opacity.
 * ========================================================================== */

/* ============================================================
   LAYER 1.5: MONOCHROME BREAKUP — black & white signal glitch.
   White-blow channel (screen) + crushed-negative channel (multiply),
   strobe flash, tear bars, dropout band. Opacity/transform by JS.
   ============================================================ */
.px-glitch {
    z-index: 2;
    opacity: 0;
    /* Vertical tear + broken skew, JS-driven (compositor only) */
    transform: translate3d(0, var(--by, 0px), 0) skewX(var(--bs, 0deg));
}

.px-glitch_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    pointer-events: none;
}

/* Hot white channel: blown-out whites */
.px-glitch_a {
    filter: grayscale(1) contrast(1.6) brightness(1.25);
    mix-blend-mode: screen;
    transform: scale(1.05) translateX(var(--bx, 0px));
}

/* Crushed negative channel: solarized blacks, dragged the other way */
.px-glitch_b {
    filter: grayscale(1) invert(1) contrast(1.4) brightness(1.05);
    mix-blend-mode: multiply;
    transform: scale(1.05) translateX(calc(var(--bx, 0px) * -1));
}

/* Full-frame white flash: hard strobe blink at peak velocity (JS opacity) */
.px-glitch_flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    pointer-events: none;
}

/* Full-frame black strobe: offset blink rhythm (CSS steps, gated by layer) */
.px-glitch_flashB {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    animation: flashBlink 0.5s steps(2) infinite;
    pointer-events: none;
}

@keyframes flashBlink {
    0%, 49%  { opacity: 0; }
    50%, 100% { opacity: 0.55; }
}

/* Flashy geometry: triangles + rectangles teleporting on stepped rhythms.
   Static clip-paths (no per-frame cost); only stepped transforms animate. */
.px-glitch_tri1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 22vmax;
    height: 22vmax;
    background: #fff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    animation: triJump1 0.6s steps(2) infinite;
    pointer-events: none;
}

.px-glitch_tri2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 14vmax;
    height: 14vmax;
    background: #000;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    animation: triJump2 0.8s steps(2) infinite;
    pointer-events: none;
}

.px-glitch_rect1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 34vw;
    height: 5vh;
    background: #fff;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
    animation: rectJump1 0.55s steps(2) infinite;
    pointer-events: none;
}

.px-glitch_rect2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 12vw;
    height: 12vw;
    background: #000;
    outline: 2px solid #fff;
    animation: rectJump2 0.75s steps(3) infinite;
    pointer-events: none;
}

@keyframes triJump1 {
    0%   { transform: translate(8vw, 10vh) rotate(0deg); }
    50%  { transform: translate(68vw, 58vh) rotate(140deg); }
    100% { transform: translate(30vw, 78vh) rotate(300deg); }
}

@keyframes triJump2 {
    0%   { transform: translate(75vw, 12vh) rotate(20deg); }
    50%  { transform: translate(15vw, 66vh) rotate(200deg); }
    100% { transform: translate(55vw, 30vh) rotate(340deg); }
}

@keyframes rectJump1 {
    0%   { transform: translate(-4vw, 24vh); }
    50%  { transform: translate(62vw, 71vh); }
    100% { transform: translate(20vw, 44vh); }
}

@keyframes rectJump2 {
    0%   { transform: translate(80vw, 70vh) scale(1); }
    33%  { transform: translate(10vw, 20vh) scale(1.6); }
    66%  { transform: translate(48vw, 84vh) scale(0.7); }
    100% { transform: translate(80vw, 70vh) scale(1); }
}

.px-glitch_scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Bright tear-bars: stepped jumps, compositor-only (translateY in vh) */
.px-glitch_bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.65);
    animation: glitchBar 0.9s steps(2) infinite;
    pointer-events: none;
}

.px-glitch_bar2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(0, 0, 0, 0.65);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.7);
    animation: glitchBar2 0.7s steps(2) infinite;
    pointer-events: none;
}

/* Signal dropout: roaming black band = broadcast-break feel */
.px-glitch_drop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12vh;
    background: rgba(0, 0, 0, 0.55);
    animation: glitchDrop 1.3s steps(3) infinite;
    pointer-events: none;
}

@keyframes glitchBar {
    0%   { transform: translateY(12vh); }
    25%  { transform: translateY(64vh); }
    50%  { transform: translateY(33vh); }
    75%  { transform: translateY(81vh); }
    100% { transform: translateY(5vh); }
}

@keyframes glitchBar2 {
    0%   { transform: translateY(78vh); }
    33%  { transform: translateY(22vh); }
    66%  { transform: translateY(55vh); }
    100% { transform: translateY(8vh); }
}

@keyframes glitchDrop {
    0%   { transform: translateY(-14vh); }
    30%  { transform: translateY(46vh); }
    60%  { transform: translateY(72vh); }
    100% { transform: translateY(112vh); }
}