/* ==========================================================================
   PRESSING — THE PRESS
   A sectional view of a real press, seen from a low three-quarter angle so
   both the face of the panel and its thickness are visible at once.

   The panel is made of the materials we actually press: an OSB substrate and
   a decorative laminate surface, with an adhesive film between them. Nothing
   here is a grey rectangle standing in for a material.

   Everything that moves, moves on transform or opacity. Nothing animates
   width, height, top, left, filter or box-shadow.
   ========================================================================== */

/* --- the pinned stage ----------------------------------------------------- */

.press {
  position: relative;
  padding-block: 0;
  /* a lit studio rather than a black void */
  background:
    radial-gradient(120% 90% at 62% 22%, #34302B 0%, #201D1A 46%, #121110 100%);
  color: #F4F1EC;
}

.press__stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* the floor the machine stands on */
.press__stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.42) 100%);
  pointer-events: none;
}

/* --- the camera ----------------------------------------------------------- */

.press__camera {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform;
  transform-origin: 50% 46%;
}

.press__scene {
  position: relative;
  height: 340px;
  transform-style: preserve-3d;
}


/* --- the viewport the scene renders into ---------------------------------- */

.press__viewport { position: absolute; inset: 0; }

.press__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* the static fallback, shown only when WebGL is unavailable */
.press__static { display: none; }
.press.is-static .press__canvas { display: none; }
.press.is-static .press__static {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: clamp(80px, 16vh, 180px) var(--gutter);
}
.press.is-static .press__static img {
  display: block;
  width: min(420px, 74vw);
  height: auto;
  max-height: 26vh;
  object-fit: cover;
}
.press.is-static .press__static figcaption {
  margin-top: 22px;
  max-width: 46ch;
  text-align: center;
}
.press.is-static .note { display: none; }

/* heat lives over the canvas, not in it — cheaper, and easier to hold back */
.heat {
  position: absolute;
  left: 12%; right: 12%;
  top: 46%;
  height: 26%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 60%,
    rgba(255, 186, 116, 0.26) 0%, rgba(255, 186, 116, 0) 72%);
  will-change: opacity;
}

/* --- typography over the stage -------------------------------------------- */

.press__type {
  position: relative;
  z-index: 3;
  padding-top: calc(var(--nav-h) + clamp(26px, 5vh, 56px));
  pointer-events: none;
}
.press__type .label { color: #C9C1B5; }
.press__title {
  margin-top: clamp(12px, 1.8vw, 22px);
  font-size: clamp(30px, 4.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: #FAF7F2;
  max-width: min(14ch, 100%);
}

/* the step index — small, and the animation stays the hero */
.press__steps {
  position: relative;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0 0 clamp(26px, 4vh, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(14px, 2.4vw, 38px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.32);
}
.press__steps li { transition: color 260ms var(--ease); }
.press__steps li.is-on { color: #FAF7F2; }
.press__steps b { font-weight: 700; margin-right: 8px; opacity: 0.6; }

.press__rail {
  position: relative;
  z-index: 3;
  height: 1px;
  margin-bottom: clamp(30px, 5vh, 60px);
  background: rgba(255, 247, 238, 0.18);
}
.press__rail span {
  display: block; height: 100%;
  background: #FAF7F2;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* the payoff line, revealed once the panel is one piece */
.press__payoff {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  z-index: 4;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}
/* the two lines are styled individually — a blanket `p` rule here outranks
   .label and silently blows the sub-line up to display size */


/* --- mobile: a vertical section, not a shrunken machine -------------------
   The machinery reduces to bed and platen; the three layers stay large,
   because the whole point is watching them become one. */

@media (max-width: 760px) {
  :root {
    --press-sub-h: 40px;
    --press-glue-h: 7px;
    --press-surf-h: 12px;
    --press-skew: -26deg;
    --press-squash: 0.30;
  }
  .press__steps { gap: 0 14px; font-size: 10px; }
  .press__title { max-width: 100%; }
}


/* --- reduced motion: the same information, held still ---------------------- */

@media (prefers-reduced-motion: reduce) {
  .heat { opacity: 0 !important; }
  .press__stage { min-height: 0; padding-block: var(--sp-band); }
  .press__payoff { position: static; opacity: 1; margin-top: 40px; }
  .press__rail span { transform: scaleX(1); }
  .press__steps li { color: #FAF7F2; }
}


/* --- technical annotations ------------------------------------------------
   Small, set in the body face, with a hairline leader to the thing they name.
   They arrive with their stage and leave with it. */

.note {
  position: absolute;
  z-index: 6;
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
  font-family: var(--font-body);
  line-height: 1.45;
}
.note b {
  display: block;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FAF7F2;
}
.note i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0;
  color: #BDB4A7;
}
.note__lead {
  position: absolute;
  background: rgba(255, 243, 226, 0.42);
}





/* the payoff, clear of the panel */
.press__payoff {
  top: auto;
  bottom: auto;
  /* its own band of clear space above the machine, never across it */
  top: calc(var(--nav-h) + clamp(96px, 20vh, 190px));
}
.press__payoff-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: #FBF8F3;
}
.press__payoff-sub {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C3BAAD;
}

@media (max-width: 760px) {
  /* annotations crowd a narrow scene — keep only the two that carry the idea */
        .note i { display: none; }
  .press__payoff { top: calc(var(--nav-h) + clamp(60px, 12vh, 110px)); }
}

@media (prefers-reduced-motion: reduce) {
  .note { opacity: 1; }
}


/* every stage carries its own caption, in one fixed place so the eye is not
   chased around the frame */
/* the captions live on the right, where the type block never reaches */
.note {
  right: var(--gutter);
  left: auto;
  top: 46%;
  max-width: 26ch;
  text-align: right;
}
.note__lead { right: 0; left: auto; top: -14px; width: 34px; height: 1px; }
.note i { color: #C6BDB0; font-size: 12px; }

@media (max-width: 760px) {
  .note { top: calc(var(--nav-h) + 76px); right: var(--gutter); max-width: 20ch; }
  .note i { display: block; }
}