/*
 * YE JUN Portfolio v13 — gallery tear portal overlay (spike 06).
 * Created only by v13-tear-portal.js for the length of one activation; never present without JS
 * or under reduced motion. Palette: green-black paper #030705 / #07100c / #10251a, pale ink
 * #e8f0e9, muted #a5b9aa and a cool green cut edge #52b980.
 *
 * The hole (reveal, clipped by the script) shows a static, id-less copy of the target laid out where the
 * native fragment jump will put it, so the arrival is the same picture. The cut itself (contact shadow,
 * fibres, 1.25 px green signal edge, flaps) is drawn on the edge canvas. After the commit the whole overlay
 * fades once (inline opacity); no child fades on its own.
 */

.v13-tear-portal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  contain: strict;
  max-width: 100%;
  pointer-events: auto;
  background: transparent;
  color: #e8f0e9;
  /* Mirrors ACCENT in v13-tear-portal.js (the canvas draws the 1.25 px edge in this colour). */
  --v13-tear-accent: #52b980;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.v13-tear-portal__reveal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #07100c;
}

/* Desktop-only stable handoff: an unclipped duplicate of the arrival composition fades in before the
   growing cut reaches the viewport boundary, preventing a rectangular edge band and a one-frame pop. */
.v13-tear-portal__veil {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #07100c;
  will-change: opacity;
}

.v13-tear-portal__field,
.v13-tear-portal__edge {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.v13-tear-portal__edge {
  pointer-events: none;
}

/* The page's canvas background, positioned for the arrival scroll (geometry + background set inline). */
.v13-tear-portal__layer {
  position: absolute;
  pointer-events: none;
}

/* Layout-aligned copy of the target: top/left/width are set inline from the arrival rect. */
.v13-tear-portal__ghost {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
}

.v13-tear-portal__ghost *,
.v13-tear-portal__ghost *::before,
.v13-tear-portal__ghost *::after {
  animation: none !important;
  transition: none !important;
}

/* Flattened preview: cloned panels keep their text and images but drop rectangular fills, borders and
   shadows (the script clears them inline; pseudo-element decor is cleared here), so the hole shows one
   continuous composition over the stage background instead of fake panel seams. */
.v13-tear-portal__ghost--flat *::before,
.v13-tear-portal__ghost--flat *::after {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* On desktop the early, clipped preview is typography over one dark field. Large media tiles inside a
   small opening read as detached white petals on the production homepage; the later full-frame veil still
   carries the media and hands off to the native #work section without changing the touch treatment. */
@media (min-width: 900px) {
  .v13-tear-portal__reveal .v13-tear-portal__ghost--flat :is(img, picture, svg, video) {
    opacity: 0 !important;
  }
}

/* The script never builds the overlay under reduced motion; this guards a preference flipped mid-run. */
@media (prefers-reduced-motion: reduce) {
  .v13-tear-portal {
    display: none;
  }
}