.rise-reel {
  color-scheme:dark;
  overflow:clip;
  color:#f6f6f6;
  background-color:#090909;
  background-image:radial-gradient(#ffffff18 .55px,transparent .8px);
  background-size:5px 5px;
}
.reel-layout {
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(1120px,88%);
  margin:auto;
}
.reel-heading {
  position:sticky;top:41svh;z-index:2;align-self:start;
  grid-area:1/1/2/3;
  width:max-content;max-width:95%;margin:auto auto 0;
  text-align:center;
  text-shadow:0 2px 16px #000,0 0 25px #000;
  pointer-events:none;
}
.reel-heading h2 {font:400 clamp(32px,5vw,70px)/.91 Arial,sans-serif;letter-spacing:-.065em;margin:0 0 17px;text-transform:uppercase}
.reel-heading strong {font:700 .82em/1.1 "Courier New",monospace;letter-spacing:-.065em}
.reel-heading a {pointer-events:auto;display:inline-block;padding:6px 10px;color:white;background:#0a0a0a;font:700 12px/1.4 "Courier New",monospace;text-transform:uppercase}
.reel-heading a:focus-visible {outline:2px solid white}
.reel-cards {
  grid-area:1/1/2/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(44px,11vw,145px) 14%;
  padding:36svh 0 22svh;
}
.reel-card {
  --angle:-8deg;
  margin:0;
  align-self:start;
  background:#171717;
  border:1px solid #ffffff21;
  box-shadow:0 14px 35px #0008;
  padding:clamp(6px,1.3vw,16px);
  transform:translate3d(0,var(--lift,0px),0) rotate(var(--angle));
  opacity:var(--show,1);
}
.reel-card:nth-child(even) {--angle:8deg;margin-top:clamp(65px,19vh,170px)}
.reel-card img {width:100%;height:auto;display:block}
.reel-card figcaption {display:flex;justify-content:space-between;padding:10px 3px 0;font:700 clamp(11px,1.35vw,17px)/1 "Courier New",monospace;text-transform:uppercase}
@media(max-width:600px) {
  .reel-layout {width:88%}
  .reel-heading {top:34svh}
  .reel-cards {grid-template-columns:1fr;padding:40svh 0 15svh;gap:16svh}
  .reel-card {width:85%}
  .reel-card:nth-child(even) {justify-self:end;margin-top:0}
}
html.still .reel-heading {position:relative;top:auto;grid-area:1/1/2/3;margin:48px auto 0}
html.still .reel-cards {grid-area:2/1/3/3;padding:36px 0 54px}
html.still .reel-card {transform:none;opacity:1;margin-top:0}
@media(prefers-reduced-motion:reduce) {
  .reel-heading {position:relative;top:auto;grid-area:1/1/2/3;margin:48px auto 0}
  .reel-cards {grid-area:2/1/3/3;padding:36px 0 54px}
  .reel-card {transform:none;opacity:1;margin-top:0}
}
.story-display,.brand-demo,.mailbox {translate:0 var(--section-lift,0px)}
html.still .story-display,html.still .brand-demo,html.still .mailbox {translate:none}
@media(prefers-reduced-motion:reduce){.story-display,.brand-demo,.mailbox{translate:none}}
/* The gallery's static grid doubles as the reduced-motion fallback. */
.rise-reel.is-orbit .reel-layout {
  width:100%;
  height:360svh;
  display:block;
}
.rise-reel.is-orbit .reel-cards {
  position:sticky;
  top:0;
  display:block;
  height:100svh;
  padding:0;
  perspective:850px;
  perspective-origin:50% 50%;
  transform-style:preserve-3d;
}
.rise-reel.is-orbit .reel-heading {
  position:sticky;
  top:45svh;
  height:0;
  margin:0 auto;
}
.rise-reel.is-orbit .reel-heading h2 {
  opacity:var(--title-opacity,1);
}
.rise-reel.is-orbit .reel-heading a {
  opacity:var(--title-opacity,1);
}
.rise-reel.is-orbit .reel-card {
  position:absolute;
  top:50%;
  left:50%;
  width:var(--panel-width,300px);
  aspect-ratio:16/9;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  opacity:1;
  transform-style:preserve-3d;
}
.rise-reel.is-orbit .reel-card img,.rise-reel.is-orbit .reel-card figcaption {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.reel-slice {display:none}
.rise-reel.is-orbit .reel-slice {
  position:absolute;
  inset:0 auto 0 50%;
  display:block;
  width:var(--slice-width);
  background-size:var(--panel-width) 100%;
  background-repeat:no-repeat;
  filter:brightness(var(--light,1));
}
.rise-reel:not(.is-orbit) .reel-card {visibility:visible!important;transform:none!important}
.rise-reel .reel-card[hidden] {display:none}
