/* ==========================================================================
   Cold Feet Games
   Palette, type and texture all taken off the studio logo: pure black ground,
   bone wordmark, one blood red. Light is only ever added to the dark.
   ========================================================================== */

:root{
  --void:#000000;
  --pitch:#060607;
  --surface:#0D0D0F;

  --bone:#E8DECE;          /* the wordmark */
  --ash:#A2988C;           /* body copy */
  --dim:#857C71;           /* labels. 5.1:1 on black; #6B635A was 3.6 */

  --blood:#BD392F;         /* the light in the logo */
  --blood-hi:#D9564A;

  --edge:rgba(232,222,206,.11);
  --edge-hi:rgba(232,222,206,.24);
  --edge-btn:rgba(232,222,206,.45);  /* 3.6:1, so an outlined button reads */

  --serif:"Bodoni Moda",Didot,"Times New Roman",serif;
  --sans:"Archivo",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --gut:clamp(20px,5vw,72px);
  --bar-h:66px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--bar-h);
  background:var(--void);
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.06rem);
  line-height:1.7;
  color:var(--ash);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
/* <picture> only exists to offer the WebP; it must not become a box */
picture{display:contents}
a{color:inherit}

::selection{background:var(--blood);color:#fff}

/* --------------------------------------------------------------- utilities */

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--bone);color:var(--void);
  padding:12px 18px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--blood-hi);outline-offset:3px}

.shell{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding-inline:var(--gut);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  font-family:var(--mono);
  font-weight:400;
  font-size:.63rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dim);
}

.dot{
  width:5px;height:5px;flex:none;border-radius:50%;
  background:var(--blood);
  box-shadow:0 0 0 0 rgba(189,57,47,.65);
  animation:pulse 3.4s ease-out infinite;
}
@keyframes pulse{
  0%  {box-shadow:0 0 0 0 rgba(189,57,47,.55)}
  70% {box-shadow:0 0 0 7px rgba(189,57,47,0)}
  100%{box-shadow:0 0 0 0 rgba(189,57,47,0)}
}

/* film grain over everything, in two layers: a fine one that buzzes and a
   coarse one that drifts under it, so the noise has some size to it */
/* No blend mode here on purpose. Overlay grain gives genuinely black blacks,
   but a full-viewport blended layer makes the compositor read the entire
   backdrop back on every frame the page scrolls, which measured about 17ms a
   frame. Carrying far less light in the layer itself gets the void from 17/255
   down to about 5 for free, and the plates already have their grain baked in
   by _build-art.py, which is where the texture wants to be anyway. */
.grain{
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  background:radial-gradient(128% 96% at 50% 42%,transparent 58%,rgba(0,0,0,.40) 100%);
}
.grain::before,
.grain::after{
  content:"";
  position:absolute;
  inset:-50%;
}
/* Grain this faint would be invisible on a bright page. On this one it is
   the difference between a flat black rectangle and a black rectangle that is
   alive, and it lifts the void by about four values instead of eighteen. */
.grain::before{
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
  animation:grain-fine 1.1s steps(1,end) infinite;
}
/* the coarse layer under it, so the noise has some size to it */
.grain::after{
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain-coarse 15s ease-in-out infinite alternate;
}

/* ten discrete positions, held not tweened: steps(1,end) makes each keyframe
   a jump rather than a slide, which is the difference between grain and drift */
@keyframes grain-fine{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-4%,-3%)}   20%{transform:translate(3%,-5%)}
  30%{transform:translate(-6%,2%)}    40%{transform:translate(5%,4%)}
  50%{transform:translate(-3%,6%)}    60%{transform:translate(6%,-2%)}
  70%{transform:translate(-5%,-6%)}   80%{transform:translate(2%,5%)}
  90%{transform:translate(-2%,-4%)}
}
@keyframes grain-coarse{
  from{transform:translate(-2%,1%) scale(1.04)}
  to  {transform:translate(2%,-2%) scale(1.10)}
}

/* --------------------------------------------------------------- the light */
/* One source, following the pointer, sitting in front of everything. It lifts
   the whole frame a little and opens up whatever plate it happens to be over.
   Nothing else on the page emits: it is lit by this or it is lit by nothing. */

.glow{
  position:fixed;
  inset:0;
  z-index:55;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s ease;
  background:radial-gradient(circle 460px at var(--gx,50vw) var(--gy,38vh),
             rgba(232,222,206,.075),rgba(232,222,206,.022) 44%,transparent 72%);
}
.has-light .glow{opacity:1}

/* ------------------------------------------------------------------- plates */

.plate{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}
.plate img{
  width:100%;
  height:100%;
  object-fit:cover;
  scale:1.14;
  translate:0 var(--py,0px);
}

/* a second, brighter copy of the plate, uncovered only where the pointer is */
.plate__lit{
  position:absolute;
  inset:0;
  opacity:0;
  filter:brightness(1.9) contrast(1.03) saturate(1.08);
  transition:opacity .55s ease;
  -webkit-mask-image:radial-gradient(circle 270px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.62) 40%,transparent 72%);
          mask-image:radial-gradient(circle 270px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.62) 40%,transparent 72%);
}
.torch{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .7s ease;
  background:radial-gradient(circle 340px at var(--mx,50%) var(--my,50%),
             rgba(232,222,206,.10),rgba(189,57,47,.035) 38%,transparent 68%);
}
.has-light .plate__lit{opacity:1}
.has-light .torch{opacity:1}
.plate__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.62) 78%,#000 100%),
    radial-gradient(120% 78% at 22% 62%,rgba(0,0,0,.72) 0%,transparent 62%);
}
.plate__scrim--left{
  background:
    linear-gradient(90deg,#000 4%,rgba(0,0,0,.86) 34%,rgba(0,0,0,.30) 68%,rgba(0,0,0,.70) 100%),
    linear-gradient(180deg,#000 0%,transparent 22%,transparent 74%,#000 100%);
}

.plate--hero img{object-position:62% 50%;will-change:translate,scale}

/* most of this loop is nothing happening, and then something goes past */
.plate--hero::after{
  content:"";
  position:absolute;
  inset:-15% -30%;
  pointer-events:none;
  background:linear-gradient(102deg,transparent 43%,rgba(232,222,206,.05) 50%,transparent 57%);
  animation:pass 23s cubic-bezier(.45,0,.5,1) infinite;
}
@keyframes pass{
  0%,70%  {transform:translate3d(-160%,0,0)}
  95%,100%{transform:translate3d(160%,0,0)}
}
.plate--hero .plate__base{animation:breathe 40s ease-in-out infinite alternate,power 2.8s linear both}
.plate--hero .plate__lit{animation:breathe 40s ease-in-out infinite alternate}

/* main.js sets this once the hero has scrolled away. Without it, two
   2400px images stay on the compositor being scaled for the whole of the
   rest of the page, for something nobody can see. */
.hero.is-away .plate--hero img,
.hero.is-away .plate--hero::after{animation-play-state:paused}

@keyframes breathe{
  from{scale:1.14}
  to  {scale:1.21}
}

/* the room's light stuttering on, once, as the page loads */
@keyframes power{
  0%  {filter:brightness(0)}
  7%  {filter:brightness(.85)}
  10% {filter:brightness(.04)}
  15% {filter:brightness(1.1)}
  19% {filter:brightness(.12)}
  23% {filter:brightness(.7)}
  27% {filter:brightness(.2)}
  38% {filter:brightness(1.04)}
  100%{filter:brightness(1)}
}

/* -------------------------------------------------------------------- chrome */

.bar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  height:var(--bar-h);
  display:flex;
  align-items:center;
  border-bottom:1px solid transparent;
  transition:background-color .45s ease,border-color .45s ease,backdrop-filter .45s ease;
}
.bar.is-stuck{
  background:rgba(3,3,4,.80);
  border-bottom-color:var(--edge);
  backdrop-filter:blur(11px) saturate(.85);
  -webkit-backdrop-filter:blur(11px) saturate(.85);
}

.bar__inner{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding-inline:var(--gut);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.bar__mark{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  min-width:0;
}
.bar__mark img{
  width:30px;height:auto;flex:none;
  opacity:.95;
}
.bar__mark span{
  font-family:var(--serif);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--bone);
  white-space:nowrap;
}

.bar__nav{display:flex;gap:clamp(16px,2.6vw,34px)}
.bar__nav a{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
  text-decoration:none;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease;
}
.bar__nav a:focus-visible{color:var(--bone);border-bottom-color:var(--blood)}
@media (hover:hover){
  .bar__nav a:hover{color:var(--bone);border-bottom-color:var(--blood)}
}

/* ---------------------------------------------------------------------- hero */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:calc(var(--bar-h) + 40px);
  padding-bottom:clamp(80px,14vh,150px);
  isolation:isolate;
}

.hero__body{position:relative;z-index:2;max-width:1320px}

.hero .eyebrow{
  animation:rise 1s cubic-bezier(.16,.84,.24,1) both;
  animation-delay:.15s;
}

.lockup{
  margin:clamp(18px,3vh,34px) 0 0;
  animation:emerge 3s cubic-bezier(.16,.84,.24,1) both;
  animation-delay:.28s;
}
.lockup img{
  width:clamp(258px,33vw,462px);
}

/* the wordmark comes up like a tube striking, against the plate's power-on */
@keyframes emerge{
  0%  {opacity:0;transform:scale(1.05);filter:blur(30px) brightness(0)}
  12% {opacity:1;filter:blur(16px) brightness(1.45)}
  16% {filter:blur(18px) brightness(.05)}
  28% {filter:blur(9px) brightness(1.3)}
  33% {filter:blur(11px) brightness(.09)}
  48% {filter:blur(4px) brightness(1.15)}
  54% {filter:blur(5px) brightness(.38)}
  72% {filter:blur(1px) brightness(1.06)}
  100%{opacity:1;transform:none;filter:blur(0) brightness(1)}
}
@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}
}

.hero__lead{
  margin:clamp(26px,4.5vh,48px) 0 0;
  max-width:31ch;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.2rem,1rem + .95vw,1.85rem);
  line-height:1.36;
  color:var(--bone);
  text-wrap:balance;
  animation:rise 1.1s cubic-bezier(.16,.84,.24,1) both;
  animation-delay:1.15s;
}

.hero .actions{
  animation:rise 1.1s cubic-bezier(.16,.84,.24,1) both;
  animation-delay:1.35s;
}

.hero__meta{
  margin:clamp(22px,3vh,34px) 0 0;
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:.63rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
  animation:rise 1.1s cubic-bezier(.16,.84,.24,1) both;
  animation-delay:1.55s;
}

.cue{
  position:absolute;
  left:50%;
  bottom:26px;
  width:1px;
  height:56px;
  background:linear-gradient(180deg,transparent,var(--edge-hi));
  z-index:2;
}
.cue::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,var(--bone));
  animation:fall 3.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes fall{
  0%  {transform:scaleY(0);transform-origin:top;opacity:0}
  35% {transform:scaleY(1);transform-origin:top;opacity:.85}
  36% {transform:scaleY(1);transform-origin:bottom}
  75% {transform:scaleY(0);transform-origin:bottom;opacity:0}
  100%{transform:scaleY(0);opacity:0}
}

/* ------------------------------------------------------------------ buttons */

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(26px,4vh,42px);
}

.btn{
  --btn-fg:var(--void);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.btn:active{transform:translateY(1px)}

/* the one bone surface on the page, so its sweep is a shadow, not a light */
.btn--solid{overflow:hidden}
.btn--solid::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(0,0,0,.13) 50%,transparent 62%);
  transform:translate3d(-130%,0,0);
  transition:transform .9s cubic-bezier(.16,.84,.24,1);
}
@media (hover:hover){
  .btn--solid:hover::after{transform:translate3d(130%,0,0)}
}

.btn--solid{background:var(--bone);color:var(--void);border-color:var(--bone)}
.btn--solid:focus-visible{background:#fff;border-color:#fff}
@media (hover:hover){
  .btn--solid:hover{background:#fff;border-color:#fff}
}

.btn--ghost{
  color:var(--bone);
  border-color:var(--edge-btn);
  background-color:transparent;
  background-image:linear-gradient(var(--bone),var(--bone));
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:100% 0%;
  transition:background-size .5s cubic-bezier(.16,.84,.24,1),
             color .3s ease .08s,border-color .4s ease;
}
.btn--ghost:focus-visible{
  background-size:100% 100%;
  border-color:var(--bone);
  color:var(--void);
}
@media (hover:hover){
  .btn--ghost:hover{
    background-size:100% 100%;
    border-color:var(--bone);
    color:var(--void);
  }
}

/* ------------------------------------------------------------------ feature */

.feature{
  position:relative;
  min-height:clamp(560px,88svh,900px);
  display:flex;
  align-items:center;
  padding-block:clamp(80px,12vh,140px);
  isolation:isolate;
  border-top:1px solid var(--edge);
}
.feature__body{position:relative;z-index:2;max-width:1320px}

.title{
  margin:clamp(14px,2.4vh,26px) 0 0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.6rem,1.4rem + 5.4vw,6.6rem);
  line-height:.94;
  letter-spacing:-.025em;
  color:var(--bone);
  text-wrap:balance;
}
.title--sm{
  font-size:clamp(2rem,1.3rem + 2.4vw,3.5rem);
  line-height:1.02;
}

.logline{
  margin:clamp(20px,3vh,32px) 0 0;
  max-width:34ch;
  font-size:clamp(1.02rem,.97rem + .35vw,1.25rem);
  line-height:1.55;
  color:var(--bone);
  text-wrap:balance;
}

/* -------------------------------------------------------------------- bands */

.band{
  position:relative;
  z-index:1;
  background:var(--void);
  padding-block:clamp(72px,11vh,140px);
}
.band--tight{padding-top:clamp(44px,6vh,72px)}
.band--rule{border-top:1px solid var(--edge)}
.band--last{padding-bottom:clamp(84px,12vh,150px)}

.prose p{margin:0 0 1.15em;max-width:56ch}
.prose p:last-child{margin-bottom:0}
.prose--wide p{max-width:64ch}
.title + .prose,.title + .prose--wide{margin-top:clamp(18px,2.6vh,30px)}

/* spec rows */
.specs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin:0;
  padding:0;
  background:var(--edge);
  border-block:1px solid var(--edge);
}
.specs > div{
  background:var(--void);
  padding:20px clamp(14px,2vw,24px);
}
.specs dt{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--dim);
}
.specs dd{
  margin:9px 0 0;
  font-family:var(--serif);
  font-size:1.12rem;
  color:var(--bone);
}
.specs .hot{color:var(--blood-hi)}

.specs--stack{
  grid-template-columns:1fr;
  margin-top:clamp(30px,4.5vh,48px);
}
.specs--stack > div{
  display:grid;
  grid-template-columns:9.5rem minmax(0,1fr);
  gap:clamp(14px,2.5vw,30px);
  align-items:baseline;
  padding:16px 0;
}
.specs--stack dt{padding-top:.28em}
.specs--stack dd{margin:0;font-size:1.02rem}
.specs--stack a{
  color:var(--bone);
  text-decoration:none;
  border-bottom:1px solid var(--edge);
  padding-bottom:2px;
  transition:border-color .3s ease;
}
.specs--stack a:focus-visible{border-bottom-color:var(--blood)}
@media (hover:hover){
  .specs--stack a:hover{border-bottom-color:var(--blood)}
}
.sep{color:var(--dim);margin:0 .35em}

/* a held beat between the game and the studio: no image, no explanation */
.statement{
  position:relative;
  z-index:1;
  background:var(--void);
  border-top:1px solid var(--edge);
  padding-block:clamp(104px,21vh,240px);
  overflow:hidden;
}
.statement__line{
  margin:0;
  max-width:13ch;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.5rem,1.1rem + 6.4vw,7rem);
  line-height:.96;
  letter-spacing:-.03em;
  color:var(--bone);
}
.statement__turn{
  margin:clamp(20px,3.4vh,42px) 0 0 auto;
  max-width:min(100%,20ch);
  text-align:right;
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.1rem,.92rem + 1.1vw,2rem);
  line-height:1.3;
  color:var(--ash);
}
/* let the first line land, then turn it */
.js .statement .reveal:nth-child(2){transition-delay:.55s}

/* stills */
.stills{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(30px,4.5vh,52px);
}
.still{margin:0}
.still__frame{
  position:relative;
  display:block;
  overflow:hidden;
}
/* light travelling across the surface, rather than the image growing */
.still__frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(232,222,206,.14) 50%,transparent 62%);
  transform:translate3d(-130%,0,0);
  transition:transform 1s cubic-bezier(.16,.84,.24,1);
}
.still img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border:1px solid var(--edge);
  filter:saturate(.9);
  transition:transform .8s cubic-bezier(.16,.84,.24,1),border-color .5s ease;
}
@media (hover:hover){
  .still:hover img{transform:scale(1.015);border-color:var(--edge-hi)}
  .still:hover .still__frame::after{transform:translate3d(130%,0,0)}
}
.still figcaption{
  margin-top:10px;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--dim);
}

/* split */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,84px);
  align-items:center;
}
.split--flip{align-items:start}
.split__art{margin:0}
.split__art img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:1px solid var(--edge);
}

.claw{
  width:96px;
  height:auto;
  margin-bottom:clamp(18px,2.6vh,30px);
  opacity:.9;
}

/* ------------------------------------------------------------------- footer */

.foot{
  border-top:1px solid var(--edge);
  padding-block:26px 34px;
  background:var(--void);
}
.foot__inner{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 22px;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--dim);
}
.foot__mark{width:24px;height:auto;opacity:.8}
.foot__dry{margin-left:auto;color:var(--ash)}

/* ------------------------------------------------------------------ reveals */

.reveal{transition:opacity 1s cubic-bezier(.16,.84,.24,1),transform 1s cubic-bezier(.16,.84,.24,1)}
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.is-in{opacity:1;transform:none}
/* Display type is uncovered rather than faded. This has to be a mask, not a
   clip-path: clipping the observed element to zero height also zeroes the
   rect IntersectionObserver measures, so it would never fire and the text
   would stay hidden forever. Masks leave geometry alone. */
.js .reveal--wipe{
  opacity:1;
  transform:translateY(.1em);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.5) 84%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.5) 84%,transparent 100%);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:0 0;
          mask-position:0 0;
  -webkit-mask-size:100% 0%;
          mask-size:100% 0%;
  transition:-webkit-mask-size 1.15s cubic-bezier(.16,.84,.24,1),
             mask-size 1.15s cubic-bezier(.16,.84,.24,1),
             transform 1.15s cubic-bezier(.16,.84,.24,1);
}
.js .reveal--wipe.is-in{
  transform:none;
  -webkit-mask-size:100% 135%;
          mask-size:100% 135%;
}

/* a tube striking. Reserved for the statement band, which is about exactly
   that; used on every heading it would stop meaning anything. */
.js .reveal--strike{opacity:0;transform:none}
.js .reveal--strike.is-in{animation:strike 2.1s linear both}

@keyframes strike{
  0%  {opacity:0;text-shadow:none}
  7%  {opacity:.92;text-shadow:0 0 30px rgba(232,222,206,.5)}
  11% {opacity:.05;text-shadow:none}
  19% {opacity:1;text-shadow:0 0 26px rgba(232,222,206,.42)}
  23% {opacity:.08;text-shadow:none}
  31% {opacity:.85;text-shadow:0 0 22px rgba(232,222,206,.3)}
  37% {opacity:.12;text-shadow:none}
  52% {opacity:1;text-shadow:0 0 18px rgba(232,222,206,.26)}
  58% {opacity:.42;text-shadow:none}
  74% {opacity:1;text-shadow:0 0 12px rgba(232,222,206,.16)}
  100%{opacity:1;text-shadow:0 0 22px rgba(232,222,206,.07)}
}

.js .reveal:nth-child(2){transition-delay:.08s}
.js .reveal:nth-child(3){transition-delay:.16s}
.js .reveal:nth-child(4){transition-delay:.24s}

/* -------------------------------------------------------------- narrow view */

@media (max-width:960px){
  .split{grid-template-columns:1fr;gap:clamp(26px,5vh,44px)}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stills{grid-template-columns:1fr;gap:14px}
  .still img{aspect-ratio:16/9}
}

@media (max-width:680px){
  :root{--bar-h:58px}
  .bar__mark span{display:none}
  .bar__nav{gap:14px}
  .bar__nav a{font-size:.55rem;letter-spacing:.12em}
  .hero{min-height:92svh}
  .plate--hero img{object-position:80% 50%}
  .plate__scrim,
  .plate__scrim--left{
    background:linear-gradient(180deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.66) 40%,rgba(0,0,0,.80) 76%,#000 100%);
  }
  .lockup img{width:min(72vw,320px)}
  .hero__lead{max-width:26ch}
  .statement__line{max-width:none}
  .statement__turn{max-width:16ch}
  .actions{gap:10px}
  .btn{padding:13px 18px;font-size:.6rem;flex:1 1 auto;justify-content:center}
  .specs{grid-template-columns:1fr}
  .specs--stack > div{grid-template-columns:1fr;gap:4px;align-items:start}
  .specs--stack dt{padding-top:0}
  .cue{display:none}
  .foot__dry{margin-left:0;flex-basis:100%}
}

/* ----------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{opacity:1;transform:none}
  .js .reveal--strike{opacity:1}
  .glow{display:none}
  .grain::before,.grain::after{animation:none;transform:none}
  .plate--hero::after{animation:none;opacity:0}
  .still__frame::after,.btn--solid::after{display:none}
  /* .plate--hero img is out-specified by .plate--hero .plate__base,
     which is what actually carries the animations */
  .plate--hero .plate__base,
  .plate--hero .plate__lit{animation:none;scale:1.14}
  .plate img{translate:none}
  .plate__lit,.torch{display:none}
  .js .reveal--wipe{transform:none;-webkit-mask-size:100% 135%;mask-size:100% 135%}
}