/* ============================================================
   PAGE TRANSITION — the shock

   Four blades slam across the screen in the DESTINATION page's
   accent colour, the mark punches through the middle, and the
   whole thing clears in under half a second on the other side.

   Two reasons it's built this way rather than as a soft fade:

   1. The colour is the information. Each division owns an accent,
      so slamming the target's colour before the page arrives means
      the transition itself announces where you're going — you know
      you've left Agency for Business Builder before a single word
      of Business Builder has rendered.

   2. Separate HTML pages, not a single-page app. There's a real
      navigation in the middle, so the cover has to survive it: the
      outgoing page stores a flag, the incoming page reads it before
      first paint and opens FROM the covered state. Done any other
      way you get a flash of unstyled content between the two.

   Fails safe in every direction. No GSAP, no sessionStorage, JS
   disabled entirely — the overlay is display:none by default and
   links behave like ordinary links.
   ============================================================ */

.tx {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  pointer-events: none;
}
.tx.is-live { display: block; pointer-events: auto; }

/* Four blades, each covering a quarter of the height. They arrive from
   alternating sides so the screen closes like a shutter rather than a
   single sheet dropping. */
.tx__blade {
  position: absolute;
  left: -2%;
  width: 104%;
  height: 25.4%;
  background: var(--tx-color, #7fd8ff);
  transform: scaleX(0);
  will-change: transform;
}
.tx__blade:nth-child(1) { top: 0; transform-origin: left center; }
.tx__blade:nth-child(2) { top: 25%; transform-origin: right center; }
.tx__blade:nth-child(3) { top: 50%; transform-origin: left center; }
.tx__blade:nth-child(4) { top: 75%; transform-origin: right center; }

/* The mark punches through at the moment of full cover. Knocked out of
   the colour rather than drawn on top of it, so it reads as a hole in
   the blade instead of a sticker. */
.tx__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(4rem, 12vw, 9rem);
  height: clamp(4rem, 12vw, 9rem);
  transform: translate(-50%, -50%) scale(0.2) rotate(-90deg);
  opacity: 0;
  fill: #05060a;
  will-change: transform, opacity;
}

/* Set before first paint by the inline head script, so an incoming page
   starts fully covered and opens outward. Without this the new page
   paints its content first and the reveal looks like a glitch. */
html.tx-in .tx { display: block; }
html.tx-in .tx__blade { transform: scaleX(1); }

/* A page arriving from a transition lifts its content in behind the
   blades — a small physical follow-through so the slam has weight. */
html.tx-in main { animation: txlift 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
@keyframes txlift {
  from { transform: translateY(14px); opacity: 0.35; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tx, html.tx-in .tx { display: none !important; }
  html.tx-in main { animation: none; }
}