/* WRM · Entertainment credentials. Engine styles from the Traffic motion kit; the look is a dark cinema: real frames as
   the light, Archivo (condensed for billing, regular for reading), Instrument Serif italic for the ideas. WRM's three
   colours each own a case: red Dhurandhar, teal Spider-Man, amber Tumbbad. */
:root {
  --stage: #0B0A09; --paper: #F3EFE7; --ink: #0B0A09; --soft: #D3CDC2; --mute: #9A938A; --dim: #5F5A53; --line: #2B2824;
  --red: #EF4854; --teal: #00ACC1; --amber: #FEBE46; --accent: var(--paper);
  --f: "Archivo", Arial, sans-serif; --serif: "Instrument Serif", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
p, h1, h2, h3, figure { margin: 0; }
#viewport { position: fixed; inset: 0; background: var(--stage); }
#viewport.idle { cursor: none; }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%;
  overflow: hidden; font-family: var(--f); -webkit-font-smoothing: antialiased; color: var(--paper); }
/* film grain over everything, so frames from different sources read as one world */
#stage::after { content: ""; position: absolute; inset: -50%; z-index: 4; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.slide { position: absolute; inset: 0; overflow: hidden; }
.slide.dark, .slide.lite { background: var(--stage); color: var(--paper); }

/* type */
.abs { position: absolute; }
.col { display: flex; flex-direction: column; }
.w { display: inline-block; }
.cond { font-stretch: 62%; font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: .5px; }
.title { font-size: 92px; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.5px; }
.idea { font-size: 132px; line-height: 1.0; }
.body { font-size: 34px; font-weight: 400; line-height: 1.38; color: var(--soft); }
.cap { font-size: 24px; font-weight: 500; letter-spacing: .3px; color: var(--mute); }
.meta { font-size: 24px; font-weight: 600; font-stretch: 75%; letter-spacing: 3px; text-transform: uppercase; color: var(--mute); }
.foot { position: absolute; bottom: 52px; font-size: 20px; font-weight: 500; letter-spacing: .4px; color: #6F6A62; z-index: 3; }
.r { color: var(--red); } .t { color: var(--teal); } .a { color: var(--amber); }
.rule { position: absolute; height: 6px; width: 96px; }
.rule.r { background: var(--red); } .rule.t { background: var(--teal); } .rule.a { background: var(--amber); }

/* frames: a tile is a piece of real work; click opens it, with sound where it has sound */
.tile { position: absolute; overflow: hidden; border-radius: 14px; background: #161412; cursor: zoom-in; }
.tile .bg { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(26px) brightness(.45); }
.tile video, .tile .fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.fit video, .tile.fit .fg { object-fit: contain; }
.tile .cap2 { position: absolute; left: 0; right: 0; bottom: 0; padding: 96px 22px 18px; z-index: 2;
  background: linear-gradient(180deg, rgba(8,7,6,0) 0%, rgba(8,7,6,.9) 42%, rgba(8,7,6,.97) 100%); }
.tile .cap2 b { display: block; font-size: 25px; font-weight: 700; line-height: 1.15; color: #fff; }
.tile .cap2 span { display: block; margin-top: 5px; font-size: 19px; font-weight: 400; line-height: 1.32; color: #D8D2C8; }
.tile .play { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; z-index: 2;
  background: rgba(8,7,6,.55); border: 1.5px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; }
.tile .play::after { content: ""; margin-left: 3px; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.under { position: absolute; }
.under b { display: block; font-size: 24px; font-weight: 700; line-height: 1.15; }
.under span { display: block; margin-top: 6px; font-size: 19px; line-height: 1.34; color: var(--soft); }

/* a case film: poster frame on the first beat, the film with sound on the next */
.film { position: absolute; overflow: hidden; border-radius: 16px; background: #000; transform-origin: 0 0; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.film video, .film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film img { z-index: 1; }
.film .prog { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; z-index: 2; }
.backdrop { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); object-fit: cover; filter: blur(40px) brightness(.32) saturate(1.1); }
.scrimL { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,10,9,.96) 0%, rgba(11,10,9,.85) 38%, rgba(11,10,9,.15) 70%, rgba(11,10,9,0) 100%); }
.logo { position: absolute; display: block; }
/* a still among moving strips: a slow push so it doesn't sit dead */
.kb { animation: kb 14s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.03); } }

/* numbers */
.num { font-stretch: 62%; font-weight: 800; line-height: .86; letter-spacing: -1px; }
.bar { position: absolute; height: 84px; border-radius: 4px; }

/* the slate and the cast: set like a poster's billing */
.bill { text-align: center; font-stretch: 62%; font-weight: 800; text-transform: uppercase; line-height: 1.0; white-space: nowrap; }
.bill i { font-style: normal; color: var(--dim); margin: 0 .28em; }
.block { text-align: center; font-stretch: 70%; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--mute); line-height: 1.7; }
.role { text-align: right; font-stretch: 70%; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--mute); font-size: 22px; }
.names { font-size: 30px; font-weight: 500; line-height: 1.35; color: var(--paper); }

/* the block marker, top right: three bars in WRM's colours; the case we're in lights its own */
#mark { position: absolute; top: 60px; right: 128px; z-index: 5; pointer-events: none; opacity: 0; visibility: hidden; }
#mark .tri { display: flex; gap: 8px; align-items: center; }
#mark .tri i { display: block; width: 44px; height: 7px; border-radius: 2px; transform-origin: 0 50%;
  transition: opacity .6s cubic-bezier(.23,1,.32,1), transform .6s cubic-bezier(.23,1,.32,1); }
#mark .tri i:nth-child(1) { background: var(--red); } #mark .tri i:nth-child(2) { background: var(--teal); } #mark .tri i:nth-child(3) { background: var(--amber); }
#mark[data-state="d"] .tri i:not(:nth-child(1)), #mark[data-state="s"] .tri i:not(:nth-child(2)),
#mark[data-state="t"] .tri i:not(:nth-child(3)) { opacity: .18; transform: scaleX(.5); }

/* lightbox: one piece of work, full size, with sound */
#lb { position: fixed; inset: 0; z-index: 20; background: rgba(5,5,4,.94); display: none; align-items: center; justify-content: center; cursor: zoom-out; }
#lb.on { display: flex; }
#lb video, #lb img { max-width: 92vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.7); cursor: default; }
#lb .x { position: absolute; top: 22px; right: 28px; font: 300 44px/1 var(--f); color: rgba(255,255,255,.7); cursor: pointer; }

/* chrome */
#bar { position: fixed; left: 0; bottom: 0; height: 3px; background: var(--paper); opacity: .5; width: 0; transition: width .5s ease; z-index: 10; }
#notes { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(1100px, 92vw); padding: 18px 22px; border-radius: 14px;
  background: rgba(20,18,16,.94); color: #EDE8DF; font: 500 18px/1.5 var(--f); box-shadow: 0 10px 40px rgba(0,0,0,.5); display: none; z-index: 11; }
#notes.on { display: block; }
#notes b { color: var(--amber); font-weight: 700; margin-right: 8px; }
#hint { position: fixed; right: 18px; bottom: 14px; font: 600 12px/1 var(--f); color: rgba(255,255,255,.4); z-index: 10; letter-spacing: .5px; transition: opacity 1s; }