@property --ov-reveal {
  syntax: "<percentage>";
  initial-value: 100%;
  inherits: true;
}
@property --ov-trace-angle {
  syntax: "<angle>";
  initial-value: 360deg;
  inherits: false;
}
@layer overscan {
.ov-arrive { mask-position: 0 0; -webkit-mask-position: 0 0; }
[data-ov-arm] :is(
  [data-ov-reveal],
  .cw,
  .th,
  .ov-code,
  .band > *,
  .grid > *,
  .cells > *,
  section > *,
  .body > *,
  .toc > *,
  .site-rail > *,
  .site-rail__nav > *,
  .hero__stage,
  .hero__copy > *
) {
  opacity: 0;
  transform: scale(var(--ov-reveal-scale, 0.965));
}
.ov-reveal--pending {
  opacity: 0;
  transform: scale(var(--ov-reveal-scale, 0.965));
}
@keyframes ov-boot {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 0; }
}
.ov-boot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--ov-accent) 48%,
    var(--ov-accent) 52%,
    transparent 100%
  );
  opacity: 0;
  animation: ov-boot var(--ov-boot) var(--ov-ease) 1;
}
@keyframes ov-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.ov-cursor {
  display: inline-block;
  inline-size: 0.6em;
  block-size: 1em;
  vertical-align: text-bottom;
  background: var(--ov-accent);
  animation: ov-blink 1.06s steps(1) infinite;
}
@keyframes ov-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ov-dot--live { animation: ov-pulse 1.8s var(--ov-ease) infinite; }
[data-ov-offscreen],
[data-ov-offscreen] *,
[data-ov-offscreen] *::before,
[data-ov-offscreen] *::after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .ov-cursor,
  .ov-dot--live { animation: none; }
  .ov-cursor { opacity: 1; }
  .ov-reveal--pending,
  [data-ov-arm] :is([data-ov-reveal], .cw, .th, .ov-code, .band > *, .grid > *, .cells > *, section > *, .body > *, .toc > *, .site-rail > *, .site-rail__nav > *, .hero__stage, .hero__copy > *) { opacity: 1; transform: none; will-change: auto; }
  .ov-arrive {
    animation: none;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .ov-boot::before { animation: none; opacity: 0; }
}
@keyframes ov-type { from { --ov-reveal: 0%; } to { --ov-reveal: 100%; } }
@keyframes ov-wipe { from { --ov-reveal: 0%; } to { --ov-reveal: 100%; } }
@keyframes ov-cut  { from { --ov-reveal: 0%; } to { --ov-reveal: 100%; } }
@keyframes ov-flicker-in {
  0%       { --ov-reveal: 0%; }
  18%      { --ov-reveal: 100%; }
  24%      { --ov-reveal: 0%; }
  33%      { --ov-reveal: 100%; }
  41%      { --ov-reveal: 0%; }
  52%, 100% { --ov-reveal: 100%; }
}
@keyframes ov-burn { from { color: var(--ov-accent); } to { color: inherit; } }
@keyframes ov-rollup {
  from { clip-path: inset(100% 0 0 0); transform: translateY(0.35em); }
  to   { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes ov-slice {
  0%, 14%, 30%, 46%, 62%, 100% { clip-path: inset(0 0 0 0); transform: none; }
  16% { clip-path: inset(0 0 58% 0); transform: translateX(-4px); }
  19% { clip-path: inset(44% 0 0 0); transform: translateX(5px); }
  32% { clip-path: inset(0 0 24% 0); transform: translateX(3px); }
  64% { clip-path: inset(66% 0 0 0); transform: translateX(-6px); }
  66% { clip-path: inset(0 0 70% 0); transform: translateX(2px); }
}
.ov-slice { animation: ov-slice 1.6s steps(1) infinite; }
.ov-out {
  position: relative;
  display: inline-block;
  animation-name: var(--ov-text-anim, ov-type), var(--ov-text-idle, none);
  animation-duration: var(--ov-text-dur, 1200ms), var(--ov-text-idle-dur, 1.6s);
  animation-timing-function: var(--ov-text-ease, steps(var(--ov-text-steps, 32))), steps(1);
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-delay: calc(var(--ov-cascade) * var(--ov-stage, 0)), 0s;
}
.ov-out > span {
  display: inline-block;
  clip-path: inset(0 calc(100% - var(--ov-reveal)) 0 0);
}
.ov-out::after {
  content: "";
  position: absolute;
  inset-block-end: var(--ov-text-mark-drop, 0);
  inset-inline-start: var(--ov-reveal);
  inline-size: var(--ov-text-mark-w, 0);
  block-size: var(--ov-text-mark-h, 1em);
  background: var(--ov-text-mark-bg, currentColor);
  transform: skewX(calc(var(--ov-shear) * -1));
  pointer-events: none;
  animation: var(--ov-text-mark-anim, none)
             var(--ov-text-mark-rate, 1.06s) steps(1) infinite;
}
@keyframes ov-trace { from { --ov-trace-angle: 0deg; } to { --ov-trace-angle: 360deg; } }
.ov-trace { position: relative; }
.ov-trace::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--ov-bezel) solid var(--ov-accent);
  mask-image: conic-gradient(#000 var(--ov-trace-angle), transparent 0);
  animation: ov-trace var(--ov-dur-slow) linear both;
  animation-delay: calc(var(--ov-cascade) * var(--ov-stage, 0));
}
@keyframes ov-runner { from { --ov-trace-angle: 0deg; } to { --ov-trace-angle: 360deg; } }
.ov-runner { position: relative; }
.ov-runner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--ov-bezel) solid var(--ov-accent);
  mask-image: conic-gradient(
    transparent var(--ov-trace-angle),
    #000 var(--ov-trace-angle),
    #000 calc(var(--ov-trace-angle) + 26deg),
    transparent calc(var(--ov-trace-angle) + 26deg)
  );
  animation: ov-runner 2.4s linear infinite;
}
@keyframes ov-sweep {
  from { clip-path: inset(0 100% 0 0); }
  60%  { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}
.ov-sweep { position: relative; }
.ov-sweep::after {
  content: attr(data-ov-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  background: var(--ov-accent);
  color: var(--ov-field);
  animation: ov-sweep var(--ov-dur-slow) var(--ov-ease) both;
  animation-delay: calc(var(--ov-cascade) * var(--ov-stage, 0));
}
@keyframes ov-scan {
  from { inset-block-start: -10%; }
  to   { inset-block-start: 90%; }
}
.ov-scan { position: relative; }
.ov-scan::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10%;
  block-size: 10%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ov-accent), transparent);
  opacity: 0.16;
  animation: ov-scan 5.5s linear infinite;
}
@keyframes ov-hatch { to { background-position: 44px 44px; } }
.ov-hatch { position: relative; }
.ov-hatch::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    var(--ov-line) 0 1px,
    transparent 1px 11px
  );
  opacity: 0.5;
  animation: ov-hatch 9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ov-slice,
  .ov-out::after,
  .ov-runner::after,
  .ov-scan::after,
  .ov-hatch::before { animation: none; }
  .ov-type { animation: none; clip-path: none; }
  .ov-out { animation: none; color: inherit; }
  .ov-out > span { clip-path: none; }
  .ov-out::after { display: none; }
  .ov-trace::after { animation: none; mask-image: none; }
  .ov-sweep::after { animation: none; display: none; }
}
}