/* CRT power-cycle transition overlay.
   Leaving a page: two black bars close to the centre leaving a bright line
   (the picture "collapsing" like an old TV switching off), then navigate.
   Arriving: the bars retract from the centre and the line fades — power on.
   Rendered site-wide; on the front page the hero handles its own reveal so
   the overlay is not pre-covered there. */

.crtx {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
}

.crtx[hidden] {
  display: none;
}

.crtx__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 51vh;
  background: #000;
  will-change: transform;
}

.crtx__top {
  top: 0;
  transform: translateY(-101%);
}

.crtx__bottom {
  bottom: 0;
  transform: translateY(101%);
}

.crtx__line {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: #d7ffe6;
  box-shadow: 0 0 22px 4px rgba(11, 255, 73, 0.85), 0 0 60px rgba(11, 255, 73, 0.5);
  opacity: 0;
  transform: scaleX(0.15);
  will-change: transform, opacity;
}

/* Covered = closed instantly (arrival start state, no content flash). */
.crtx.is-covered .crtx__top,
.crtx.is-covered .crtx__bottom {
  transform: translateY(0);
}

.crtx.is-covered .crtx__line {
  opacity: 1;
  transform: scaleX(1);
}

/* Closing = collapse to the centre line (leaving a page). */
.crtx.is-closing {
  pointer-events: all;
}

.crtx.is-closing .crtx__top,
.crtx.is-closing .crtx__bottom {
  transform: translateY(0);
  transition: transform 0.34s cubic-bezier(0.6, 0, 0.85, 0.25);
}

.crtx.is-closing .crtx__line {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 0.28s ease-out 0.06s, opacity 0.12s linear 0.24s;
}

/* Opening = retract from the centre (arriving on a page). */
.crtx.is-opening .crtx__top {
  transform: translateY(-101%);
  transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.crtx.is-opening .crtx__bottom {
  transform: translateY(101%);
  transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.crtx.is-opening .crtx__line {
  opacity: 0;
  transform: scaleX(0.15);
  transition: opacity 0.3s ease, transform 0.34s ease;
}

@media (prefers-reduced-motion: reduce) {
  .crtx,
  .crtx__bar,
  .crtx__line {
    transition: none !important;
  }
}