/* =====================================================================
   CUTSCENE — HOME: the strip
   Desktop: frames run left to right, edge print above and below.
   Phone:   frames run top to bottom, edge print down both sides.
   The strip moves continuously (scroll wheel, click-and-drag, swipe,
   arrow keys, clicking a side frame); js/home.js places every frame
   on each animation frame, growing it as it nears the centre.
   ===================================================================== */

.stage{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;                  /* swipes move the strip, not the page */
  user-select: none;
  -webkit-user-select: none;
}
.stage.is-dragging,
.stage.is-dragging .frame{ cursor: grabbing; }

/* The band that holds the frames and the edge print, centred so the
   middle frame sits in the middle of the stage. */
.track{
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: calc(var(--frame-h) + 2 * var(--edge-h) + var(--label-space) + var(--title-space));
  margin-top: calc(-1 * (var(--edge-h) + var(--label-space) + var(--frame-h) / 2));
}

/* One frame. Every frame is laid out at full size and scaled down by
   js/home.js the further it is from the centre (--s), and fades /
   greys by the same amount (--t: 1 at the centre, 0 one frame away). */
.cell{
  position: absolute;
  left: 50%;
  top: calc(var(--edge-h) + var(--label-space));
  width: var(--frame-w);
  height: var(--frame-h);
  margin-left: calc(var(--frame-w) / -2);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1));
  will-change: transform;
  --t: 0;
}

/* ---- Edge print: continuous text rows, no strip graphics ---- */
.edge{
  position: absolute;
  left: 0;
  right: 0;
  height: var(--edge-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--edge-size);
  letter-spacing: var(--edge-track);
  color: var(--edge-color);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
}
.edge-a{ top: 0; }
.edge-b{ bottom: 0; }
/* the run of markings travels with the frames and loops seamlessly */
.edge-run,
.edge-chunk{
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--edge-gap);
}
.edge-run{ will-change: transform; }

/* Drawn markers, so they look identical in every browser/font */
.m-tri, .m-bar{
  display: inline-block;
  background: currentColor;
  vertical-align: .05em;
}
.m-tri{
  width: .62em; height: .72em;
  margin-inline: .5em;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.m-bar{
  width: 1.1em; height: .5em;
  margin-inline: .5em;
}

/* ---- Frames ---- */
.frame{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--frame-empty);
  opacity: calc(var(--side-opacity) + (1 - var(--side-opacity)) * var(--t));
  filter: grayscale(calc(var(--side-gray) * (1 - var(--t))));
  cursor: pointer;
  -webkit-user-drag: none;
}
.stage:not(.is-moving) .cell:not(.is-active) .frame:hover{ opacity: calc(var(--side-opacity) + .18); }
.frame img,
.frame video{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.frame video{ opacity: 0; transition: opacity .5s ease; }
.frame video.is-ready{ opacity: 1; }

/* (the labels round the centre slide out and in with the strip's motion:
   js/home.js + the letter animation in css/base.css) */

/* ---- Labels + corner marks around the active frame (fixed at centre) ---- */
.focus{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--frame-w);
  height: var(--frame-h);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.corner{
  position: absolute;
  width: var(--corner-len);
  height: var(--corner-len);
  border: 0 solid rgb(var(--fg-rgb) / var(--corner-alpha));
}
.corner.tl{ left: calc(var(--corner-offset) * -1); top: calc(var(--corner-offset) * -1); border-left-width: 1px; border-top-width: 1px; }
.corner.tr{ right: calc(var(--corner-offset) * -1); top: calc(var(--corner-offset) * -1); border-right-width: 1px; border-top-width: 1px; }
.corner.bl{ left: calc(var(--corner-offset) * -1); bottom: calc(var(--corner-offset) * -1); border-left-width: 1px; border-bottom-width: 1px; }
.corner.br{ right: calc(var(--corner-offset) * -1); bottom: calc(var(--corner-offset) * -1); border-right-width: 1px; border-bottom-width: 1px; }

.focus-top{
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  margin-bottom: calc(var(--corner-offset) + 12px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}

.focus-bottom{
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  margin-top: calc(var(--corner-offset) + 14px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
}

.f-num, .f-total{
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  font-variant-numeric: tabular-nums;
  padding-top: .35em;
}
.f-num{ justify-self: start; }
.f-total{ justify-self: end; }

.f-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.f-title-main{
  font-family: var(--font-display);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  font-stretch: var(--title-width);
  letter-spacing: var(--title-track);
  line-height: 1;
  text-wrap: balance;
}
.f-sub{
  margin-top: .8em;
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---- Running timecode, just under the strip ---- */
.tc{
  position: absolute;
  left: 50%;
  top: calc(50% + var(--frame-h) / 2 + var(--title-space) + var(--edge-h) + var(--tc-gap));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tc-reel-gap);
  white-space: nowrap;
}
.tc-reel{
  display: flex;
  align-items: center;
  font-family: var(--tc-font);          /* same font as the timecode */
  font-weight: var(--tc-weight);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.tc-dot{
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: #c8462f;
  animation: tc-blink 1s steps(1, end) infinite;
}
@keyframes tc-blink{ 50%{ opacity: .15; } }

/* Timecode digits */
.tc-display{
  position: relative;
  font-family: var(--tc-font);
  font-weight: var(--tc-weight);
  font-size: var(--tc-size);
  font-feature-settings: "tnum" 1;       /* fixed-width digits: no jitter */
  letter-spacing: .04em;
  line-height: 1;
  color: rgb(var(--tc-rgb));
  font-variant-numeric: tabular-nums;
}
.tc-digits{ position: relative; }
.tc-digits .ff{ color: rgb(var(--tc-rgb) / .55); }   /* frames, dimmer */

@media (prefers-reduced-motion: reduce){
  .tc-dot{ animation: none; }
}

/* ---- "PLAY" beside the cursor over the main frame ---- */
.cursor-label{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  pointer-events: none;
  margin: var(--cursor-label-y) 0 0 var(--cursor-label-x);
  font-family: var(--font-mono);
  font-size: var(--cursor-label-size);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: 0 0 12px rgb(0 0 0 / .55), 0 0 2px rgb(0 0 0 / .6);   /* readable over bright footage */
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease;
}
.cursor-label.is-on{ opacity: 1; }

/* ---- Phone: vertical strip ---- */
@media (max-width: 760px){
  .track{
    left: 50%; right: auto;
    top: 0; bottom: 0;
    height: auto;
    margin-top: 0;
    width: calc(var(--frame-w) + 2 * var(--edge-h) + 24px);
    margin-left: calc((var(--frame-w) + 2 * var(--edge-h) + 24px) / -2);
  }
  .cell{
    top: 50%;
    margin-top: calc(var(--frame-h) / -2);
  }

  .edge{
    top: 0; bottom: 0;
    left: auto; right: auto;
    width: var(--edge-h);
    height: auto;
    writing-mode: vertical-rl;
  }
  .edge-a{ left: 0; transform: rotate(180deg); }  /* reads bottom-to-top */
  .edge-b{ right: 0; }

  /* In vertical text the letters turn sideways, but drawn shapes don't,
     so the markers are redrawn pointing along the strip. */
  .edge .m-tri{
    width: .72em; height: .62em;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    vertical-align: middle;
  }
  .edge .m-bar{
    width: .5em; height: 1.1em;
    vertical-align: middle;
  }

  .focus-top{ margin-bottom: calc(var(--corner-offset) + 8px); }
  .focus-bottom{ margin-top: calc(var(--corner-offset) + 10px); gap: 8px; }

  /* The timecode sits in its own bar at the bottom, mirroring the header:
     frames slide underneath and fade out instead of colliding with it. */
  .tc{
    top: auto;
    left: 0; right: 0;
    bottom: 0;
    transform: none;
    z-index: 4;
    gap: var(--tc-reel-gap);
    padding-block: 44px calc(18px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--bg) 58%, rgb(11 11 10 / 0));
  }
  .tc-reel{ font-size: 9.5px; }
}