/* =========================
   RESET
========================= */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#111;
  font-family:Arial, Helvetica, sans-serif;
}

/* =========================
   BODY HEARTBEAT
========================= */

body{
  animation:
    heartRipple 4s ease-in-out infinite;
}

/* =========================
   MAIN CONTAINER
========================= */

.placeholder{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;

  will-change:transform;

  animation:
    ambientTremor 180s linear infinite;
}

/* =========================
   STREAMS
========================= */

.stream{
  position:absolute;

  left:0;

  width:300vw;
  height:30vh;

  display:flex;

  z-index:1;

  will-change:transform;
}

.row-1{ top:0vh; }
.row-2{ top:20vh; }
.row-3{ top:40vh; }
.row-4{ top:60vh; }
.row-5{ top:80vh; }

.stream-left{
  animation:
    scrollLeft 120s linear infinite;
}

.stream-right{
  animation:
    scrollRight 120s linear infinite;
}

/* =========================
   TILES
========================= */

.tile{
  position:relative;

  width:30vw;
  height:20vh;

  flex-shrink:0;

  overflow:hidden;

  z-index:2;

  pointer-events:none;

  transition:
    transform .3s ease,
    filter .3s ease,
    box-shadow .3s ease;
}

.selection-mode .tile{
  pointer-events:auto;
}

.tile img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  pointer-events:none;

  filter:
    brightness(.72)
    contrast(1.05)
    saturate(1.05);
}

/* =========================
   TILE GLOW
========================= */

.tile::after{
  content:"";

  position:absolute;
  inset:0;

  opacity:0;

  transition:opacity .25s ease;

  background:
    radial-gradient(
      circle,
      rgba(120,240,255,.4),
      rgba(120,240,255,.12),
      transparent 72%
    );
}

.tile:hover{
  z-index:50;

  transform:scale(1.04);

  filter:
    brightness(1.15)
    saturate(1.15);

  box-shadow:
    0 0 20px rgba(120,240,255,.35),
    0 0 40px rgba(120,240,255,.2);
}

.tile:hover::after{
  opacity:1;
}

/* =========================
   OVERLAY
========================= */

.overlay{
  position:absolute;

  z-index:100;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  text-align:center;

  color:white;

  transition:
    top 1s ease,
    left 1s ease,
    right 1s ease,
    transform 1s ease,
    text-align 1s ease;
}

.overlay h1{
  margin:0;

  font-size:clamp(3rem,8vw,7rem);

  text-shadow:
    0 0 8px rgba(255,255,255,.9),
    0 0 22px rgba(92,240,255,.75),
    0 0 48px rgba(92,240,255,.45);
}

.overlay p{
  margin-top:12px;

  font-size:clamp(1rem,2vw,1.35rem);

  text-shadow:
    0 0 8px rgba(255,255,255,.75),
    0 0 18px rgba(92,240,255,.55);
}

/* =========================
   OVERLAY MOVE
========================= */

.selection-mode .overlay{

  top:40px;

  left:40px;
  right:auto;

  transform:none;

  text-align:left;
}

/* =========================
   SCROLL ANIMATION
========================= */

@keyframes scrollLeft{

  from{
    transform:translateX(0vw);
  }

  to{
    transform:translateX(-100vw);
  }
}

@keyframes scrollRight{

  from{
    transform:translateX(-100vw);
  }

  to{
    transform:translateX(0vw);
  }
}

/* =========================
   SCREEN SHAKE
========================= */

.screen-shake{
  animation:
    screenShake .45s cubic-bezier(.36,.07,.19,.97);
}

@keyframes screenShake{

  0%{
    transform:translate(0px,0px);
  }

  10%{
    transform:translate(-4px,2px);
  }

  20%{
    transform:translate(4px,-2px);
  }

  30%{
    transform:translate(-6px,3px);
  }

  40%{
    transform:translate(6px,-3px);
  }

  50%{
    transform:translate(-4px,2px);
  }

  60%{
    transform:translate(4px,-2px);
  }

  70%{
    transform:translate(-2px,1px);
  }

  80%{
    transform:translate(2px,-1px);
  }

  90%{
    transform:translate(-1px,1px);
  }

  100%{
    transform:translate(0px,0px);
  }
}

/* =========================
   HEART RIPPLE
========================= */

@keyframes heartRipple{

  0%{
    transform:scale(1);
  }

  /* first beat */

  2%{
    transform:scale(1.004);
  }

  4%{
    transform:scale(1);
  }

  /* second beat later */

  10%{
    transform:scale(1.006);
  }

  12%{
    transform:scale(1);
  }

  100%{
    transform:scale(1);
  }
}
/* =========================
   AMBIENT TREMOR
========================= */

@keyframes ambientTremor{

  0%{
    transform:translate(0px,0px);
  }

  /* idle */

  98.8%{
    transform:translate(0px,0px);
  }

  /* 2 second tremor */

  99%{
    transform:translate(-1px,0px);
  }

  99.1%{
    transform:translate(1px,0px);
  }

  99.2%{
    transform:translate(-1px,1px);
  }

  99.3%{
    transform:translate(1px,-1px);
  }

  99.4%{
    transform:translate(-2px,1px);
  }

  99.5%{
    transform:translate(2px,-1px);
  }

  99.6%{
    transform:translate(-1px,0px);
  }

  99.7%{
    transform:translate(1px,0px);
  }

  99.8%{
    transform:translate(0px,0px);
  }

  100%{
    transform:translate(0px,0px);
  }
}