/* hero2/index.html only — the second (diagonal-peel) tear canvas is stacked
   above the stage-1 band canvas (z-index:1) so its opaque white flap hides the
   colour beneath it, while its transparent areas keep showing stage 1. Text
   layers (final-text z2, #intact z6, overlays) stay above it. */

#heroTearCanvas2 {
  z-index: 3;
}

/* The finished tear, handed over from its canvas to a still by
   js/hero2-tear.js once the sequence ends -- it sits exactly where the canvas
   sat, and carries the canvas's own z-index inline. Sized rather than left to
   its intrinsic size: an absolutely positioned <img> with auto width does not
   stretch to its inset box. */
.hero-frozen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The colour-stage headline is kept on screen through the second tear, so lift
   it above the stage-2 canvas (z-index:3) — otherwise the white flap would
   paint over it where they overlap. */
.final-text {
  z-index: 5;
}

/* Copy that sits on the revealed white left panel (see DIAGONAL_CURVE in
   DiagonalPeelRevealRenderer.js -- the retained sheet after stage 2 forms a
   full-height white panel on the left, roughly the left 40% of the viewport).
   Left-aligned and capped to that width so it never bleeds onto the colour
   photo still showing on the right. Stays non-interactive, matching the
   other hero text layers. */
/* This copy is printed on the sheet the second tear peels open, so it is
   uncovered BY that tear rather than faded in after it: js/hero2-tear.js masks
   this layer to whatever the peel has opened so far (render2). The layer spans
   the viewport, which is what makes the mask's percentages the same viewport
   percentages the flap's coverage was measured in.

   The rule below is the closed state, and it is CSS rather than JS so the copy
   cannot flash over the photograph in the frames before the script runs.
   js/hero2-tear.js opens it, and clears the mask outright once the tear is
   done or when there is no tear at all to uncover it (the WebGL fallback). */
.white-text {
  z-index: 4;
  pointer-events: none;
  justify-content: flex-start;
  align-items: center;
  padding-left: clamp(2rem, 6vw, 5rem);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 0%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 0%);
}

.white-text.revealed {
  -webkit-mask-image: none;
  mask-image: none;
}

.white-text .wt-content {
  max-width: min(34vw, 460px);
}

.white-text .wt-eyebrow {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 1.1em;
}

.white-text .wt-triad {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: normal;
  color: #111;
  margin-bottom: 1em;
}

.white-text .wt-lead {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: #111;
  margin-bottom: .8em;
}

.white-text .wt-body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(.85rem, 1.15vw, 1rem);
  line-height: 1.75;
  color: #333;
}