/* The still composition is also the reduced-motion and no-script layout. */
.portrait-scene { position: relative; background: #17100b; }
.portrait-stage { position: relative; isolation: isolate; }
.opening-field {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2px;
  align-items: center;
  background: #110c09;
}
.opening-field img { width: 100%; height: auto; }
.slab-right, .stone-fracture, .opening-grit, .opening-chapter, .scroll-trace { display: none; }
.portrait-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 24px;
  padding-block: 18px 27px;
}
.opening-title { display: flex; gap: 13px; align-items: baseline; }
.opening-title h1 { color: var(--stone); font-size: 43px; line-height: .88; }
.opening-title p {
  color: var(--dust);
  font: 11px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portrait-copy .actions { margin: 0; gap: 4px 17px; }
.portrait-copy .button {
  border: 1px solid #e9d5c58c;
  border-radius: 100px;
  background: #1c130feb;
  color: var(--stone);
}
.portrait-copy .button:hover { border-color: var(--stone); background: #4b3123; }

.film-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(15px, 4vw, 64px);
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
}
.film-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  color: var(--stone);
  text-decoration: none;
  font-size: 13px;
}
.film-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.film-nav span { color: var(--leather); font: 10px/1.5 var(--mono); }

.stone-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(28px, 8vw, 120px);
  padding-block: clamp(65px, 10vw, 148px);
  scroll-margin-top: 18px;
}
.stone-copy h2 { margin: 12px 0 16px; font-size: clamp(62px, 10vw, 146px); }
.stone-copy .actions { margin-top: 12px; }
.stone-art { overflow: hidden; isolation: isolate; background: #1d140e; }
.stone-art img { width: 100%; height: auto; }
.motion-ready .stone-art img {
  transform: translateY(var(--stone-shift, 0px)) scale(1.075);
}
.motion-ready .stone-copy h2 {
  transform: translateY(var(--stone-title-shift, 0px));
}
.motion-ready .scroll-trace {
  display: block;
  position: fixed;
  z-index: 5;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  background: #c6987434;
}
.scroll-trace::after,
.scroll-trace ~ .signup-section::before,
.scroll-trace ~ .follow-section::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--leather);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
}
.scroll-trace ~ .signup-section::before { transform: scaleX(var(--section-progress, 1)); }
.scroll-trace ~ .follow-section::before {
  position: absolute;
  inset: -1px 0 auto;
  transform: scaleX(var(--section-progress, 1));
}
.scroll-trace ~ .follow-section { position: relative; }

@media (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .portrait-scene {
    --stage-height: 100svh;
    --scene-travel: clamp(490px, 87svh, 850px);
    min-height: calc(var(--stage-height) + var(--scene-travel));
  }
  .motion-ready .portrait-stage {
    position: sticky;
    top: 0;
    height: var(--stage-height);
    display: grid;
    align-items: end;
    overflow: hidden;
  }
  .motion-ready .opening-field {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 50% 48%, #3c2a1d, #130d0a 78%);
  }
  .motion-ready .opening-field::after {
    content: '';
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, #130c08 1%, #130c08b8 10%, transparent 35%);
  }
  .motion-ready .portrait-art {
    position: absolute;
    inset: 0;
    opacity: var(--portrait-opacity, 0);
    overflow: hidden;
  }
  .motion-ready .portrait-art img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    transform: scale(var(--portrait-scale, 2.3));
    transform-origin: 50% 54%;
  }
  .motion-ready .opening-cover {
    position: relative;
    z-index: 2;
    width: min(100%, calc(var(--stage-height) * 1.13));
    aspect-ratio: 1;
    transform: translateY(3%) scale(var(--cover-scale, 1));
  }
  .motion-ready .stone-slab {
    position: absolute;
    inset: 0;
    opacity: var(--slab-opacity, 1);
  }
  .motion-ready .stone-slab img {
    height: 100%;
    mask-image: radial-gradient(ellipse 58% 66% at 50% 47%, #000 59%, #000e 75%, transparent 86%);
  }
  .motion-ready .slab-left {
    clip-path: polygon(0 0, 50.2% 0, 47.2% 13%, 51.2% 24%, 48.2% 35%, 52.2% 47%, 49.2% 60%, 54.2% 73%, 50.2% 85%, 53.2% 100%, 0 100%);
    transform: translateX(calc(-1 * var(--slab-shift, 0%))) rotate(calc(-1 * var(--slab-turn, 0deg)));
  }
  .motion-ready .slab-right {
    display: block;
    clip-path: polygon(49.8% 0, 100% 0, 100% 100%, 52.8% 100%, 49.8% 85%, 53.8% 73%, 48.8% 60%, 51.8% 47%, 47.8% 35%, 50.8% 24%, 46.8% 13%);
    transform: translateX(var(--slab-shift, 0%)) rotate(var(--slab-turn, 0deg));
  }
  .motion-ready .stone-fracture {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: var(--fracture-opacity, 0);
  }
  .stone-fracture polyline {
    fill: none;
    stroke: #e2b590;
    stroke-width: 1;
    stroke-dasharray: 1;
    stroke-dashoffset: var(--fracture-draw, 1);
  }
  .motion-ready .opening-grit {
    display: block;
    position: absolute;
    z-index: 3;
    inset: 0;
    opacity: var(--grit-opacity, 0);
    pointer-events: none;
  }
  .opening-grit i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    aspect-ratio: 1;
    background: #b89573;
    transform: translate(calc(var(--drift) * var(--grit-travel, 0)), calc(var(--drop) * var(--grit-travel, 0))) rotate(40deg);
  }
  .motion-ready .portrait-copy {
    position: relative;
    z-index: 1;
    grid-template-columns: 1fr minmax(110px, 172px) 1fr;
    align-items: center;
    transform: translateY(calc(-1 * var(--opening-headroom, 97px)));
  }
  .motion-ready .portrait-copy .actions { justify-content: flex-end; }
  .motion-ready .opening-chapter {
    display: grid;
    gap: 5px;
    text-align: center;
    color: var(--dust);
    font: 10px/1.35 var(--mono);
    letter-spacing: .12em;
  }
  .opening-chapter i { height: 1px; background: #e1bba857; }
  .opening-chapter i::after {
    content: '';
    display: block;
    height: 1px;
    background: #ffe3c7;
    transform: scaleX(var(--opening-progress, 0));
    transform-origin: left;
  }
  .opening-scroll-label { color: var(--muted); font-size: 9px; }
}

.release-section {
  margin-block-start: clamp(66px, 10vw, 138px);
  padding-block-end: clamp(66px, 10vw, 138px);
  scroll-margin-top: 16px;
}
.release-heading h2 { margin-top: 14px; }
.release-list { display: grid; gap: clamp(62px, 10vw, 132px); margin-top: clamp(32px, 6vw, 76px); }
.release-row {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(34px, 9vw, 136px);
  padding: 0;
}
.release-row:nth-child(even) .release-art { grid-column: 2; grid-row: 1; }
.release-row:nth-child(even) .release-copy { grid-column: 1; grid-row: 1; }
.release-art { width: min(100%, 530px); margin-inline: auto; }
.release-art img { width: 100%; height: auto; }
.motion-ready .release-row .release-art { transform: translateY(var(--release-shift, 0px)); }
.release-copy h3 { font-size: clamp(45px, 6.5vw, 102px); margin-block: 10px 9px; }
.release-copy .credit { color: var(--muted); margin-top: 8px; font-size: 16px; }
.stream-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(16px, 3vw, 38px); }
.release-copy .stream-links { margin-top: 18px; }
.stream-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  color: var(--stone);
  font-size: 15px;
  font-weight: 600;
  text-decoration-color: var(--leather);
  text-underline-offset: 5px;
}
.stream-links a:hover { color: var(--focus); }
.stream-links a span { color: var(--leather); font-size: 13px; }
.follow-section { padding-block: clamp(35px, 6vw, 75px); }

.motion-ready [data-reveal] {
  transition: opacity 380ms ease, transform 520ms cubic-bezier(.22,.71,.3,1);
}
.motion-ready [data-reveal]:not(.is-visible):not(:focus-within) {
  opacity: 0;
  transform: translateY(24px);
}

@media (max-width: 900px) {
  .opening-title { gap: 8px; flex-wrap: wrap; }
  .opening-title p { font-size: 10px; }
}
@media (max-width: 760px) {
  .portrait-copy { grid-template-columns: 1fr; gap: 13px; }
  .opening-title h1 { font-size: 38px; }
  .opening-field { grid-template-columns: 1fr; }
  .opening-cover { grid-row: 1; }
  .stone-section { grid-template-columns: 1fr; gap: 28px; padding-block: 52px 65px; }
  .stone-copy h2 { font-size: clamp(60px, 15.5vw, 112px); }
  .release-row { grid-template-columns: 1fr; gap: 20px; }
  .release-row:nth-child(even) .release-art,
  .release-row:nth-child(even) .release-copy { grid-column: auto; grid-row: auto; }
  .release-copy h3 { font-size: clamp(39px, 11vw, 69px); }
  .release-copy .stream-links { margin-top: 10px; }
  .motion-ready [data-reveal]:not(.is-visible):not(:focus-within) { transform: translateY(13px); }
}
@media (max-width: 760px) and (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .portrait-scene {
    --scene-travel: clamp(350px, 63svh, 540px);
  }
  .motion-ready .opening-field {
    inset: 0 0 100px;
    grid-template-columns: 1fr;
    background: radial-gradient(ellipse at 38% 60%, #443021, #21160f 54%, #130d0a 92%);
  }
  .motion-ready .opening-field::after {
    background: linear-gradient(0deg, #17100b, transparent 22%);
  }
  .motion-ready .portrait-art { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
  .motion-ready .portrait-art img {
    position: relative;
    width: 110%;
    max-width: none;
    height: auto;
    mask-image: linear-gradient(0deg, transparent, #000 13%, #000 92%, transparent);
  }
  .motion-ready .opening-cover {
    grid-row: auto;
    width: min(120%, 600px);
    transform: translateY(calc(-.5 * var(--opening-headroom, 115px))) scale(var(--cover-scale, 1));
  }
  .motion-ready .portrait-copy {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-block: 12px 19px;
    transform: translateY(calc(-1 * var(--opening-headroom, 115px)));
  }
  .motion-ready .portrait-copy .actions { grid-column: 1 / -1; justify-content: flex-start; }
  .motion-ready .opening-chapter { width: 112px; }
  .opening-scroll-label { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .release-row .release-art { transform: none; }
  .motion-ready [data-reveal]:not(.is-visible), .motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .interior-motion::before {
    content: '';
    position: fixed;
    z-index: 5;
    inset: 0 0 auto;
    height: 2px;
    background: var(--leather);
    transform: scaleX(var(--interior-progress, 0));
    transform-origin: left;
    pointer-events: none;
  }
  .interior-motion [data-interior-reveal="media"] {
    transform: translateY(var(--interior-shift, 0px));
  }
  [data-interior-reveal].interior-reveal-in {
    --interior-travel: 24px;
    --interior-scale: 1;
    --interior-opacity: .58;
    --interior-duration: 520ms;
    --interior-step: 52ms;
    --interior-order: 0;
    animation: interior-arrive var(--interior-duration) cubic-bezier(.2,.7,.25,1)
      calc(var(--interior-step) * var(--interior-order)) backwards;
  }
  [data-interior-reveal="media"].interior-reveal-in {
    --interior-travel: 0px;
    --interior-scale: .97;
    --interior-opacity: .56;
    --interior-duration: 620ms;
  }
  [data-interior-reveal="row"].interior-reveal-in {
    --interior-travel: 12px;
    --interior-opacity: .7;
    --interior-duration: 440ms;
  }
  [data-interior-stagger="1"].interior-reveal-in { --interior-order: 1; }
  [data-interior-stagger="2"].interior-reveal-in { --interior-order: 2; }
  [data-interior-stagger="3"].interior-reveal-in { --interior-order: 3; }

  @keyframes interior-arrive {
    from {
      opacity: var(--interior-opacity);
      translate: 0 var(--interior-travel);
      scale: var(--interior-scale);
    }
    to { opacity: 1; translate: none; scale: none; }
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  [data-interior-reveal].interior-reveal-in {
    --interior-travel: 21px;
    --interior-duration: 470ms;
    --interior-step: 34ms;
  }
  [data-interior-reveal="media"].interior-reveal-in {
    --interior-duration: 560ms;
  }
  [data-interior-reveal="row"].interior-reveal-in {
    --interior-travel: 10px;
    --interior-duration: 400ms;
  }
}