/* Glitch background (home page; later also Quiz and the film's end).
   Rewritten from the Gatsby site's glitch-background.tsx; every value is
   copied unchanged, including a few transforms the browser ignores as
   invalid (e.g. unitless "1.1"), so it renders exactly as the original did.
   glitch-background.js moves the tear with the mouse and varies the flashes. */

.glitch { display: flex; position: absolute; inset: 0; z-index: 0; flex: 1;
  flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.glitch__layer { backface-visibility: hidden; position: absolute; inset: 0; z-index: 0;
  background-image: url(/assets/img/glitch-overlay.jpg); background-position: center; background-size: cover; }

/* 1: the opener GIF */
.glitch__gif { background-image: url(/assets/img/ieomd-opener.gif); }
/* 2: a copy of the GIF that flashes every 15 s */
.glitch__gif-flash { background-image: url(/assets/img/ieomd-opener.gif);
  transform: translate3d(0, 1.3, 0) scale3d(-1, -1, 1);
  animation: glitch-flash-2 15s steps(1, end) infinite; }
/* 3: the horizontal tear; follows the mouse, and speeds up while it moves */
.glitch__tear { transform: translate3d(-1.1, 0, 0);
  animation: glitch-horizontal 4s infinite linear alternate; }
.glitch__tear.is-fast { animation: glitch-horizontal-fast 0.5s infinite linear alternate; }
/* 4: the vertical tear */
.glitch__vertical { transform: translate3d(-1.1, 0, 0);
  animation: glitch-vertical 10s infinite linear alternate; }
/* 5: a flash at a varying period (set by the script) */
.glitch__flash { transform: translate3d(0, 1.1, 0) scale3d(-1, -1, 1);
  animation: glitch-flash var(--flash-period, 5s) steps(1, end) infinite; }
.glitch__flash.is-longer { animation-name: glitch-flash-longer; }
/* 6: a flash every 10 s */
.glitch__flash-2 { transform: translate3d(0, 1.3, 0) scale3d(-1, -1, 1);
  animation: glitch-flash-2 10s steps(1, end) infinite; }

@keyframes glitch-horizontal {
  0% { opacity: 1; transform: translate3d(-10px, 0, 0); clip-path: polygon(var(--rectangle-left) 25%, var(--rectangle-right) 25%, var(--rectangle-right) 30%, var(--rectangle-left) 30% ); }
  1.5% { clip-path: polygon( var(--rectangle-left) 3%, var(--rectangle-right) 3%, var(--rectangle-right) 3%, var(--rectangle-left) 3% ); }
  2.5% { clip-path: polygon( var(--rectangle-left) 5%, var(--rectangle-right) 5%, var(--rectangle-right) 20%, var(--rectangle-left) 20% ); }
  3.5% { clip-path: polygon( var(--rectangle-left) 20%, var(--rectangle-right) 20%, var(--rectangle-right) 20%, var(--rectangle-left) 20% ); }
  4.5% { clip-path: polygon( var(--rectangle-left) 40%, var(--rectangle-right) 40%, var(--rectangle-right) 40%, var(--rectangle-left) 40% ); }
  5.5% { clip-path: polygon( var(--rectangle-left) 52%, var(--rectangle-right) 52%, var(--rectangle-right) 59%, var(--rectangle-left) 59% ); }
  6.5% { clip-path: polygon( var(--rectangle-left) 60%, var(--rectangle-right) 60%, var(--rectangle-right) 60%, var(--rectangle-left) 60% ); }
  7.5% { clip-path: polygon( var(--rectangle-left) 75%, var(--rectangle-right) 75%, var(--rectangle-right) 75%, var(--rectangle-left) 75% ); }
  8.5% { clip-path: polygon( var(--rectangle-left) 65%, var(--rectangle-right) 65%, var(--rectangle-right) 40%, var(--rectangle-left) 40% ); }
  9.5% { clip-path: polygon( var(--rectangle-left) 45%, var(--rectangle-right) 45%, var(--rectangle-right) 50%, var(--rectangle-left) 50% ); }
  10% { clip-path: polygon( var(--rectangle-left) 14%, var(--rectangle-right) 14%, var(--rectangle-right) 33%, var(--rectangle-left) 33% ); }
  10.9% { opacity: 1; transform: translate3d(-10px, var(--rectangle-right), var(--rectangle-left)); }
  11%, 100% { opacity: 0; transform: translate3d(0,var(--rectangle-right), var(--rectangle-left)); clip-path: polygon( var(--rectangle-left) 0, var(--rectangle-right) 0, var(--rectangle-right) 0, var(--rectangle-left) 0 ); }
}

@keyframes glitch-horizontal-fast {
  0% { opacity: 1; transform: translate3d(-10px, 0, 0); clip-path: polygon(var(--rectangle-left) 25%, var(--rectangle-right) 25%, var(--rectangle-right) 30%, var(--rectangle-left) 30% ); }
  9% { clip-path: polygon( var(--rectangle-left) 3%, var(--rectangle-right) 3%, var(--rectangle-right) 3%, var(--rectangle-left) 3% ); }
  18% { clip-path: polygon( var(--rectangle-left) 5%, var(--rectangle-right) 5%, var(--rectangle-right) 20%, var(--rectangle-left) 20% ); }
  27% { clip-path: polygon( var(--rectangle-left) 20%, var(--rectangle-right) 20%, var(--rectangle-right) 20%, var(--rectangle-left) 20% ); }
  36% { clip-path: polygon( var(--rectangle-left) 40%, var(--rectangle-right) 40%, var(--rectangle-right) 40%, var(--rectangle-left) 40% ); }
  45% { clip-path: polygon( var(--rectangle-left) 52%, var(--rectangle-right) 52%, var(--rectangle-right) 59%, var(--rectangle-left) 59% ); }
  54% { clip-path: polygon( var(--rectangle-left) 60%, var(--rectangle-right) 60%, var(--rectangle-right) 60%, var(--rectangle-left) 60% ); }
  63% { clip-path: polygon( var(--rectangle-left) 75%, var(--rectangle-right) 75%, var(--rectangle-right) 75%, var(--rectangle-left) 75% ); }
  72% { clip-path: polygon( var(--rectangle-left) 65%, var(--rectangle-right) 65%, var(--rectangle-right) 40%, var(--rectangle-left) 40% ); }
  81% { clip-path: polygon( var(--rectangle-left) 45%, var(--rectangle-right) 45%, var(--rectangle-right) 50%, var(--rectangle-left) 50% ); }
  90% { clip-path: polygon( var(--rectangle-left) 14%, var(--rectangle-right) 14%, var(--rectangle-right) 33%, var(--rectangle-left) 33% ); }
  96% { opacity: 1; transform: translate3d(-10px, var(--rectangle-right), var(--rectangle-left)); }
  96%, 100% { opacity: 0; transform: translate3d(0,var(--rectangle-right), var(--rectangle-left)); clip-path: polygon( var(--rectangle-left) 0, var(--rectangle-right) 0, var(--rectangle-right) 0, var(--rectangle-left) 0 ); }
}

@keyframes glitch-vertical {
  0% { opacity: 1; transform: translate3d(0, -5px, 0) scale3d(-1, -1, 1); clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%); }
  1.5% { clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%); }
  2% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
  2.5% { clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
  3% { clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%); }
  5% { clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%); }
  5.5% { clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%); }
  7% { clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%); }
  8% { clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
  9.1%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
}

@keyframes glitch-flash {
  0% { opacity: 0.2; transform: translate3d(10px, 5px, 0); }
  1%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

@keyframes glitch-flash-longer {
  0% { opacity: 0.2; transform: translate3d(10px, 5px, 0); }
  25%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

@keyframes glitch-flash-2 {
  0% { opacity: 0.2; transform: translate3d(5px, 10px, 0); }
  1%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}