/* el-catalizador — one fixed object from the first frame to the last.
   Base (no JS, reduced motion, failed init): .catalyst stays display:none and the
   hero .mark-wrap and closing .closing-mark render as two still white marks.
   Everything enhanced is gated by html.has-catalyst. */

/* ---------- The object ---------- */
.catalyst {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 460px;             /* the largest pose: every pose scales down and stays crisp */
  height: 460px;
  z-index: var(--z-catalyst);
  pointer-events: none;
  transform-origin: 0 0;
  contain: layout style;
}

html.has-catalyst .catalyst { display: block; }

/* The layer hint only while the object moves (set by the script): at rest Chromium
   redraws it at its real scale, so the 1.5px hairline stays crisp on white. */
.catalyst.is-moving { will-change: transform; }

.c-par,
.c-kick {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.catalyst svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.c-rot {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: rotate(-10deg);
}

.c-fill { fill: #FFFFFF; }

/* Ink hairline, only over white. Its width is kept at 1.5 screen px by the script
   (vector-effect does not reach into a <use> clone). */
.c-line {
  fill: none;
  stroke: #0C1821;
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: 0;
}

/* ---------- Static marks become pose anchors ---------- */
html.has-catalyst .mark-wrap,
html.has-catalyst .closing-mark { visibility: hidden; }

/* ---------- Probe: 100svh, read on refresh ---------- */
.svh-probe {
  position: fixed;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Closing mark (static fallback: the .mark-wrap rules) ---------- */
.closing-mark {
  position: absolute;
  z-index: auto;
  top: var(--mark-top);
  right: calc(clamp(-120px, -8vw, -40px) + (var(--mark-w0) - var(--mark-w)) / 4);
  width: var(--mark-w);
  pointer-events: none;
}

/* While live, the hidden anchor sits where the viewport's top will be at max scroll,
   so the last frame repeats the first: same box, same -10deg, whatever the closing
   height or the toolbar state. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.has-catalyst .closing-mark {
    top: calc(100% - 100vh + var(--mark-top));
    top: calc(100% - 100dvh + var(--mark-top));
  }
}

@media (max-width: 719px) {
  .mark-wrap,
  .closing-mark { width: var(--mark-w); right: calc(var(--mark-w) / -4); top: 76px; }
  .closing { padding-top: max(clamp(96px, 12vw, 180px), calc(76px + var(--mark-w) + 24px)); }
}

@media screen and (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  html.has-catalyst .closing-mark {
    top: calc(100% - 100vh + 76px);
    top: calc(100% - 100dvh + 76px);
  }
}

/* ---------- Releases ---------- */
@media (prefers-reduced-motion: reduce) {
  html.has-catalyst .catalyst { display: none; }
  html.has-catalyst .mark-wrap,
  html.has-catalyst .closing-mark { visibility: visible; }
}

@media print {
  html.has-catalyst .catalyst { display: none; }
  html.has-catalyst .mark-wrap,
  html.has-catalyst .closing-mark { visibility: visible; }
}