@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.ttf") format("truetype"); }
@font-face { font-family: "VT323"; src: url("../fonts/VT323-Regular.ttf") format("truetype"); }
.rc-loading { position: fixed; inset: 0; z-index: 9999; background: #000; display: grid; place-items: center; overflow: hidden;
  opacity: 1; transition: opacity 350ms linear, clip-path 400ms cubic-bezier(.6, 0, .4, 1); pointer-events: none; }
.rc-loading.out, .rc-loading.in { opacity: 0; }

/* Now Loading: the disc's own card (default). */
.rc-loading .now { font: 400 clamp(28px, 6vw, 64px)/1 "Anton", Impact, sans-serif; color: #f0b040; text-shadow: 3px 3px 0 #7a4a10; letter-spacing: .02em; }

/* Neon: LOADING in tubes, a flare above and below. */
.rc-loading .neon { font: 400 clamp(40px, 11vw, 120px)/1 "Anton", Impact, sans-serif; letter-spacing: .12em; color: transparent;
  -webkit-text-stroke: 2px #9fd0ff; text-shadow: 0 0 10px #4a6cff, 0 0 30px #7a3cff, 0 0 60px #4a6cff; animation: rc-buzz 1.6s steps(1) infinite; }
.rc-loading .flare { position: absolute; left: 50%; width: 38vmin; height: 10vmin; translate: -50% 0;
  background: radial-gradient(ellipse at center, #fff 0 4%, #ff7ad8 8%, rgba(160,60,255,.55) 22%, transparent 60%); animation: rc-flare 1.1s ease-in-out infinite alternate; }
.rc-loading .flare.a { top: calc(50% - 16vmin); }
.rc-loading .flare.b { top: calc(50% + 6vmin); animation-delay: .55s; }
@keyframes rc-buzz { 0%, 38%, 44%, 100% { opacity: 1; } 40% { opacity: .55; } }
@keyframes rc-flare { from { scale: .7 1; opacity: .7; } to { scale: 1.15 1; opacity: 1; } }

/* Grid: a green wireframe floor running toward you. */
.rc-loading.look-grid { background: linear-gradient(#000 45%, #021a06); perspective: 320px; }
.rc-loading .floor { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; transform-origin: 50% 100%; transform: rotateX(72deg);
  background: linear-gradient(90deg, rgba(80,255,110,.8) 2px, transparent 2px) 0 0 / 60px 60px, linear-gradient(rgba(80,255,110,.8) 2px, transparent 2px) 0 0 / 60px 60px;
  animation: rc-run .6s linear infinite; -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); }
@keyframes rc-run { to { background-position: 0 60px, 0 60px; } }
.rc-loading .readout { position: relative; top: -12vh; font: clamp(36px, 8vw, 80px)/1 "VT323", "Courier New", monospace; color: #6bff8a; letter-spacing: .18em; text-shadow: 0 0 12px rgba(107,255,138,.7); }
.rc-loading .readout b { font-weight: normal; animation: rc-dots 1s steps(1) infinite; }
@keyframes rc-dots { 50% { opacity: 0; } }

/* Disc: a spinning disc; the card opens and closes as a circle wipe. */
.rc-loading.look-disc { opacity: 1; clip-path: circle(150% at 50% 50%); }
.rc-loading.look-disc.in, .rc-loading.look-disc.out { opacity: 1; clip-path: circle(0% at 50% 50%); }
.rc-loading .spin { width: min(46vmin, 320px); aspect-ratio: 1; border-radius: 50%; position: relative; animation: rc-spin .9s linear infinite;
  background: radial-gradient(circle, #000 0 9%, #8c8c96 9.5% 15%, transparent 15.5%), conic-gradient(from 0deg, #cfd3ff, #ffd3f4, #d3fff1, #fff6c8, #d8d8ff, #ffd0e8, #cfd3ff);
  box-shadow: 0 0 0 2px #555, 0 0 40px rgba(180,190,255,.35); }
.rc-loading .spin i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 10%, rgba(255,255,255,.75) 13%, transparent 17% 60%, rgba(255,255,255,.5) 63%, transparent 67%); mix-blend-mode: screen; }
@keyframes rc-spin { to { rotate: 360deg; } }
.rc-loading.look-disc { grid-template-rows: auto auto; align-content: center; gap: 28px; }
.rc-loading .under { font: 30px/1 "VT323", "Courier New", monospace; color: #cfd3ff; letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 0 10px rgba(180,190,255,.6); }

@media (prefers-reduced-motion: reduce) {
  .rc-loading .neon, .rc-loading .flare, .rc-loading .floor, .rc-loading .readout b, .rc-loading .spin { animation: none; }
}