/* 2019 · "reel" — silent newsreel. Palette: black, cream (#f3e7c9), gold (#d9b66c). Every selector prefixed .in-reel */
.in-reel .rl{pointer-events:none}
.in-reel .rl-dark{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#17110a 0%,#080503 70%,#030201 100%);will-change:opacity}
.in-reel .rl-beam{position:absolute;inset:0;will-change:opacity;opacity:0}
.in-reel .rl-glow{position:absolute;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(243,231,201,.16) 0%,rgba(217,182,108,.06) 40%,transparent 70%);will-change:opacity;opacity:0}
.in-reel .rl-seats{position:absolute;left:-40px;right:-40px;bottom:0;background:radial-gradient(ellipse at 50% 100%,#0c0806 0 62%,transparent 63%) 0 0/var(--seat) 100% repeat-x,linear-gradient(180deg,transparent 0 28%,#050302 28%);will-change:opacity}
.in-reel .rl-seats::after{content:"";position:absolute;left:0;right:0;top:26%;height:2px;background:radial-gradient(ellipse at 50% 50%,rgba(243,231,201,.14) 0 60%,transparent 61%) 0 0/var(--seat) 100% repeat-x}
.in-reel .rl-flick{position:absolute;inset:0;background:#000;will-change:opacity;opacity:0}
.in-reel .rl-flash{position:absolute;background:radial-gradient(ellipse at 50% 46%,#fff8e6 0%,#f3e7c9 28%,rgba(243,231,201,.65) 52%,rgba(243,231,201,0) 80%);will-change:opacity;opacity:0}

/* the gate */
.in-reel .rl-proj{position:absolute;overflow:hidden;will-change:clip-path,opacity}
.in-reel .rl-film{position:absolute;inset:0;will-change:transform}
/* the picture's dark surround: on the stage, sized from the safe rect in JS, so it melts into the room with no edge at the gate */
.in-reel .rl-vign{position:absolute;inset:0;will-change:opacity}
.in-reel .rl-grain{position:absolute;inset:-20%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .96 0 0 0 0 .9 0 0 0 0 .78 .7 0 0 0 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") repeat;will-change:opacity,background-position;opacity:0;-webkit-mask:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 70%);mask:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 70%)}
.in-reel .rl-scr{position:absolute;top:0;bottom:0;left:0;width:1px;background:rgba(243,231,201,.9);box-shadow:0 0 2px rgba(243,231,201,.4);will-change:transform,opacity;opacity:0;-webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}

/* the strip */
.in-reel .rl-strip{position:absolute;left:0;will-change:transform;--railo:1}
.in-reel .rl-strip::before,.in-reel .rl-strip::after{content:"";position:absolute;left:-50%;right:-50%;height:var(--rail);background:repeating-linear-gradient(90deg,transparent 0 calc(var(--hp)*.3),rgba(243,231,201,.55) calc(var(--hp)*.3) calc(var(--hp)*.7),transparent calc(var(--hp)*.7) var(--hp)),#150e08;opacity:var(--railo)}
.in-reel .rl-strip::before{top:calc(var(--rail)*-1 - 2px)}
.in-reel .rl-strip::after{bottom:calc(var(--rail)*-1 - 2px)}
.in-reel .rl-fr{position:absolute;top:0;background:#0b0805;overflow:hidden;will-change:opacity}
.in-reel .rl-fr img{position:absolute;left:2.5%;top:3.5%;width:95%;height:93%;object-fit:cover;display:block}
.in-reel .rl-fr::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%);pointer-events:none}
.in-reel .rl-card{position:absolute;left:6%;top:9%;width:88%;height:82%;box-sizing:border-box;border:2px solid rgba(243,231,201,.85);outline:1px solid rgba(217,182,108,.6);outline-offset:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f3e7c9;padding:0 6%;will-change:opacity}
.in-reel .rl-card::before,.in-reel .rl-card::after{content:"";position:absolute;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(217,182,108,.9) 20%,rgba(217,182,108,.9) 80%,transparent)}
.in-reel .rl-card::before{top:9%}.in-reel .rl-card::after{bottom:9%}
.in-reel .rl-card small{font-family:var(--sans);font-weight:300;font-size:var(--card-fs);letter-spacing:.34em;text-transform:uppercase;color:#d9b66c;display:block}
.in-reel .rl-card b{font-family:var(--serif);font-weight:300;font-size:calc(var(--card-fs)*3.4);line-height:1;letter-spacing:.06em;margin:.25em 0 .2em;display:block}
.in-reel .rl-card i{font-family:var(--serif);font-style:italic;font-weight:300;font-size:calc(var(--card-fs)*1.35);opacity:.8;display:block}
.in-reel .rl-caps{position:absolute;left:0;right:0;text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;color:#f3e7c9;line-height:1.15;letter-spacing:.01em;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.in-reel .rl-capline{position:absolute;left:5%;right:5%;top:0;will-change:opacity,transform;opacity:0}

/* the finale */
.in-reel .rl-fin{position:absolute;inset:0;will-change:opacity;opacity:0}
.in-reel .rl-scenery{position:absolute;inset:0;-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.in-reel .rl-rays{position:absolute;border-radius:50%;will-change:transform,opacity;opacity:0;background:repeating-conic-gradient(from 0deg,rgba(217,182,108,.27) 0deg 5deg,rgba(217,182,108,0) 5deg 14deg);-webkit-mask:radial-gradient(circle,rgba(0,0,0,.95) 0 8%,rgba(0,0,0,.4) 25%,transparent 46%);mask:radial-gradient(circle,rgba(0,0,0,.95) 0 8%,rgba(0,0,0,.4) 25%,transparent 46%)}
.in-reel .rl-fan{position:absolute;border-radius:50% 50% 0 0/100% 100% 0 0;will-change:transform,opacity;opacity:0;background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 9%,rgba(217,182,108,.8) 9% 10%,transparent 10% 18%),repeating-conic-gradient(from 270deg at 50% 100%,rgba(217,182,108,.5) 0deg 2.2deg,transparent 2.2deg 12deg);-webkit-mask:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.35));mask:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.35))}
.in-reel .rl-floor{position:absolute;left:-10%;right:-10%;will-change:opacity;opacity:0;background:linear-gradient(180deg,rgba(217,182,108,.55) 0 2px,rgba(217,182,108,.12) 2px 3px,rgba(60,44,22,.7) 3px 100%)}
.in-reel .rl-floor::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6.9%,rgba(217,182,108,.09) 6.9% 7.1%,transparent 7.1% 14%)}
.in-reel .rl-spot{position:absolute;left:0;border-radius:50%;will-change:transform,opacity;opacity:0;transform-origin:50% 0;background:radial-gradient(ellipse at 50% 50%,rgba(243,231,201,.28) 0%,rgba(243,231,201,.11) 35%,transparent 70%)}
.in-reel .rl-shadow{position:absolute;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 45%,transparent 75%);will-change:opacity;opacity:0}
.in-reel .rl-crowd{position:absolute}
.in-reel .rl-piece{position:absolute;display:block;will-change:transform,opacity;opacity:0;transform-origin:50% 100%}

/* the leader (below the last frame, whips through at the end) */
.in-reel .rl-lead{position:absolute;left:0;right:0;background:#0a0705;overflow:hidden}
.in-reel .rl-lead::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(97deg,transparent 0 11%,rgba(243,231,201,.14) 11% 11.4%,transparent 11.4% 23%),repeating-linear-gradient(90deg,transparent 0 37%,rgba(243,231,201,.08) 37% 37.2%,transparent 37.2% 100%)}
.in-reel .rl-lead i{position:absolute;left:50%;top:38%;width:26%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:3px solid rgba(243,231,201,.85);box-shadow:inset 0 0 0 14px #0a0705,inset 0 0 0 16px rgba(243,231,201,.5)}
.in-reel .rl-lead i::after{content:"";position:absolute;inset:16%;border-radius:50%;background:conic-gradient(from 0deg,rgba(243,231,201,.9) 0 90deg,transparent 90deg 360deg)}
.in-reel .rl-lead b{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(0deg,#fff8e6 0%,rgba(243,231,201,.7) 30%,transparent 100%)}

/* phones */
body.narrow .in-reel .rl-card{border-width:1px}
body.narrow .in-reel .rl-card small{letter-spacing:.24em}