/* ==========================================================================
   Lomangino Technologies - "The Strip"
   The portfolio is one 35mm reel. The viewport is the projector gate.
   Scrolling runs the film through it.

   Palette is a darkroom under safelight: warm blackout surround, the orange
   mask of colour negative stock, silver-gelatin grey, and one cool 5600K
   cyan reserved strictly for light passing through a frame.
   ========================================================================== */

:root {
  --safelight:   #17090a;  /* warm blackout, the room                 */
  --room:        #2b100c;  /* safelight bloom in the corner           */
  --emulsion:    #0b0c0d;  /* the strip itself, cooler than the room  */
  --emulsion-up: #121315;  /* strip, lifted                           */
  --mask:        #e0601f;  /* colour-negative orange mask             */
  --mask-dim:    #93441c;
  --halide:      #b6bbba;  /* silver gelatin                          */
  --halide-dim:  #6c7371;
  --lightbox:    #9ee4f2;  /* 5600K backlight. illumination only      */
  --paper:       #f0eae0;

  --gate-w: 46px;
  --perf: 0px;             /* driven by scroll in reel.js             */

  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ease: cubic-bezier(.16, .84, .34, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0 var(--gate-w);
  min-height: 100%;
  font-family: var(--body);
  color: var(--halide);
  background-color: var(--safelight);
  background-image:
    radial-gradient(120% 70% at 50% -10%, var(--room) 0%, transparent 62%),
    radial-gradient(90% 55% at 50% 108%, #24100d 0%, transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--mask); color: #120607; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--lightbox);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   THE GATE
   Fixed perforation rails. Their background-position tracks scroll 1:1, so
   the film reads as running past a stationary gate rather than the page
   reading as a document that moves.
   -------------------------------------------------------------------------- */

.gate {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--gate-w);
  z-index: 40;
  pointer-events: none;
  background-color: var(--emulsion);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='76'%3E%3Crect x='12' y='23' width='22' height='30' rx='5.5' fill='%2317090a' stroke='%23233034' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: var(--gate-w) 76px;
  background-position: 0 var(--perf);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, .85);
}

.gate--left  { left: 0;  border-right: 1px solid rgba(224, 96, 31, .16); }
.gate--right { right: 0; border-left:  1px solid rgba(224, 96, 31, .16); }

/* --------------------------------------------------------------------------
   GRAIN
   -------------------------------------------------------------------------- */

.grain {
  position: fixed;
  inset: -60px;
  z-index: 60;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 620ms steps(1) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-14px, 9px); }
  50%  { transform: translate(11px, -12px); }
  75%  { transform: translate(-8px, -6px); }
  100% { transform: translate(0, 0); }
}

/* --------------------------------------------------------------------------
   HUD - footage counter in real feet+frames (35mm runs 16 frames to the foot)
   -------------------------------------------------------------------------- */

/* burn-in, where a timecode window actually sits: bottom of frame */
.hud {
  position: fixed;
  bottom: 18px;
  right: calc(var(--gate-w) + 20px);
  z-index: 50;
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .14em;
  color: var(--mask-dim);
  pointer-events: none;
}

/* keeps the burn-in legible over whatever frame is passing under it */
.hud::before {
  content: "";
  position: absolute;
  inset: -18px -14px -16px -34px;
  z-index: -1;
  background: radial-gradient(120% 210% at 88% 50%, rgba(10, 11, 12, .95) 0%, rgba(10, 11, 12, 0) 76%);
}

.hud__tc { color: var(--mask); }
.hud__fps { color: var(--halide-dim); }

/* --------------------------------------------------------------------------
   THE REEL
   -------------------------------------------------------------------------- */

.reel {
  max-width: 1180px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--emulsion) 0%, #0e0f11 50%, var(--emulsion) 100%);
  border-left: 1px solid rgba(224, 96, 31, .1);
  border-right: 1px solid rgba(224, 96, 31, .1);
}

/* --------------------------------------------------------------------------
   LEADER (head + tail)
   -------------------------------------------------------------------------- */

.leader { padding: 96px clamp(22px, 5vw, 72px) 76px; }

.leader__head,
.slate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mask);
}

.leader__head i,
.slate i,
.tail__links i {
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.leader__body {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  margin: 44px 0 0;
}

/* academy leader mark. states the one fact the page is about: four frames. */
.acad {
  flex: 0 0 auto;
  width: clamp(74px, 9vw, 116px);
  height: auto;
  overflow: visible;
}

.acad__ring {
  fill: none;
  stroke: var(--mask);
  stroke-width: 1.25;
  opacity: .55;
}

.acad__ring--in { opacity: .28; }

.acad__cross {
  stroke: var(--mask);
  stroke-width: 1;
  opacity: .3;
}

.acad__sweep {
  fill: var(--lightbox);
  opacity: .12;
  transform-origin: 60px 60px;
}

.acad__num {
  fill: var(--paper);
  font-family: var(--display);
  font-weight: 800;
  font-size: 58px;
}

.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.1rem, 10.5vw, 10.2rem);
  line-height: .82;
  letter-spacing: -.014em;
  text-transform: uppercase;
  color: var(--paper);
}

.title__l {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;   /* room for descenders inside the mask */
}

.title__l span { display: block; }

.title__l + .title__l { color: var(--mask); }

.lede {
  max-width: 46ch;
  margin: 40px 0 0;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.5;
  color: var(--halide);
}

.slate {
  margin-top: 46px;
  color: var(--halide-dim);
  letter-spacing: .26em;
}

/* --------------------------------------------------------------------------
   FRAMES
   -------------------------------------------------------------------------- */

.frames {
  margin: 0;
  padding: 0;
  list-style: none;
}

.frame {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(190px, 250px);
  gap: clamp(20px, 3.6vw, 56px);
  padding: clamp(48px, 6vw, 80px) clamp(22px, 5vw, 72px);
  border-top: 1px solid rgba(224, 96, 31, .16);   /* the frame line */
  transition: opacity 420ms var(--ease);
}

/* light through the gate: cool bloom behind whichever frame is under the eye */
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(78% 130% at 30% 50%, rgba(158, 228, 242, .11) 0%, transparent 68%),
    linear-gradient(90deg, rgba(158, 228, 242, .05), transparent 55%);
  transition: opacity 460ms var(--ease);
}

.frames:hover .frame,
.frames:focus-within .frame { opacity: .34; }

.frames .frame:hover,
.frames .frame:focus-within { opacity: 1; }

.frames .frame:hover::before,
.frames .frame:focus-within::before { opacity: 1; }

/* edge printing, set along the strip the way keycode actually is */
.frame__edge {
  grid-column: 1;
  grid-row: 1 / 3;
  writing-mode: vertical-rl;
  align-self: start;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--mask-dim);
  opacity: .6;
  white-space: nowrap;
  user-select: none;
}

.frame__no {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--halide-dim);
}

.frame__no b {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  color: var(--mask);
}

.frame__main { grid-column: 2; grid-row: 2; }

.frame__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: .88;
  letter-spacing: -.008em;
  text-transform: uppercase;
  color: var(--paper);
}

.frame__link {
  text-decoration: none;
  transition: color 300ms var(--ease);
}

/* whole frame is the target, one link per frame */
.frame__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.frame:hover .frame__link,
.frame:focus-within .frame__link { color: var(--lightbox); }

.frame__lede {
  max-width: 40ch;
  margin: 22px 0 0;
  font-size: clamp(1.02rem, 1.55vw, 1.3rem);
  font-weight: 500;
  line-height: 1.42;
  color: var(--paper);
}

.frame__note {
  max-width: 52ch;
  margin: 16px 0 0;
  font-size: .95rem;
  line-height: 1.62;
  color: var(--halide-dim);
}

.frame__go {
  margin: 28px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mask);
}

.frame__go b {
  display: inline-block;
  transition: transform 340ms var(--ease);
}

.frame:hover .frame__go b { transform: translateX(9px); }

/* the can label: who it is for, and what they get out of it */
.frame__spec {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: start;
  margin: 6px 0 0;
  text-align: right;
}

.frame__status {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.frame__for {
  margin: 15px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--halide-dim);
}

.frame__gets {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: .84rem;
  line-height: 1.36;
  color: var(--halide);
}

.frame__gets li { padding: 10px 0; }

.frame__gets li + li { border-top: 1px solid rgba(182, 187, 186, .09); }

.frame__status--live { color: var(--lightbox); }
.frame__status--poc  { color: var(--mask); }

.frame__status::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
}

/* scroll reveal */
.frame__no,
.frame__main,
.frame__spec,
.frame__edge {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.frame.is-lit .frame__no,
.frame.is-lit .frame__main,
.frame.is-lit .frame__spec,
.frame.is-lit .frame__edge {
  opacity: 1;
  transform: none;
}

.frame.is-lit .frame__edge { opacity: .6; }
.frame.is-lit .frame__no   { transition-delay: 40ms; }
.frame.is-lit .frame__main { transition-delay: 90ms; }
.frame.is-lit .frame__spec { transition-delay: 150ms; }

/* --------------------------------------------------------------------------
   TAIL
   -------------------------------------------------------------------------- */

.leader--tail {
  border-top: 1px solid rgba(224, 96, 31, .16);
  padding-bottom: 110px;
}

.tail__note {
  max-width: 44ch;
  margin: 34px 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--halide);
}

.tail__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 30px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  color: var(--mask-dim);
}

.tail__links a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 96, 31, .45);
  padding-bottom: 3px;
  transition: color 280ms var(--ease), border-color 280ms var(--ease);
}

.tail__links a:hover {
  color: var(--lightbox);
  border-color: var(--lightbox);
}

.slate--tail { margin-top: 56px; }

/* --------------------------------------------------------------------------
   PAGE LOAD: the leader runs, then the picture starts
   -------------------------------------------------------------------------- */

.acad__sweep { transform: rotate(0deg); }

body.is-ready .acad__sweep {
  animation: sweep 1500ms var(--ease) forwards;
}

@keyframes sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.title__l span { transform: translateY(104%); }

body.is-ready .title__l span {
  transform: none;
  transition: transform 900ms var(--ease);
}

body.is-ready .title__l:nth-child(2) span { transition-delay: 110ms; }

.leader__head,
.lede,
.slate,
.acad { opacity: 0; }

body.is-ready .leader__head,
body.is-ready .lede,
body.is-ready .slate,
body.is-ready .acad {
  opacity: 1;
  transition: opacity 900ms var(--ease) 260ms;
}

body.is-ready .leader--tail .leader__head,
body.is-ready .leader--tail .slate { transition-delay: 0ms; }

/* --------------------------------------------------------------------------
   NARROW
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .frame { grid-template-columns: 26px minmax(0, 1fr); }
  .frame__edge { grid-row: 1 / 4; font-size: 8px; letter-spacing: .26em; }
  .frame__spec {
    grid-column: 2;
    grid-row: 3;
    margin-top: 34px;
    text-align: left;
  }
  .frame__gets { columns: 2; column-gap: 30px; }
  .frame__gets li { break-inside: avoid; }
}

@media (max-width: 640px) {
  :root { --gate-w: 24px; }
  .gate {
    background-size: 24px 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='44'%3E%3Crect x='6' y='13' width='12' height='18' rx='3.5' fill='%2317090a' stroke='%23233034' stroke-width='.8'/%3E%3C/svg%3E");
  }
  .hud { right: calc(var(--gate-w) + 12px); gap: 11px; font-size: 9px; }
  .hud__fps { display: none; }
  .leader { padding-top: 76px; }
  .leader__body { flex-direction: column; align-items: flex-start; gap: 26px; }
  .frame { grid-template-columns: minmax(0, 1fr); }
  .frame__edge { display: none; }
  /* keep the domain and its arrow on one line at 390px */
  .frame__go { font-size: 9px; letter-spacing: .05em; }
  .frame__no   { grid-column: 1; grid-row: 1; }
  .frame__main { grid-column: 1; grid-row: 2; }
  .frame__spec { grid-column: 1; grid-row: 3; }
  .frame__gets { columns: 1; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION - freeze the film, keep the look
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .grain { animation: none; }

  .gate { background-position: 0 0 !important; }

  .frame,
  .frame::before,
  .frame__no,
  .frame__main,
  .frame__spec,
  .frame__edge,
  .frame__go b,
  .frame__link,
  .title__l,
  .leader__head,
  .lede,
  .slate,
  .acad {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }

  .title__l { transform: none; }
  .leader__head, .lede, .slate, .acad { opacity: 1; }
  .frame__no, .frame__main, .frame__spec { opacity: 1; transform: none; }
  .frame__edge { opacity: .6; transform: none; }
}