/* ==========================================================================
   BRICK COUNTDOWN — styles
   Metrics measured from the reference page's own stylesheet: warm white
   #fffdfc · 32/30px headings · 48px clock digits (40px under 400px wide) ·
   16px uppercase labels · sticky widget that is a full-width bar on phones
   and a 400px pill from 768px up · artwork fixed behind everything at 40%.
   ========================================================================== */

:root{
  --accent:gold;
  --accent2:#ff3b3b;
  --ink:#fffdfc;
  --bg:#000000;
  --dim:rgba(255,253,252,.86);
  --glass:rgba(255,255,255,.1);
  --glass-line:rgba(255,255,255,.3);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.5;
  -webkit-tap-highlight-color:transparent;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── artwork behind the page: fixed, cover, dimmed, optional scrim ────────── */
.bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;
  opacity:var(--bg-opacity,.5);
  background-color:var(--bg,#000);
  background-repeat:no-repeat;
  background-size:var(--bg-size,cover);
  background-position:var(--bg-pos-m,center);
  background-image:var(--stage);
  transition:opacity .5s ease;}
.bg::before{content:"";position:absolute;inset:0;
  background-image:var(--bg-scrim,linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.6)));}
@media (min-width:800px){.bg{background-position:var(--bg-pos,center top 30%)}}
@media (max-width:700px){
  .strip>.strip-sticker{height:76%;left:4%;bottom:6%;border-radius:6px}
}
.topbar,main{position:relative;z-index:1}
.content{margin:15px;padding-bottom:56px}

/* ── sticky widget: bar on phones, centred pill from 768px ───────────────── */
.topbar{
  position:sticky;top:0;z-index:1000;
  display:flex;justify-content:center;align-items:center;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
  padding:8px 20px;overflow-x:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  border-bottom:1px solid rgba(255,255,255,.15);
}
.topbar-text{font-weight:600;font-size:16px;margin-right:15px;
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.topbar-cta{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#333;border:none;
  padding:5px 12px;border-radius:8px;font-weight:700;font-size:14px;
  white-space:nowrap;overflow:hidden;cursor:pointer;flex:none;
  box-shadow:0 2px 8px rgba(0,0,0,.2);transition:.3s;
}
.topbar-cta::after{                       /* the shine sweep */
  content:"";position:absolute;top:0;left:-50%;width:50%;height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,0) 0,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);pointer-events:none;animation:shine 6s linear infinite;
}
@keyframes shine{from{left:-50%}to{left:100%}}
.topbar-cta:hover{background:#ffc400;transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,.3)}
@media(min-width:768px){
  .topbar{
    top:10px;max-width:400px;margin:10px auto;border-radius:30px;
    border:1px solid var(--glass-line);box-shadow:0 2px 14px rgba(0,0,0,.35);
  }
}

/* ── optional character cut-out ──────────────────────────────────────────── */
.figure{position:fixed;bottom:0;z-index:1;height:min(38vh,340px);width:auto;
  pointer-events:none;filter:drop-shadow(0 8px 30px rgba(0,0,0,.8));opacity:.95}
.figure--bottom-left{left:8px}
.figure--bottom-right{right:8px}
@media(max-width:600px){.figure{height:min(24vh,190px);opacity:.8}}

/* ── headline block ──────────────────────────────────────────────────────── */
main{text-align:center}
h1{font-size:29px;font-weight:700;margin:clamp(30px,9vh,90px) 15px 18px;color:var(--ink);
  text-shadow:0 2px 14px rgba(0,0,0,.75)}
.sub{font-size:17px;font-weight:400;margin:0 15px 20px;color:var(--ink);
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.region{font-size:25px;font-weight:700;margin:0 15px 6px;color:var(--ink);
  text-shadow:0 2px 12px rgba(0,0,0,.75)}

/* ── the clocks ──────────────────────────────────────────────────────────── */
.clock{display:flex;justify-content:center;align-items:center;font-size:24px;margin:10px 0;
  text-shadow:0 1px 10px rgba(0,0,0,.55)}
.unit{display:flex;flex-direction:column;align-items:center;margin:0 10px}
.unit b{display:block;font-size:48px;font-weight:700;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.unit span{display:block;font-size:16px;font-weight:700;text-transform:uppercase;margin-top:5px;
  color:var(--ink)}
.unit.tick b{animation:drop .3s ease}
@keyframes drop{from{opacity:.25;transform:translateY(-7px)}to{opacity:1;transform:none}}

.when{font-size:17px;margin:14px auto 4px;max-width:70ch;color:var(--ink);
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.when b{font-weight:700}
.local{font-size:14px;opacity:.75;margin:0 auto 8px;max-width:70ch}
.strip{margin:34px 0 0}   /* the banner now sits at the bottom of the page */
body.hide-timings [data-timing]{display:none}

/* ── the ‧ ‧ ‧ divider ────────────────────────────────────────────────────── */
hr{border:0;margin:10px;color:var(--ink)}
hr::before{content:"\2027 \2027 \2027";display:block;text-align:center;font-size:35px;
  letter-spacing:.9em;text-indent:.6em;opacity:.8;clear:both}

/* ── full-bleed banner ───────────────────────────────────────────────────── */
.strip{width:100%;max-width:1920px;margin:0 auto;line-height:0;position:relative}
.strip>img{width:100%;height:auto;display:block}
.strip>a{display:block}
/* optional sticker dropped into the banner's left slot (hero.banner.sticker) */
.strip>.strip-sticker{position:absolute;left:9%;bottom:13%;height:72%;width:auto;
  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.65);pointer-events:none}

/* ── controls ────────────────────────────────────────────────────────────── */
.btn-pink{
  display:flex;align-items:center;justify-content:center;margin:20px auto 10px;
  background:#ffe7e7;border:1px solid #fee0e0;border-radius:11px;color:#d33a2c;
  font:inherit;font-size:16px;font-weight:700;line-height:33px;padding:0 20px;cursor:pointer;
}
.btn-pink:hover{background:#ffe3e3;border-color:#faa4a4}
.controls{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:14px}
.btn-soft{
  padding:10px 20px;font:inherit;font-size:16px;color:#fff;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;
  backdrop-filter:blur(5px);margin-top:10px;transition:background .3s,transform .3s;
}
.btn-soft:hover{background:rgba(255,255,255,.3);transform:scale(1.05)}
.btn-soft:active{transform:scale(1)}
.btn-icon{
  background:none;border:none;cursor:pointer;outline:0;color:var(--ink);
  opacity:.9;margin-top:10px;padding:8px;line-height:0;
}
.btn-icon:hover{opacity:1}

/* share popover */
.pop{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);
  z-index:1200;width:min(92vw,360px);padding:18px;border-radius:14px;text-align:center;
  border:1px solid var(--glass-line);background:rgba(8,9,14,.94);backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.7);display:none;
}
.pop.on{display:block;animation:pop .18s ease forwards}
@keyframes pop{to{transform:translate(-50%,-50%) scale(1)}}
.pop h4{margin:0 0 4px;font-size:15px}
.pop p{margin:0 0 14px;font-size:12.5px;opacity:.7;word-break:break-all}
.pop .row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pop .x{position:absolute;top:6px;right:10px;background:none;border:0;color:var(--ink);
  font-size:20px;cursor:pointer;line-height:1;opacity:.7}
.sbtn{
  font:inherit;font-size:13px;font-weight:700;padding:8px 14px;border-radius:8px;
  border:1px solid var(--glass-line);background:var(--glass);color:var(--ink);cursor:pointer;
}
.sbtn:hover{background:rgba(255,255,255,.28)}
.sbtn--hot{background:var(--accent);color:#333;border-color:transparent}
.scrim{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.55);display:none}
.scrim.on{display:block}

/* ── network thumbs + footer links ───────────────────────────────────────── */
.net{padding:10px 0;text-align:center}
.net-cap{font-size:16.2px;opacity:.9}
.net-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:18px;padding:10px 0}
.net-row a{flex:0 0 auto}
.net-row img,.net-tile{
  width:50px;height:50px;object-fit:cover;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--glass-line);background:rgba(0,0,0,.35);
  font-size:24px;transition:transform .2s ease;
}
.net-row a:hover img,.net-row a:hover .net-tile{transform:scale(1.08)}
.foot{
  color:var(--ink);opacity:.9;font-size:14.8px;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;padding:30px 0;width:100%;
}
.foot a{padding:0 10px;min-height:35px;display:inline-flex;align-items:center;word-wrap:break-word}
.foot a:hover{text-decoration:underline}
.foot-note{width:100%;margin:14px auto 0;max-width:70ch;font-size:14px;opacity:.75}
.foot-disc{width:100%;margin:10px auto 20px;max-width:70ch;font-size:12px;opacity:.5}

/* ── optional gadgets, off by default ────────────────────────────────────── */
.gadgets{max-width:640px;margin:0 auto;padding:10px 15px 20px;text-align:left}
.panel{border:1px solid var(--glass-line);border-radius:12px;background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);padding:14px 15px;margin-bottom:14px}
.panel h3{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.prog-head{display:flex;justify-content:space-between;font-size:13px;opacity:.85;margin-bottom:7px}
.prog-head b{font-family:var(--mono)}
.prog-bar{height:9px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.prog-fill{height:100%;width:0;border-radius:999px;transition:width .9s cubic-bezier(.2,.7,.2,1);
  background:linear-gradient(90deg,#00ff88,var(--accent) 60%,var(--accent2))}
.console{font-family:var(--mono);font-size:12.5px;min-height:92px}
.console div{opacity:0;animation:slidein .45s forwards}
.console div::before{content:"› ";color:#00ff88}
.console div.warn::before{content:"! ";color:var(--accent2)}
@keyframes slidein{from{opacity:0;transform:translateX(-6px)}to{opacity:.95;transform:none}}
.stats{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.stat{text-align:center;border:1px solid var(--glass-line);border-radius:10px;padding:11px 6px;
  background:rgba(255,255,255,.06)}
.stat b{display:block;font-size:21px;font-weight:900;color:var(--accent)}
.stat span{display:block;margin-top:4px;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;opacity:.8}
.marquee{overflow:hidden;border-block:1px solid var(--glass-line);margin:10px 0;background:rgba(0,0,0,.45)}
.marquee-in{display:flex;width:max-content;animation:scroll 26s linear infinite}
.marquee span{padding:9px 20px;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;opacity:.85;white-space:nowrap}
.marquee span::after{content:"◆";margin-left:20px;color:var(--accent)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ── zero hour ───────────────────────────────────────────────────────────── */
.veil{
  position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  text-align:center;padding:24px;background:radial-gradient(900px 620px at 50% 22%,#2a0707,#04060a 72%);
}
.veil.on{display:flex;animation:fadein .5s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.veil-in{max-width:640px;animation:zoomin .6s cubic-bezier(.2,1.3,.3,1)}
@keyframes zoomin{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.veil h2.big{
  margin:0;font-size:clamp(34px,9.2vw,78px);font-weight:900;letter-spacing:-.03em;line-height:.98;
  color:#fff;text-shadow:3px 0 var(--accent2),-3px 0 #00e5ff;animation:glitch 2.4s infinite steps(2);
}
@keyframes glitch{
  0%,88%{text-shadow:3px 0 var(--accent2),-3px 0 #00e5ff;transform:none}
  90%{text-shadow:-6px 0 var(--accent2),6px 0 #00e5ff;transform:translateX(3px) skewX(-2deg)}
  94%{text-shadow:6px 0 var(--accent2),-6px 0 #00e5ff;transform:translateX(-3px)}
}
.veil p.sub{font-size:clamp(15px,3.6vw,20px);font-weight:700;color:#ffd9d9;margin:10px 0 18px}
.veil ul{list-style:none;padding:0;margin:0 auto 20px;display:grid;gap:7px;max-width:390px;text-align:left}
.veil li{font-family:var(--mono);font-size:13px;color:#ffb3b3;border:1px solid rgba(255,80,80,.3);
  border-radius:8px;padding:8px 11px;background:rgba(255,0,0,.07)}
.veil li::before{content:"✕ ";color:var(--accent2)}
.veil .countup{font-family:var(--mono);font-size:clamp(15px,4.4vw,22px);color:#fff;margin-top:16px}
.veil .countup b{color:var(--accent)}
.veil .dismiss{margin-top:20px;font-size:12px}
.veil .dismiss a{color:#8d9caa;text-decoration:underline}
.gate{display:grid;place-items:center;gap:16px}
.gate .cap{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2)}
.big-btn{
  font:inherit;font-size:clamp(15px,3.8vw,20px);font-weight:900;letter-spacing:.1em;
  padding:18px 30px;border-radius:12px;border:none;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,var(--accent2),#a10000);
  box-shadow:0 0 0 4px rgba(255,59,59,.18),0 18px 44px rgba(255,0,0,.35);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(255,59,59,.05),0 18px 44px rgba(255,0,0,.2)}}
.gate small{color:#93a2b1;font-size:12.5px;line-height:1.5}

/* calm / deadpan zero (zero.calm = true) */
.veil.calm{background:#06080d}
.veil.calm .veil-in{animation:fadein .8s ease}
.veil.calm h2.big{font-size:clamp(26px,6.4vw,46px);font-weight:800;letter-spacing:-.01em;
  line-height:1.15;color:var(--ink);text-shadow:none;animation:none}
.veil.calm p.sub{color:var(--dim);font-weight:400;font-size:clamp(14px,3.4vw,17px);
  max-width:44ch;margin:10px auto 22px}
.veil.calm ul{max-width:420px;gap:0}
.veil.calm li{border:0;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;background:none;
  padding:9px 2px;color:var(--dim);display:flex;justify-content:space-between;gap:16px;
  font-family:var(--font);font-size:14.5px}
.veil.calm li::before{content:none}
.veil.calm li b{color:var(--ink);font-weight:600;text-align:right}
.veil.calm .countup{color:var(--dim);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.veil.calm .countup b{color:var(--ink);font-weight:700;text-transform:none;letter-spacing:0}
.veil.calm .dismiss a{color:#6d7c8b}

.rain{position:fixed;inset:0;z-index:1900;pointer-events:none;overflow:hidden}
.rain i{position:absolute;top:-12vh;font-style:normal;font-size:26px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(126vh) rotate(720deg)}}

/* ── misc ────────────────────────────────────────────────────────────────── */
.err{margin:40px auto;max-width:640px;border:1px dashed var(--accent2);border-radius:12px;
  padding:18px;color:#ffc9c9;font-family:var(--mono);font-size:13.5px;background:rgba(20,4,4,.6)}
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:3000;
  background:var(--ink);color:#000;font-size:14px;font-weight:700;padding:11px 18px;border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.45);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .28s cubic-bezier(.2,1.3,.3,1),opacity .2s,visibility .28s;
}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}

/* ── breakpoints, as the reference sets them ─────────────────────────────── */
@media(max-width:400px){
  .unit b{font-size:40px}
  .unit{margin:0 7px}
}
@media(min-width:940px){
  h1{font-size:32px}
  .sub,.when,.net-cap{font-size:21px}
  .region{font-size:28px}
  .foot{font-size:17.5px}
  h1,.sub,.region,.when,.local{margin-left:auto;margin-right:auto;max-width:1100px}
}
@media(min-width:1300px){
  .unit b{font-size:56px}
  .unit span{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .marquee-in{animation:none}
}

/* ══ the say-goodbyes slam ═══════════════════════════════════════════════════
   Brick in → glass cracks → the pane falls away → what it was hiding. One
   brick or several: every picture in slam.reveal gets one, thrown at the exact
   spot that picture ends up sitting. Procedural crack, procedural shards, so
   it stays one file with nothing extra to download.                        */
#slam{position:fixed;inset:0;z-index:4000;display:none;overflow:hidden;
  font-family:var(--font);color:var(--ink)}
#slam.on{display:block}
#slam .dark{position:absolute;inset:0;background:#04060f;opacity:0;transition:opacity .8s ease}
#slam.go .dark{opacity:.94}

/* the reveal. Sizes are set in pixels by the script, which knows each
   picture's aspect ratio; this only has to arrange them. */
#slam .stage{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(12px,2.4vh,22px);
  padding:16px 16px 82px}
#slam .gallery{display:flex;align-items:center;justify-content:center;
  gap:var(--gap,24px)}
#slam.stacked .gallery{flex-direction:column;gap:calc(var(--gap,24px) * .55)}
#slam .gallery figure{margin:0;opacity:0;transform:scale(.55)}
#slam.go .gallery figure{animation:slam-reveal .72s cubic-bezier(.18,.9,.28,1.15)
  calc(var(--i,0) * .13s) forwards}
@keyframes slam-reveal{to{opacity:1;transform:scale(1)}}
#slam .gallery img{display:block;width:100%;height:100%;object-fit:cover;
  border-radius:12px;background:#fff;
  box-shadow:0 22px 66px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.2)}
#slam .cap{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;text-align:center}
#slam.go .cap{animation:slam-cap .7s ease .34s forwards}
@keyframes slam-cap{to{opacity:.74}}

/* the bricks, one per picture. left/top is the impact point; --sx/--sy is
   where that particular brick comes flying from, --gx/--gy where it tumbles to */
#slam .brick{position:absolute;width:26vmin;height:auto;opacity:0;
  transform:translate(-50%,-50%) scale(.04);
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.65));will-change:transform,opacity}
#slam.throw .brick{animation:slam-throw .5s cubic-bezier(.55,.02,.92,.45) forwards}
@keyframes slam-throw{
  0%{opacity:0;transform:translate(calc(-50% + var(--sx,0px)),calc(-50% + var(--sy,0px))) scale(.04) rotate(-38deg)}
  14%{opacity:1}
  100%{opacity:1;transform:translate(-50%,-50%) scale(2.7) rotate(13deg)}
}
#slam.gone .brick{animation:slam-gone .62s cubic-bezier(.3,.1,.7,1) forwards}
@keyframes slam-gone{
  0%{opacity:1;transform:translate(-50%,-50%) scale(2.7) rotate(13deg)}
  26%{opacity:1;transform:translate(calc(-50% + var(--bx,0px)),-56%) scale(2.2) rotate(-9deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--gx,0px)),calc(-50% + var(--gy,60vh))) scale(1.2) rotate(-54deg)}
}
#slam .flash{position:absolute;width:64vmin;height:64vmin;margin:-32vmin 0 0 -32vmin;
  border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.96),rgba(214,232,255,.5) 38%,rgba(255,255,255,0) 68%)}
#slam .flash.on{animation:slam-flash .55s ease-out forwards}
@keyframes slam-flash{0%{opacity:1;transform:scale(.15)}100%{opacity:0;transform:scale(1.4)}}

/* one pane of glass per impact, so the cracking spreads hit by hit */
#slam .pane{position:absolute;inset:0;opacity:0;background-repeat:no-repeat;
  background-size:100% 100%;pointer-events:none;transition:opacity .07s linear}
#slam .shard{position:absolute;background-repeat:no-repeat;pointer-events:none;
  will-change:transform,opacity}
#slam.break .pane{opacity:0!important;transition:none}
#slam.break .shard{animation:slam-fall forwards cubic-bezier(.36,.04,.72,.4)}
@keyframes slam-fall{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:1}
  16%{transform:translate3d(0,-1.6vh,0) rotate(2deg);opacity:1}
  100%{transform:translate3d(var(--dx),128vh,0) rotate(var(--rot));opacity:.1}
}
#slam .again{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:10px;
  color:inherit;font:inherit;font-size:14px;line-height:32px;padding:0 18px;cursor:pointer;
  opacity:0;transition:opacity .4s ease .3s,background .25s ease}
#slam.done .again{opacity:1}
#slam .again:hover{background:rgba(255,255,255,.22)}
#slam.shaking{animation:slam-shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes slam-shake{
  10%{transform:translate(-11px,5px)}25%{transform:translate(9px,-7px)}
  40%{transform:translate(-7px,8px)}55%{transform:translate(6px,-4px)}
  70%{transform:translate(-4px,3px)}85%{transform:translate(2px,-2px)}
}
#slam.out{animation:slam-out .45s ease forwards}
@keyframes slam-out{to{opacity:0}}
body.slamming{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  #slam .brick,#slam .flash{display:none}
  #slam .shard,#slam .pane{display:none}
  #slam .dark{opacity:.94}
  #slam.go .gallery figure,#slam .gallery figure{animation:none;opacity:1;transform:none}
  #slam.go .cap,#slam .cap{animation:none;opacity:.74}
}