/* ==================================================================
   EFFECT 4 — PAGE-TEAR TRANSITION
   The live page ITSELF tears in two: the DOM is cloned into two
   full-viewport pieces, each clipped along a jagged seam, so the pieces
   are pixel-identical to the real page. The stage is transparent —
   whatever sits in the real DOM (the same page, or the next page
   swapped in beneath) shows through as the pieces rip apart. The
   motion is driven by GSAP (see js/page-tear.js). Reduced-motion users
   skip straight to the end state.
   ================================================================== */

/* transparent full-viewport stage holding the two frozen torn pieces —
   the real page underneath is what the tear reveals */
.tear-stage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

/* Keep the live destination cursor beneath the outgoing paper pieces. */
html.is-tearing .custom-cursor {
  z-index: 9998;
}

/* one half of the torn page — transform + edge shadow live here so the
   drop-shadow hugs the jagged silhouette clipped on the child, and
   falls on the page underneath */
.tear-piece {
  position: absolute;
  inset: 0;
  will-change: transform;
  backface-visibility: hidden;
}

.tear-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
}

/* Flatten complex card stacking while Chrome composites the torn clones. */
.tear-stage .discipline-panel { isolation: auto; }
.tear-stage .discipline-panel > *:not(.discipline-shape) {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  transform: none;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0.01px currentColor;
  text-shadow: 0 0 0 currentColor;
}

/* jagged seam down the middle; the two edges overlap ~2% so the joined
   pieces are seamless (identical pixels) yet both edges read as torn */
.tear-piece-left .tear-clip {
  clip-path: polygon(
    0% 0%, 51% 0%,
    45% 7%, 52% 14%, 44% 22%, 51% 30%, 45% 38%, 52% 46%,
    44% 54%, 51% 62%, 45% 70%, 52% 78%, 44% 86%, 51% 93%,
    46% 100%, 0% 100%
  );
}
.tear-piece-right .tear-clip {
  clip-path: polygon(
    49% 0%, 100% 0%, 100% 100%, 44% 100%,
    49% 93%, 42% 86%, 50% 78%, 43% 70%, 49% 62%, 42% 54%,
    50% 46%, 43% 38%, 49% 30%, 42% 22%, 50% 14%, 43% 7%
  );
}

/* the page clone — position/offset set here, everything else (display,
   background, font…) is copied inline from the live body by the JS so
   the clone lays out exactly like the real page */
.tear-inner {
  position: absolute;
  top: 0;
  left: 0;
}