:root {
  --dolly: .72s;
  --hold: 4s;
  --fade: .9s;
  --black-gap: .55s;
  --thanks-in: .5s;
  --thanks-hold: 3s;
  --thanks-out: .6s;
  --loop-gap: .9s;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  font-family: "Manrope", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.scene {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
}

/* STATIC STAGE */
.scene-upper,
.scene-middle,
.scene-lower {
  position: absolute;
  left: 50%;
  width: min(100vw, 150vh);
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.scene-upper {
  top: 0;
  height: 39.5vh;
  background-image: url("assets/scene-upper.jpg");
  opacity: 0;
}

.scene-middle {
  top: 39.5vh;
  height: 14vh;
  background:
    radial-gradient(ellipse at 50% -125%,
      rgba(255,255,255,.09) 0%,
      rgba(255,255,255,.035) 28%,
      rgba(255,255,255,.01) 48%,
      rgba(0,0,0,0) 70%),
    linear-gradient(#050505, #030303 68%, #080808 100%);
  opacity: 0;
}

.scene-lower {
  top: 53.5vh;
  bottom: 0;
  background-image: url("assets/scene-lower.jpg");
  opacity: 0;
}

/* ONLY THE LIVE LOGO SCALES */
.logo {
  position: absolute;
  left: 50%;
  top: 47.2%;
  width: min(58vw, 920px);
  max-width: calc(100vw - 80px);
  height: auto;
  transform: translate(-50%, -50%) scale(.34);
  transform-origin: center center;
  opacity: 0;
  filter: brightness(.28) blur(5px);
  z-index: 4;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity, filter;
}

/*
  Animated reflection generated from the same logo.
  It scales with the logo but stays projected onto the floor.
*/
.logo::after {
  content: "";
}

/* Reflection element, created by CSS from the logo asset */
.scene::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 54.1%;
  width: min(58vw, 920px);
  max-width: calc(100vw - 80px);
  aspect-ratio: 1500 / 300;
  background: url("assets/reservoir-logo-white.png") center / contain no-repeat;
  transform: translate(-50%, 0) scale(.34, -.24);
  transform-origin: center top;
  opacity: 0;
  filter: blur(2.2px) brightness(.45);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.15) 42%, transparent 88%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.15) 42%, transparent 88%);
  z-index: 3;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

.blackout {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

.thanks {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  z-index: 20;
  color: white;
  pointer-events: none;
}

.thanks-text {
  padding: 0 24px;
  text-align: center;
  font-family: "Manrope", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(24px, 3vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.thanks-text span {
  display: inline-block;
  margin: 0 .22em;
  opacity: .56;
  font-weight: 700;
}

/* FADE THE STATIC LIGHT/STAGE IN */
.stage.play-scene .scene-upper,
.stage.play-scene .scene-middle,
.stage.play-scene .scene-lower {
  animation:
    stage-in 1.15s ease-out forwards,
    stage-out var(--fade) cubic-bezier(.45,.03,.92,.30)
      calc(var(--dolly) + var(--hold)) forwards;
}

/* LOGO DOLLY */
.stage.play-scene .logo {
  animation:
    logo-in var(--dolly) cubic-bezier(.15,.86,.19,1) forwards,
    logo-out var(--fade) cubic-bezier(.45,.03,.90,.30)
      calc(var(--dolly) + var(--hold)) forwards;
}

/* REFLECTION FOLLOWS LOGO SCALE, BUT FLOOR ITSELF NEVER MOVES */
.stage.play-scene .scene::after {
  animation:
    reflection-in var(--dolly) cubic-bezier(.15,.86,.19,1) forwards,
    reflection-out var(--fade) cubic-bezier(.45,.03,.90,.30)
      calc(var(--dolly) + var(--hold)) forwards;
}

.stage.play-scene .blackout {
  animation:
    blackout-in var(--fade) cubic-bezier(.45,.03,.92,.30)
      calc(var(--dolly) + var(--hold)) forwards;
}

.stage.play-thanks .thanks {
  animation:
    thanks-in var(--thanks-in) ease-out forwards,
    thanks-out var(--thanks-out) ease-in
      calc(var(--thanks-in) + var(--thanks-hold)) forwards;
}

@keyframes stage-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes stage-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes logo-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.34);
    filter: brightness(.28) blur(5px);
  }
  32% {
    opacity: .95;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1) blur(0);
  }
}

@keyframes reflection-in {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(.34, -.24);
    filter: blur(3.4px) brightness(.22);
  }
  45% {
    opacity: .05;
  }
  100% {
    opacity: .16;
    transform: translate(-50%, 0) scale(1, -.24);
    filter: blur(2.2px) brightness(.45);
  }
}

@keyframes logo-out {
  0%   { opacity: 1; filter: brightness(1) blur(0); }
  32%  { opacity: .97; filter: brightness(.60) blur(.1px); }
  66%  { opacity: .55; filter: brightness(.16) blur(.5px); }
  100% { opacity: 0; filter: brightness(0) blur(1.5px); }
}

@keyframes reflection-out {
  0%   { opacity: .16; }
  45%  { opacity: .08; }
  100% { opacity: 0; }
}

@keyframes blackout-in {
  0%   { opacity: 0; }
  36%  { opacity: .17; }
  68%  { opacity: .66; }
  100% { opacity: 1; }
}

@keyframes thanks-in {
  from { opacity: 0; transform: scale(.985); filter: blur(2px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes thanks-out {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(1.5px); }
}

@media (max-width: 800px) {
  .logo,
  .scene::after {
    width: 76vw;
    max-width: calc(100vw - 32px);
  }

  .scene-upper,
  .scene-middle,
  .scene-lower {
    width: 100vw;
  }

  .thanks-text {
    font-size: clamp(22px, 7vw, 34px);
  }
}