:root {
    --parallax-speed: 40s;
    --parallax-speed2: 20s;
    --offset-amount: 5%;
    --sixtyfour-anim-speed: 2.5s;
    --glitch-speed-fast: 7.15s;
    --glitch-speed-med: 9.6s;
    --focus-glitch-speed1: 5s;
    --focus-glitch-speed2: 7s;
    --focus-glitch-speed3: 14s;
    --text-glitch-speed: 2.8s;
    --font-sixtyfour: 'Sixtyfour', system-ui;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #1f1d1c;
    overflow: hidden;
    min-height: 100vh;
    position: relative;
}

.parallax-layer,
.glitch-container::before,
.glitch-container::after {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.parallax-layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    will-change: background-position;
}

.background-layer {
    background-image: url('images/background.png');
    background-size: contain; /* Or cover, depending on desired cat image scaling */
    z-index: 1;
    animation: focus-glitch-3 var(--focus-glitch-speed3) infinite;
}

.foreground-wrapper {
    position: absolute;
    inset: 0;
    will-change: filter, opacity; /* Added opacity just in case */
    mix-blend-mode: screen; 
    opacity: 1;
    visibility: visible;
}

#wrapper-1 {
    z-index: 20;
    animation: focus-glitch-1 var(--focus-glitch-speed1) steps(8, jump-none) infinite alternate;
}

#wrapper-2 {
    z-index: 10;
    animation: focus-glitch-2 var(--focus-glitch-speed2) steps(12, jump-none) infinite alternate;
}

.foreground-layer {
    background-size: auto 100vh;
    background-position-y: center;
    mix-blend-mode: screen;
    position: absolute;
    inset: 0;
    opacity: 1;
    visibility: visible;
}

.glitch-container {
    position: relative;
    overflow: hidden;
}

#foreground-1 {
    background-image: url('images/foreground1.png');
    height: 100vh;
    animation: parallax-move-1 var(--parallax-speed) linear infinite alternate;
}

#foreground-2 {
    background-image: url('images/foreground2.png');
    height: 100vh;
    animation: parallax-move-2 var(--parallax-speed2) linear infinite alternate;
}

.glitch-container::before,
.glitch-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: inherit;
    background-repeat: no-repeat;
    background-size: inherit;
    background-position: inherit;
    opacity: 0;
    pointer-events: none;
    will-change: transform, clip-path, opacity;
}


#foreground-1.glitch-container::before {
    filter: hue-rotate(180deg);
    mix-blend-mode: multiply;
    animation: glitch-effect-1 var(--glitch-speed-fast) steps(4, end) infinite alternate;
}
#foreground-1.glitch-container::after {
    filter: saturate(2);
    mix-blend-mode: lighten; 
    animation: glitch-effect-2 var(--glitch-speed-med) steps(5, end) infinite alternate-reverse;
}


#foreground-2.glitch-container::before {
    filter: hue-rotate(90deg);
    mix-blend-mode: screen;
    animation: glitch-effect-1 var(--glitch-speed-med) steps(3, end) infinite alternate-reverse;
}
#foreground-2.glitch-container::after {
    filter: contrast(1.5);
    mix-blend-mode: difference;
    animation: glitch-effect-2 var(--glitch-speed-fast) steps(6, end) infinite alternate;
}


@keyframes parallax-move-1 {
    from { background-position-x: calc(50% + var(--offset-amount)); }
    to   { background-position-x: calc(50% - var(--offset-amount)); }
}
@keyframes parallax-move-2 {
    from { background-position-x: calc(50% - (var(--offset-amount) * 1.5)); }
    to   { background-position-x: calc(50% + (var(--offset-amount) * 1.5)); }
}

@keyframes focus-glitch-1 {
  0%, 12%, 100% { filter: blur(0px); }
  6%  { filter: blur(3px); }
  8%  { filter: blur(1px); }
}
@keyframes focus-glitch-2 {
  0%, 8%, 100% { filter: blur(0px); }
  4%  { filter: blur(5px); }
  6%  { filter: blur(2px); }
}
@keyframes focus-glitch-3 {
    0%, 30%, 55%, 90%, 100% { filter: blur(0px); opacity: 1.0;}
    40%  { filter: blur(1px); opacity: 0.8;}
    95%  { filter: blur(7px); opacity: 0.6;}
  }


@keyframes glitch-effect-1 {
  0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
  1% { transform: translate(-8px, 3px); clip-path: inset(10% 0 85% 0); opacity: 0.9;}
  1.5% { transform: translate(5px, -2px); clip-path: inset(90% 0 5% 0); opacity: 0.7;}
  5%, 60%, 62% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0;}
  61% { transform: translate(-3px, 6px); clip-path: inset(40% 0 45% 0); opacity: 1.0;}
  61.5% { transform: translate(7px, -4px); clip-path: inset(75% 0 10% 0); opacity: 0.8;}
}
@keyframes glitch-effect-2 {
  0%, 10%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
  11% { transform: translate(2px, -5px); clip-path: inset(5% 90% 80% 0); opacity: 0.8;}
  11.5% { transform: translate(-4px, 4px); clip-path: inset(30% 0 60% 85%); opacity: 1.0;}
  12%, 45%, 47% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0;}
  46% { transform: translate(6px, -2px); clip-path: inset(50% 50% 30% 30%); opacity: 0.9;}
  46.5% { transform: translate(-3px, 7px); clip-path: inset(88% 10% 2% 5%); opacity: 1.0;}
}

.text-layer {
    position: absolute; inset: 0; z-index: 50;
    pointer-events: none; display: flex;
    align-items: center; justify-content: center;
    padding: 10px; width: 80vmin; margin: 0 auto;
}

.main-text {
    font-family: var(--font-sixtyfour);
    font-size: clamp(4vmin, 8vmin, 110px);
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 4px #ffffff;
    line-height: 1.3;
    text-align: center;
    font-variation-settings: 'BLED' 30, 'SCAN' -10;
    mix-blend-mode: screen; 
    opacity: 0.95;
    position: relative;
    animation:
        animate-sixtyfour-global var(--sixtyfour-anim-speed) ease-in-out infinite,
        text-glitch-translate var(--text-glitch-speed) steps(5, end) infinite;
    will-change: font-variation-settings, transform;
}

@keyframes animate-sixtyfour-global {
    0% { font-variation-settings: 'BLED' 40, 'SCAN' 0; }
    50% { font-variation-settings: 'BLED' 0, 'SCAN' 30; }
    100% { font-variation-settings: 'BLED' 40, 'SCAN' 0; }
}

@keyframes text-glitch-translate {
    0%, 10%, 12%, 100% { transform: translate(0, 0); }
    11% { transform: translate(-3px, 2px); }
    11.5% { transform: translate(2px, -1px); }
}