/* The opening reconstructs the owner's crack mockup. theme.css extends its
   materials across the site while retaining the existing scroll choreography. */
.act-threshold { --h: 0; }
.act-threshold .act-stage {
  isolation: isolate;
  /* Let the rendered board and its pawn show through as the hero hands off. */
  background: rgb(5 5 5 / calc(1 - var(--h)));
}
.act-threshold .act-stage::before { display: none; }
.hero-crack {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -1;
  pointer-events: none;
  transform: translate3d(0, -103%, 0);
  opacity: calc(1 - var(--out));
}
.hero-pawn-art {
  position: absolute;
  z-index: 3;
  width: clamp(550px, 45vw, 640px);
  height: auto;
  aspect-ratio: 1262 / 1246;
  left: 54vw;
  top: 4vh;
  pointer-events: none;
  /* Foot of the upright cutout, measured from its alpha silhouette. */
  transform-origin: 69.7128% 92.8253%;
  /* Retain the opening lean until scroll eases it into the board's axis. */
  transform: rotate(-18deg);
  will-change: transform, opacity;
  opacity: calc(1 - clamp(0, (var(--h) - 0.52) / 0.42, 1));
}
.hero-pawn-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 69% 90%;
  /* The source photograph is tilted 26deg; straighten its stem before handoff. */
  transform: translate3d(0, 105vh, 0) rotate(15deg) scale(0.92);
}
.hero-pawn-neutral { filter: grayscale(1) brightness(0.55) contrast(0.9); }
.hero-pawn-motion {
  position: absolute;
  inset: 0;
  transform-origin: 69% 65%;
  will-change: transform;
}
body.hero-live .hero-pawn-motion {
  animation: hero-pawn-float 6s 3050ms ease-in-out infinite;
}
@keyframes hero-pawn-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(calc(2px * var(--pawn-weight, 1)), calc(-12px * var(--pawn-weight, 1)), 0)
    rotate(calc(.45deg * var(--pawn-weight, 1))); }
}
.hero-pawn-hover {
  position: absolute;
  inset: 0;
  transform-origin: 69% 65%;
  transform: translate3d(var(--pawn-x, 0px), var(--pawn-y, 0px), 0) rotate(var(--pawn-tilt, 0deg));
  transition: transform 320ms cubic-bezier(.2, .65, .3, 1);
  will-change: transform;
}
.hero-pawn-light {
  position: absolute;
  inset: 0;
  transform: rotate(26deg);
  transform-origin: 69% 90%;
  mask: url('/assets/hero-pawn-static.png') center / contain no-repeat;
  opacity: var(--pawn-light, 0);
  transition: opacity 220ms ease-out;
  pointer-events: none;
}
.hero-pawn-light::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse at 65% 38%, #fff 0%, rgb(255 255 255 / .8) 10%,
    rgb(255 255 255 / .25) 23%, transparent 36%, rgb(0 0 0 / .5) 65%);
  transform: translate3d(var(--pawn-light-x, 0px), var(--pawn-light-y, 0px), 0);
  transition: transform 280ms cubic-bezier(.2, .65, .3, 1);
  will-change: transform;
}
.hero-pawn-marble { opacity: 0; }
body.hero-live .hero-pawn-art img {
  animation: hero-pawn-launch 1150ms 1230ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.hero-live .hero-pawn-art .hero-pawn-marble {
  animation: hero-pawn-launch 1150ms 1230ms cubic-bezier(0.16, 1, 0.3, 1) both,
    hero-marble-reveal 650ms 2390ms ease-out both;
}
@keyframes hero-pawn-launch {
  0% { transform: translate3d(0, 105vh, 0) rotate(15deg) scale(0.92); }
  75% { transform: translate3d(0, -1.2vh, 0) rotate(27.5deg) scale(1.015); }
  100% { transform: translate3d(0, 0, 0) rotate(26deg) scale(1); }
}
@keyframes hero-marble-reveal {
  from { opacity: 0; clip-path: inset(100% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}
body.hero-live .hero-crack {
  animation: crack-fall 1100ms 120ms cubic-bezier(0.18, 0.82, 0.2, 1) both;
}
@keyframes crack-fall {
  0% { transform: translate3d(0, -103%, 0); }
  72% { transform: translate3d(0, 1.4%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.hero {
  z-index: 2;
  display: block;
  padding: clamp(124px, 17vh, 170px) max(var(--gut), 7vw) 30px;
}
.hero .d1 {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 70vw;
  margin: 0;
  font-size: min(9.4vw, 16vh);
  line-height: 0.74;
  letter-spacing: -0.038em;
  color: #080808;
  transform: translateY(calc(var(--out) * -14vh));
}
.hero .ln {
  display: block;
  padding: 0;
  overflow: visible;
}
.hero .ln > i {
  display: block;
  white-space: nowrap;
  transform: scaleX(1.4);
  transform-origin: left center;
  opacity: 1;
}
.hero .ln:nth-child(4) > i { transform: none; }
.hero .ln:nth-child(5) > i {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 2vw, 34px);
  transform: none;
}
.hero .ln:nth-child(5) .hero-word:first-child {
  margin-right: 0.68em;
  transform-origin: left center;
}
.hero .hero-word {
  color: #080808;
  text-shadow: none;
  opacity: 0;
  transform: translate3d(0, 0.32em, 0);
  filter: blur(8px);
  animation: none;
}
body.hero-live .hero-word {
  animation: hero-crack-word 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.hero-live .hero .ln:nth-child(1) .hero-word { animation-delay: 1320ms; }
body.hero-live .hero .ln:nth-child(2) .hero-word { animation-delay: 1430ms; }
body.hero-live .hero .ln:nth-child(3) .hero-word { animation-delay: 1540ms; }
body.hero-live .hero .ln:nth-child(4) .hero-word { animation-delay: 1650ms; }
body.hero-live .hero .ln:nth-child(5) .hero-word:first-child { animation-delay: 1760ms; }
body.hero-live .hero .ln:nth-child(5) .hero-word:last-child { animation-delay: 1870ms; }
body.hero-live .hero .ln:nth-child(5) .hero-word:first-child {
  animation-name: hero-crack-word-wide;
}
@keyframes hero-crack-word {
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes hero-crack-word-wide {
  from { opacity: 0; transform: translate3d(0, 0.32em, 0) scaleX(1.25); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scaleX(1.25); filter: blur(0); }
}
.hero .hero-class {
  color: #fff;
  -webkit-text-stroke: 1px #111;
  text-shadow: 0 2px 3px rgb(0 0 0 / 0.55);
}

.hero-base {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(77px, 11.5vh, 124px);
  width: auto;
  transform: translateX(-50%);
  display: block;
  opacity: calc(1 - var(--out));
}
.hero-foot {
  width: max-content;
  max-width: 95vw;
  opacity: 0;
  transform: translateY(22px);
}
body.hero-live .hero-foot {
  animation: hero-actions-in 670ms 2380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hero-actions-in {
  to { opacity: 1; transform: translateY(0); }
}
.hero .cta-row { width: auto; justify-content: center; gap: 9px; }
.hero .cta-row > .cta,
.hero .cta-row > .cta:first-child {
  min-width: 0;
  min-height: 43px;
  padding: 0.64em 1.25em;
  font-size: 0.84rem;
  border-radius: 5px;
}
.hero .cta-row > .cta.ghost { min-width: 0; font-size: 0.84rem; }
.hero .cta-row > .mono.tiny {
  background: none;
  padding: 0;
  margin-top: 4px;
  font-size: 0.73rem;
  color: #b5b5b5;
  text-shadow: none;
}
.hero-me {
  position: absolute;
  z-index: 3;
  left: var(--gut);
  bottom: 18px;
  border: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(14px);
}
body.hero-live .hero-me { animation: hero-actions-in 600ms 2650ms ease-out both; }

/* Chrome sits on the white part of the opening and returns to the film's dark
   styling when the reader leaves this act. */
body.hero-light #nav { color: #0a0a0a; }
body.hero-light #nav::before { display: none; }
body.hero-light #nav {
  inset: 0 0 auto;
  padding: 12px 2.5vw;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
body.hero-light #nav .mark { background: #111; }
body.hero-light #nav .brand,
body.hero-light #nav .nav-links a { color: #0a0a0a; }
body.hero-light #nav > .cta { color: #0a0a0a; background: #f4f4f4; border-color: #b9b9b9; }
body.hero-light #ladder { color: #333; }
body.hero-light #ladder .rungs li { border-color: #777; }
body.hero-light #ladder .rungs li.on { background: #0b0b0b; border-color: #0b0b0b; box-shadow: none; }
body.hero-light #readout { color: #333; }
body:not(.hero-live):not(.gl-failed) #nav,
body:not(.hero-live):not(.gl-failed) #ladder,
body:not(.hero-live):not(.gl-failed) #readout { opacity: 0; }
body.hero-live #nav,
body.hero-live #ladder,
body.hero-live #readout {
  animation: hero-chrome-in 500ms 1300ms ease-out both;
}
@keyframes hero-chrome-in { to { opacity: 1; } }

@media (max-width: 900px) {
  .hero-pawn-art { left: 46vw; }
  .hero { padding-top: clamp(112px, 15vh, 156px); }
  .hero .d1 { font-size: min(10vw, 12vh); max-width: 88vw; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .hero .ln:nth-child(5) > i { gap: clamp(14px, 2.5vw, 28px); }
}
@media (max-width: 600px) {
  .hero-pawn-art { width: min(60vw, 230px); left: auto; right: 0; top: 92px; }
  .hero { padding: clamp(210px, 26vh, 270px) var(--gut) 20px; }
  .hero .d1 { font-size: clamp(2.8rem, 11.5vw, 4rem); line-height: 1.01; max-width: 96vw; }
  .hero .ln { padding-bottom: 0; }
  .hero .ln > i { transform: scaleX(1.12); }
  .hero .ln:nth-child(2) > i { transform: scaleX(1.04); }
  .hero .ln:nth-child(4) > i { transform: none; }
  .hero .ln:nth-child(5) > i { gap: clamp(20px, 7vw, 32px); transform: none; }
  .hero .ln:nth-child(5) .hero-word:first-child { margin-right: 0; }
  body.hero-live .hero .ln:nth-child(5) .hero-word:first-child { animation-name: hero-crack-word; }
  .hero-base { bottom: 65px; width: min(86vw, 340px); }
  .hero-foot { width: 100%; }
  .hero .cta-row { flex-direction: row; gap: 8px; }
  .hero .cta-row > .cta,
  .hero .cta-row > .cta:first-child,
  .hero .cta-row > .cta.ghost { width: auto; min-height: 41px; font-size: 0.7rem; padding: 0.6em 0.7em; }
  .hero .cta-row > .mono.tiny { flex-basis: 100%; font-size: 0.69rem; }
  .hero-me { left: var(--gut); bottom: 10px; }
  body.gl-failed .hero { padding-top: clamp(210px, 26vh, 270px); }
}
@media (max-height: 740px) and (min-width: 901px) {
  .hero { padding-top: clamp(92px, 14vh, 120px); }
  .hero .d1 { font-size: min(8.8vw, 15vh); }
  .hero-base { bottom: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pawn-motion, .hero-pawn-hover { transform: none !important; animation: none !important; }
  .hero-pawn-light { display: none; }
  .hero-pawn-art { transform: none !important; opacity: 1 !important; }
  .hero-pawn-art img,
  body.hero-live .hero-pawn-art img,
  body.hero-live .hero-pawn-marble {
    transform: rotate(26deg); animation: none;
  }
  .hero-pawn-neutral { display: none !important; }
  .hero-pawn-marble { opacity: 1; clip-path: none; }
  .hero-crack,
  body.hero-live .hero-crack { transform: none; animation: none; }
  .hero .hero-word,
  body.hero-live .hero-word,
  .hero-foot,
  body.hero-live .hero-foot,
  .hero-me,
  body.hero-live .hero-me,
  body.hero-light #nav,
  body.hero-light #ladder,
  body.hero-light #readout,
  body.hero-live #nav,
  body.hero-live #ladder,
  body.hero-live #readout {
    opacity: 1; transform: none; filter: none; animation: none;
  }
}
body.gl-failed .act-threshold .act-stage { min-height: 100vh; }
body.gl-failed .hero-crack { transform: none; animation: none; }
body.gl-failed .hero-pawn-art img { transform: rotate(26deg); animation: none; }
body.gl-failed .hero-pawn-neutral { display: none; }
body.gl-failed .hero-pawn-marble { opacity: 1; clip-path: none; }
body.gl-failed #nav {
  background: #fff;
  border-color: #ddd;
  color: #111;
  box-shadow: 0 5px 18px rgb(0 0 0 / 0.12);
}
body.gl-failed #nav .mark { background: #111; }
body.gl-failed #nav .brand,
body.gl-failed #nav .nav-links a { color: #111; }
body.gl-failed .hero-word,
body.gl-failed .hero-foot,
body.gl-failed .hero-me { opacity: 1; transform: none; filter: none; animation: none; }