/* ============================================================
   warp.css — pure-CSS Star Trek "drop out of warp" background
   GENERATED by scripts/gen.mjs — edit the generator, not this file.
   No images, no canvas, no runtime JavaScript.

   Two independent scenes — use either or both, over a dark background:
     .warp-burst   one-shot arrival from warp (needs the <i> line elements)
     .warp-drift   calm drifting starfield (needs the .f/.m/.n layers)
   ============================================================ */

/* ---- BURST: crisp 1px lines that grow outward from the center ----
   Each line is anchored at the vanishing point and stretched outward with
   scaleX, so its thickness stays exactly 1px (never widens or blurs) while it
   elongates into a warp streak. The inner end is transparent so the very
   center stays dark, like examples/warped_stars.jpg. */
.warp-burst {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.warp-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--len);
  height: 1px;
  /* Bright at the OUTER (right) end, fading to nothing toward center (left). */
  background: linear-gradient(
    to left,
    hsl(0 0% var(--b)) 0%,
    hsl(0 0% var(--b) / 0.45) 40%,
    transparent 92%
  );
  transform-origin: 0 50%;          /* pivot + grow from the center point */
  transform: rotate(var(--a)) scaleX(0.05);
  opacity: 0;
  animation: streak-fly 1.2s cubic-bezier(0.22, 0.75, 0.35, 1) var(--d) 1 forwards;
}

@keyframes streak-fly {
  0%   { transform: rotate(var(--a)) scaleX(0.05); opacity: 0; }
  12%  { opacity: 1; }
  68%  { transform: rotate(var(--a)) scaleX(1);    opacity: 1; }
  100% { transform: rotate(var(--a)) scaleX(1.12); opacity: 0; }
}

/* ---- DRIFT: pin-sharp tiled starfield, smooth seamless drift ---- */
.warp-drift {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.warp-drift > div {
  position: absolute;
  background-repeat: repeat;
  opacity: 0;
  will-change: transform; /* keep each layer GPU-composited for smooth motion */
}

  .warp-drift .f {
    left: -260px;
    top: -260px;
    width: calc(100% + 260px);
    height: calc(100% + 260px);
    background-image:
      radial-gradient(circle at 35.3px 198.8px, hsl(0 0% 80%) 0, hsl(0 0% 80%) 0.87px, transparent 1.57px),
      radial-gradient(circle at 180.3px 152.8px, hsl(0 0% 58%) 0, hsl(0 0% 58%) 1.08px, transparent 1.78px),
      radial-gradient(circle at 100.3px 206.5px, hsl(0 0% 93%) 0, hsl(0 0% 93%) 0.80px, transparent 1.50px),
      radial-gradient(circle at 28.6px 15.9px, hsl(0 0% 47%) 0, hsl(0 0% 47%) 0.81px, transparent 1.51px),
      radial-gradient(circle at 197.7px 70.5px, hsl(0 0% 81%) 0, hsl(0 0% 81%) 0.63px, transparent 1.33px),
      radial-gradient(circle at 153.5px 13.7px, hsl(0 0% 92%) 0, hsl(0 0% 92%) 0.82px, transparent 1.52px),
      radial-gradient(circle at 194.0px 239.3px, hsl(0 0% 49%) 0, hsl(0 0% 49%) 0.91px, transparent 1.61px),
      radial-gradient(circle at 37.9px 134.1px, hsl(0 0% 80%) 0, hsl(0 0% 80%) 0.60px, transparent 1.30px),
      radial-gradient(circle at 45.1px 10.6px, hsl(0 0% 69%) 0, hsl(0 0% 69%) 1.08px, transparent 1.78px),
      radial-gradient(circle at 200.2px 87.5px, hsl(0 0% 57%) 0, hsl(0 0% 57%) 0.98px, transparent 1.68px),
      radial-gradient(circle at 241.7px 37.5px, hsl(45 60% 78%) 0, hsl(45 60% 78%) 0.74px, transparent 1.44px),
      radial-gradient(circle at 113.4px 95.5px, hsl(215 70% 52%) 0, hsl(215 70% 52%) 0.98px, transparent 1.68px),
      radial-gradient(circle at 163.1px 149.3px, hsl(0 0% 93%) 0, hsl(0 0% 93%) 0.83px, transparent 1.53px),
      radial-gradient(circle at 57.1px 41.6px, hsl(0 0% 81%) 0, hsl(0 0% 81%) 0.77px, transparent 1.47px),
      radial-gradient(circle at 24.0px 28.5px, hsl(0 0% 52%) 0, hsl(0 0% 52%) 0.99px, transparent 1.69px),
      radial-gradient(circle at 171.1px 154.2px, hsl(0 0% 79%) 0, hsl(0 0% 79%) 0.72px, transparent 1.42px),
      radial-gradient(circle at 181.4px 216.6px, hsl(215 70% 94%) 0, hsl(215 70% 94%) 0.70px, transparent 1.40px),
      radial-gradient(circle at 163.8px 161.1px, hsl(0 0% 56%) 0, hsl(0 0% 56%) 0.88px, transparent 1.58px),
      radial-gradient(circle at 130.5px 43.8px, hsl(215 70% 98%) 0, hsl(215 70% 98%) 0.87px, transparent 1.57px),
      radial-gradient(circle at 142.7px 41.2px, hsl(45 60% 82%) 0, hsl(45 60% 82%) 0.69px, transparent 1.39px),
      radial-gradient(circle at 19.7px 99.9px, hsl(0 0% 72%) 0, hsl(0 0% 72%) 0.92px, transparent 1.62px),
      radial-gradient(circle at 223.2px 26.3px, hsl(215 70% 78%) 0, hsl(215 70% 78%) 1.05px, transparent 1.75px),
      radial-gradient(circle at 113.0px 101.7px, hsl(0 0% 61%) 0, hsl(0 0% 61%) 0.87px, transparent 1.57px),
      radial-gradient(circle at 21.7px 112.3px, hsl(0 0% 71%) 0, hsl(0 0% 71%) 0.96px, transparent 1.66px),
      radial-gradient(circle at 141.2px 129.6px, hsl(0 0% 60%) 0, hsl(0 0% 60%) 0.76px, transparent 1.46px),
      radial-gradient(circle at 13.4px 55.6px, hsl(215 70% 94%) 0, hsl(215 70% 94%) 1.02px, transparent 1.72px);
    background-size: 260px 260px;
    animation: pan-f 200s linear infinite, drift-fade-in 1.1s ease 0.85s both;
  }

  .warp-drift .m {
    left: 0px;
    top: -340px;
    width: calc(100% + 340px);
    height: calc(100% + 340px);
    background-image:
      radial-gradient(circle at 43.8px 327.5px, hsl(0 0% 80%) 0, hsl(0 0% 80%) 0.82px, transparent 1.52px),
      radial-gradient(circle at 100.6px 165.7px, hsl(0 0% 71%) 0, hsl(0 0% 71%) 0.96px, transparent 1.66px),
      radial-gradient(circle at 67.7px 227.3px, hsl(0 0% 88%) 0, hsl(0 0% 88%) 1.22px, transparent 1.92px),
      radial-gradient(circle at 171.5px 39.9px, hsl(0 0% 74%) 0, hsl(0 0% 74%) 1.54px, transparent 2.24px),
      radial-gradient(circle at 262.0px 34.0px, hsl(0 0% 78%) 0, hsl(0 0% 78%) 1.08px, transparent 1.78px),
      radial-gradient(circle at 33.9px 300.8px, hsl(215 70% 86%) 0, hsl(215 70% 86%) 1.42px, transparent 2.12px),
      radial-gradient(circle at 54.2px 190.1px, hsl(0 0% 99%) 0, hsl(0 0% 99%) 0.89px, transparent 1.59px),
      radial-gradient(circle at 103.2px 124.6px, hsl(0 0% 92%) 0, hsl(0 0% 92%) 1.56px, transparent 2.26px),
      radial-gradient(circle at 268.3px 170.7px, hsl(0 0% 63%) 0, hsl(0 0% 63%) 0.84px, transparent 1.54px),
      radial-gradient(circle at 184.8px 319.5px, hsl(215 70% 66%) 0, hsl(215 70% 66%) 1.49px, transparent 2.19px),
      radial-gradient(circle at 12.2px 320.6px, hsl(0 0% 75%) 0, hsl(0 0% 75%) 1.20px, transparent 1.90px),
      radial-gradient(circle at 312.4px 333.8px, hsl(0 0% 84%) 0, hsl(0 0% 84%) 1.38px, transparent 2.08px),
      radial-gradient(circle at 135.0px 276.0px, hsl(0 0% 94%) 0, hsl(0 0% 94%) 1.04px, transparent 1.74px),
      radial-gradient(circle at 298.1px 212.4px, hsl(0 0% 91%) 0, hsl(0 0% 91%) 1.41px, transparent 2.11px),
      radial-gradient(circle at 295.9px 251.7px, hsl(0 0% 64%) 0, hsl(0 0% 64%) 1.27px, transparent 1.97px),
      radial-gradient(circle at 207.5px 307.5px, hsl(0 0% 100%) 0, hsl(0 0% 100%) 1.08px, transparent 1.78px),
      radial-gradient(circle at 248.4px 327.9px, hsl(0 0% 71%) 0, hsl(0 0% 71%) 1.35px, transparent 2.05px),
      radial-gradient(circle at 15.7px 79.5px, hsl(0 0% 66%) 0, hsl(0 0% 66%) 0.82px, transparent 1.52px);
    background-size: 340px 340px;
    animation: pan-m 150s linear infinite, drift-fade-in 1.1s ease 0.85s both;
  }

  .warp-drift .n {
    left: -520px;
    top: 0px;
    width: calc(100% + 520px);
    height: calc(100% + 520px);
    background-image:
      radial-gradient(circle at 484.5px 417.9px, hsl(0 0% 89%) 0, hsl(0 0% 89%) 1.22px, transparent 1.92px),
      radial-gradient(circle at 341.0px 165.9px, hsl(0 0% 82%) 0, hsl(0 0% 82%) 1.25px, transparent 1.95px),
      radial-gradient(circle at 302.6px 257.3px, hsl(0 0% 89%) 0, hsl(0 0% 89%) 1.80px, transparent 2.50px),
      radial-gradient(circle at 485.3px 8.4px, hsl(0 0% 91%) 0, hsl(0 0% 91%) 1.58px, transparent 2.28px),
      radial-gradient(circle at 204.2px 378.6px, hsl(0 0% 99%) 0, hsl(0 0% 99%) 1.40px, transparent 2.10px),
      radial-gradient(circle at 155.6px 389.5px, hsl(0 0% 79%) 0, hsl(0 0% 79%) 1.49px, transparent 2.19px),
      radial-gradient(circle at 276.5px 370.4px, hsl(0 0% 100%) 0, hsl(0 0% 100%) 1.91px, transparent 2.61px),
      radial-gradient(circle at 209.8px 126.7px, hsl(215 70% 99%) 0, hsl(215 70% 99%) 1.48px, transparent 2.18px),
      radial-gradient(circle at 73.6px 31.1px, hsl(215 70% 97%) 0, hsl(215 70% 97%) 0.91px, transparent 1.61px),
      radial-gradient(circle at 240.3px 484.4px, hsl(0 0% 99%) 0, hsl(0 0% 99%) 2.06px, transparent 2.76px);
    background-size: 520px 520px;
    animation: pan-n 110s linear infinite, drift-fade-in 1.1s ease 0.85s both;
  }

@keyframes drift-fade-in { to { opacity: 1; } }

@keyframes pan-f {
  from { transform: translate(0, 0); }
  to   { transform: translate(260px, 260px); }
}

@keyframes pan-m {
  from { transform: translate(0, 0); }
  to   { transform: translate(-340px, 340px); }
}

@keyframes pan-n {
  from { transform: translate(0, 0); }
  to   { transform: translate(520px, -520px); }
}

/* ---- Optional CONTAINED mode ----
   By default the scenes are full-screen (position: fixed). To render the effect
   inside a box instead, wrap the scenes in an element with class .warp-frame
   and give it a size:
     <div class="warp-frame" style="height: 360px">
       <div class="warp-burst">…</div>
       <div class="warp-drift">…</div>
     </div> */
.warp-frame {
  position: relative;
  overflow: hidden;
  background: #000;
}
.warp-frame .warp-burst,
.warp-frame .warp-drift {
  position: absolute;
  z-index: auto;
}

/* ---- Reduced motion: static sharp starfield, no warp arrival ---- */
@media (prefers-reduced-motion: reduce) {
  .warp-burst { display: none; }
  .warp-drift > div { animation: none; opacity: 1; }
}