:root {
  --black: #020202;
  --cycle: 6.2s;
  --band-top: 22%;
  --band-height: 58%;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #0b0b0b;
}

body {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
}

.stage {
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.media-wall {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.top-rule {
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  top: calc(var(--band-top) - 9px);
  height: 7px;
  background: #fff;
}

.wall-band {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: var(--band-top);
  height: var(--band-height);
  overflow: hidden;
}

.wall-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86), transparent 8%, transparent 91%, rgba(0,0,0,.86)),
    linear-gradient(180deg, rgba(0,0,0,.1), transparent 18%, transparent 84%, rgba(0,0,0,.18));
}

.wall-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 13px);
}

.wall-camera,
.wall-grid {
  position: absolute;
  inset: 0;
}

.wall-camera {
  transform: translate3d(0, 0, 0);
}

.wall-grid {
  inset: 0;
}

.wall-grid-back {
  z-index: 1;
  opacity: .92;
  filter: saturate(1.12) contrast(1.1) brightness(1.08);
}

.wall-grid-front {
  z-index: 4;
  filter: saturate(1.18) contrast(1.14) brightness(1.14);
  transform-origin: 49% 48%;
  animation: frontWallZoom var(--cycle) linear infinite;
  animation-delay: var(--phase, 0s);
  will-change: transform, opacity;
}

.tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  background: #060606 var(--poster) center / cover no-repeat;
  border: 3px solid #050505;
  filter: saturate(var(--sat)) contrast(var(--con)) brightness(calc(var(--bri) * 1.12)) blur(.22px);
  transform: translate3d(0, 0, 0);
}

.wall-grid-front .tile {
  border-width: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04);
  filter: saturate(1.18) contrast(1.08) brightness(1.16) blur(.14px);
}

.tile video {
  position: absolute;
  inset: -9%;
  width: 118%;
  height: 118%;
  object-fit: cover;
  object-position: var(--pos);
  opacity: .78;
  filter: saturate(1.1) contrast(1.08);
  transform: translate3d(0, 0, 0) scale(1.04);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 14%, transparent 72%, rgba(255,255,255,.08)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
  opacity: .22;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse at 48% 48%, transparent 0 56%, rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.2));
}

.tile.hot {
  --sat: 1.12;
  --con: 1.12;
  --bri: .9;
}

.tile.cool {
  --sat: 1.18;
  --con: 1.2;
  --bri: .94;
}

.tile.white {
  --sat: .92;
  --con: 1.06;
  --bri: 1.32;
}

.tile.dark {
  --sat: 1.28;
  --con: 1.24;
  --bri: .72;
}

.tile.pop {
  z-index: 3;
}

.grid-bars {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--band-top);
  height: var(--band-height);
  z-index: 6;
  pointer-events: none;
  opacity: .12;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(0,0,0,.84) 78px 85px),
    repeating-linear-gradient(180deg, transparent 0 73px, rgba(0,0,0,.9) 73px 80px);
}

.wall-title {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 52%;
  width: min(760px, 90vw);
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 18px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.95);
  transform: translate(-50%, -50%);
}

.wall-title h1 {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.wall-title p {
  margin: 12px 0 0;
  font-family: "Yu Gothic", Meiryo, sans-serif;
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 700;
}

.no-title .wall-title {
  display: none;
}

.ai-title .wall-title {
  top: 52.5%;
  opacity: .88;
}

.ai-title .wall-title h1 {
  font-size: clamp(34px, 4.25vw, 60px);
  font-weight: 760;
  text-shadow: 0 3px 16px rgba(0,0,0,.72), 0 0 2px rgba(0,0,0,.9);
}

.ai-title .wall-title p {
  margin-top: 10px;
  font-size: clamp(15px, 1.6vw, 22px);
  opacity: .9;
}

.embed-fit {
  --band-top: 13%;
  --band-height: 78%;
}

.embed-fit .top-rule {
  top: calc(var(--band-top) - 6px);
  height: 4px;
}

.embed-fit .wall-band::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), transparent 7%, transparent 92%, rgba(0,0,0,.72)),
    linear-gradient(180deg, rgba(0,0,0,.04), transparent 18%, transparent 86%, rgba(0,0,0,.1));
}

.embed-fit .wall-band::after {
  opacity: .1;
}

.embed-fit .wall-grid-back {
  opacity: .96;
  filter: saturate(1.08) contrast(1.05) brightness(1.16);
}

.embed-fit .wall-grid-front {
  filter: saturate(1.14) contrast(1.06) brightness(1.18);
  transform-origin: 45% 56%;
}

.embed-fit .tile {
  border-width: 2px;
  filter: saturate(var(--sat)) contrast(1.05) brightness(calc(var(--bri) * 1.18)) blur(.12px);
}

.embed-fit .tile::before {
  opacity: .16;
}

.embed-fit .tile::after {
  background:
    radial-gradient(ellipse at 48% 48%, transparent 0 60%, rgba(0,0,0,.14) 100%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.12));
}

.embed-fit .grid-bars {
  opacity: .08;
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(0,0,0,.7) 58px 63px),
    repeating-linear-gradient(180deg, transparent 0 54px, rgba(0,0,0,.76) 54px 59px);
}

.embed-fit .wall-title {
  top: 56%;
  left: 45%;
  width: 86%;
  opacity: .72;
}

.embed-fit .wall-title h1 {
  font-size: clamp(22px, 5.1vw, 36px);
  font-weight: 740;
  text-shadow: 0 2px 10px rgba(0,0,0,.66), 0 0 2px rgba(0,0,0,.84);
}

.embed-fit .wall-title p {
  margin-top: 6px;
  font-size: clamp(10px, 1.8vw, 14px);
}

.embed-fit .scanlines {
  opacity: .1;
}

.embed-fit .vignette {
  background:
    radial-gradient(ellipse at 46% 54%, transparent 0 62%, rgba(0,0,0,.12) 82%, rgba(0,0,0,.48) 100%),
    linear-gradient(180deg, rgba(0,0,0,.02), transparent 20%, transparent 76%, rgba(0,0,0,.2));
}

.scanlines,
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scanlines {
  z-index: 7;
  opacity: .14;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 1px, transparent 1px 8px),
    linear-gradient(90deg, rgba(0,0,0,.8), transparent 15%, transparent 82%, rgba(0,0,0,.82));
  animation: scan 6s linear infinite;
}

.vignette {
  z-index: 8;
  background:
    radial-gradient(ellipse at 51% 45%, transparent 0 58%, rgba(0,0,0,.16) 80%, rgba(0,0,0,.58) 100%),
    linear-gradient(180deg, rgba(0,0,0,.04), transparent 20%, transparent 73%, rgba(0,0,0,.32));
}

@keyframes frontWallZoom {
  0% {
    opacity: .5;
    transform: translate3d(-.7%, -.36%, 0) scale(.94);
  }
  24% {
    opacity: .62;
    transform: translate3d(-.05%, -.2%, 0) scale(1.12);
  }
  48% {
    opacity: .72;
    transform: translate3d(.62%, -.28%, 0) scale(1.32);
  }
  72% {
    opacity: .78;
    transform: translate3d(1.2%, -.4%, 0) scale(1.52);
  }
  92% {
    opacity: .78;
    transform: translate3d(1.72%, -.52%, 0) scale(1.68);
  }
  96% {
    opacity: 0;
    transform: translate3d(1.86%, -.56%, 0) scale(1.74);
  }
  97% {
    opacity: 0;
    transform: translate3d(-.7%, -.36%, 0) scale(.94);
  }
  100% {
    opacity: .5;
    transform: translate3d(-.7%, -.36%, 0) scale(.94);
  }
}

@keyframes scan {
  from { transform: translateY(-16px); }
  to { transform: translateY(16px); }
}