/* Scene stack: only the active scene receives pointer events, and its
   still (or video) is visible. Work-scene body copy rises in with the
   same line motion as the rest of the type. */
.sc {
  pointer-events: none;
}

.sc.cur {
  pointer-events: auto;
  visibility: visible !important;
}

.sc.cur .mbox > .vid {
  opacity: 1;
}

.mbox > .vid,
.mbox > .veil,
.mbox > .fxc {
  pointer-events: none;
}

/* The reveal canvas has to sit above the still, the same way Get in Touch stacks it. */
.mbox > .fxc {
  z-index: 2;
}

/* Once the fluid canvas is painting, the raw still and the paper veil sit behind it.
   !important beats .vid.on, which would otherwise keep the full-color frame on top. */
.sc.cur .mbox.fxlive > .vid,
.sc.cur .mbox.fxlive > .veil {
  opacity: 0 !important;
}

html.fluid-off .sc.cur .mbox.fxlive > .vid,
html.fluid-off .sc.cur .mbox.fxlive > .veil {
  opacity: 1 !important;
}

.anns.show .cpar {
  animation: trLine var(--dur-text-body, 700ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) 0.6s both;
}

/* Intro: one reading column (location, name, proof, action) in the space the figure
   looks toward. Column 10 keeps the widest line, "Designer." at 3.6em, clear of his face. */
@media (min-width: 800px) {
  .tz .hero.st1 {
    grid-column: 10 / 13;
    justify-self: start;
    width: auto;
    max-width: none;
  }
  .hero.st1 .annot {
    position: fixed;
    top: auto;
    left: auto;
    right: var(--frame-x);
    bottom: var(--frame-bottom);
    max-width: none;
    margin: 0;
    padding: 14px 0;
    z-index: 8;
    font: 600 12px/16px Nohemi, "Nohemi Fallback", Helvetica, Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .hero.st1 .annbr {
    display: none;
  }
  .hero.st1 .cnote {
    position: static;
    margin: clamp(28px, 4vh, 48px) 0 0;
  }
  .hero.st1 .annot,
  .hero.st1 .cnote {
    text-shadow: rgba(255, 255, 255, 0.9) 0 0 12px, rgba(255, 255, 255, 0.8) 0 0 4px;
  }
  .veil {
    background: radial-gradient(40% 70% at 86% 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 72%);
  }
}

/* Intro name: left of the figure, clear of the fixed rail (about 140px wide) on desktop. */
.hname {
  position: absolute;
  z-index: 3;
  left: max(180px, 14vw);
  top: 26%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #242424;
  pointer-events: none;
  text-shadow: rgba(255, 255, 255, 0.9) 0 0 12px, rgba(255, 255, 255, 0.8) 0 0 4px;
}
.hn-name {
  font: 600 clamp(28px, 3vw, 60px)/1.05 Nohemi, "Nohemi Fallback", Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
}
.hn-role {
  font: 400 clamp(16px, 1.4vw, 26px)/1.3 "NaN SuperX", "NaN SuperX Fallback", Helvetica, Arial, sans-serif;
}
/* Narrower than about 17:10 the cover crop pushes the figure left into the name's spot, so
   the name moves to the open sky top right, under the header buttons. */
@media (min-width: 800px) and (max-aspect-ratio: 17/10) {
  .hname {
    left: auto;
    right: clamp(28px, 2.8vw, 56px);
    top: clamp(88px, 11vh, 120px);
    align-items: flex-end;
    text-align: right;
  }
}
/* Mobile stacks each scene as copy panel over media; in flow, the name sizes the intro's
   panel so the video starts below it, matching the work scenes. */
@media (max-width: 799.98px) {
  .hname {
    position: static;
    gap: 8px;
    text-shadow: none;
  }
  .hn-name {
    font-size: clamp(36px, 10vw, 48px);
  }
  .hn-role {
    font-size: 18px;
  }
}

.sc .statblk.ctblk,
.cblk .cta.wcta,
.rail .thesis {
  display: none;
}

@media (max-width: 799.98px) {
  .hero.st1 .annot {
    display: none;
  }
  /* !important beats the desktop crop set inline on the video; the fluid layer reads the computed value. */
  [data-screen-label="Scene 1 — Landing"] .vid {
    object-position: 52% 40% !important;
  }
}

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

.cpar.ctag {
  font-weight: 600;
  line-height: 1.3;
}
.cpar.ctag + .cpar {
  margin-top: var(--space-2, 8px);
}
.cblk.side .cpar,
.cblk.side .slbl {
  text-shadow: rgba(255, 255, 255, 0.95) 0 0 12px, rgba(255, 255, 255, 0.85) 0 0 4px;
}

@media (min-width: 800px) {
  .cblk.side.side {
    left: auto !important;
    right: clamp(28px, 2.8vw, 56px);
    width: min(420px, 30vw);
    max-width: none;
    top: clamp(108px, 13vh, 150px) !important;
  }
  /* Clears the fixed left rail (about 195-270px wide, growing with the viewport). */
  .cblk.side.side-left {
    left: max(260px, 19vw) !important;
    right: auto;
  }
  .cblk.side.side-mid {
    top: 50% !important;
    transform: translateY(-50%);
  }
}
.tdot {
  transition: transform 0.45s var(--ease-out-quint, cubic-bezier(0.22, 1, 0.36, 1));
}

@media (prefers-reduced-motion: reduce) {
  .tdot {
    transition: none;
  }
}