/* Glitch Transition Styles */
.glitch-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
    visibility: hidden;
}

.glitch-container.is-glitching {
    visibility: visible;
}

.glitch__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.glitch-container.is-glitching .glitch__layer {
    animation-duration: 0.8s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

/* Assigning backgrounds for each service transition */
.glitch-container[data-transition-to="1"] .glitch__layer { background-image: url('images/full-event.png'); }
.glitch-container[data-transition-to="2"] .glitch__layer { background-image: url('images/narrative.png'); }
.glitch-container[data-transition-to="3"] .glitch__layer { background-image: url('images/analytics.png'); }
.glitch-container[data-transition-to="4"] .glitch__layer { background-image: url('images/alerts.png'); }


/* Glitch Animations */
.glitch-container.is-glitching .glitch__layer:nth-child(1) {
    transform: translateX(0);
    animation-name: glitch-anim-1;
}
.glitch-container.is-glitching .glitch__layer:nth-child(2) {
    transform: translateX(20px);
    animation-name: glitch-anim-2;
    opacity: 0.8;
    filter: brightness(1.2);
}
.glitch-container.is-glitching .glitch__layer:nth-child(3) {
    transform: translateX(-20px);
    animation-name: glitch-anim-3;
    opacity: 0.7;
}

@keyframes glitch-anim-1 {
  0% { clip-path: inset(15% 0 80% 0); }
  10% { clip-path: inset(50% 0 25% 0); }
  20% { clip-path: inset(85% 0 5% 0); }
  30% { clip-path: inset(40% 0 40% 0); }
  40% { clip-path: inset(70% 0 10% 0); }
  50% { clip-path: inset(35% 0 55% 0); }
  60% { clip-path: inset(80% 0 10% 0); }
  70% { clip-path: inset(20% 0 70% 0); }
  80% { clip-path: inset(60% 0 30% 0); }
  90% { clip-path: inset(90% 0 5% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes glitch-anim-2 {
  0% { clip-path: inset(95% 0 2% 0); }
  10% { clip-path: inset(20% 0 75% 0); }
  20% { clip-path: inset(60% 0 15% 0); }
  30% { clip-path: inset(5% 0 80% 0); }
  40% { clip-path: inset(45% 0 35% 0); }
  50% { clip-path: inset(90% 0 2% 0); }
  60% { clip-path: inset(10% 0 60% 0); }
  70% { clip-path: inset(75% 0 5% 0); }
  80% { clip-path: inset(30% 0 50% 0); }
  90% { clip-path: inset(55% 0 20% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes glitch-anim-3 {
  0% { clip-path: inset(5% 0 90% 0); }
  10% { clip-path: inset(80% 0 10% 0); }
  20% { clip-path: inset(30% 0 60% 0); }
  30% { clip-path: inset(70% 0 5% 0); }
  40% { clip-path: inset(10% 0 80% 0); }
  50% { clip-path: inset(55% 0 30% 0); }
  60% { clip-path: inset(25% 0 50% 0); }
  70% { clip-path: inset(65% 0 20% 0); }
  80% { clip-path: inset(0% 0 95% 0); }
  90% { clip-path: inset(40% 0 45% 0); }
  100% { clip-path: inset(0 0 0 0); }
}