/* ========================================================
   CARPOOL CRITICS - INTERFERENCE LAYER
   GENERATED by tools/interference.py --emit-css.
   Do not edit by hand: edit DESIGN_SYSTEM.md section 13.
   Every animation is stepped at 12fps. No blur, no easing.
   ======================================================== */

/* state: interference/host */
.intf-host {
  position: relative;
  overflow: hidden;
}
.intf-host > :not(.intf) {
  position: relative;
  z-index: 1;
}

/* state: interference/base */
.intf {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
  opacity: 1;
  border-radius: 0;
}

/* state: interference/vstripes */
.intf--vstripes {
  background-image: repeating-linear-gradient(
    to right,
    rgba(244, 240, 234, 0.06) 0 2px,
    transparent 2px 6px
  );
  animation: intf-stripes 0.333s steps(3) infinite;
}

/* state: interference/roll */
.intf--roll {
  background-image: linear-gradient(
    to bottom,
    transparent 0 52%,
    rgba(244, 240, 234, 0.05) 52% 56%,
    transparent 56% 100%
  );
  background-size: 100% 180%;
  background-repeat: repeat-y;
  animation: intf-roll 1s steps(12) infinite;
}

/* state: interference/noise */
.intf--noise {
  background-image: url("../images/interference/noise.png");
  background-repeat: repeat;
  background-size: 256px 64px;
  opacity: 0.08;
  animation: intf-noise 0.333s steps(4) infinite;
}
.intf--noise.intf--still { animation: none; }

/* state: interference/tear */
.intf--tear {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 7px,
    rgba(244, 240, 234, 0.18) 7px 8px
  );
  animation: intf-tear 0.166s steps(2) 1;
}

/* state: interference/headswitch */
.intf--headswitch {
  top: auto;
  bottom: 0;
  height: 8px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(244, 240, 234, 0.7) 0 2px,
    rgba(10, 10, 12, 0.7) 2px 4px
  );
  animation: intf-headswitch 0.166s steps(2) infinite;
}

/* state: interference/blackband */
.intf--blackband {
  background: var(--bg-asphalt);
  animation: intf-blackband 0.5s steps(6) 1 both;
}

/* state: interference/reduced */
@media (prefers-reduced-motion: reduce) {
  .intf--vstripes,
  .intf--roll,
  .intf--noise,
  .intf--headswitch,
  .intf--blackband {
    animation: none;
  }
  .intf--tear { animation: none; opacity: 0.5; }
}

@keyframes intf-stripes {
  from { background-position-x: 0; }
  to { background-position-x: -6px; }
}
@keyframes intf-roll {
  from { background-position-y: -90%; }
  to { background-position-y: 90%; }
}
@keyframes intf-noise {
  from { background-position-x: 0; }
  to { background-position-x: -256px; }
}
@keyframes intf-tear {
  0% { transform: translateX(-2px); }
  50% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@keyframes intf-headswitch {
  from { transform: translateX(-3px); }
  to { transform: translateX(3px); }
}
@keyframes intf-blackband {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}