/* Parallel 8 mark. Uses the site's --ink and --accent tokens. */
:root { --p8-glass: #17181c; --p8-phos: #f3f0e8; }
@media (prefers-color-scheme: dark) { :root { --p8-glass: #1b1c21; } }

.p8-bar   { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.p8-bezel { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.p8-glass { fill: var(--p8-glass); }
.p8-ink   { stroke: var(--p8-phos); stroke-width: 1.1; stroke-linecap: round; opacity: .85; }
.p8-live  { fill: var(--accent); }
.p8-chalk { stroke: var(--p8-phos); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;
            filter: drop-shadow(0 0 .6px var(--p8-phos)); }
.p8-beam  { fill: var(--p8-phos); opacity: 0; }
.p8-screen, .p8-beam { transform-box: fill-box; transform-origin: center; }

/* ---------- hero: CRT power-on (about 2s), then ambient loops ---------- */
.p8-mark .p8-bar, .p8-mark .p8-bezel { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: p8-draw .8s cubic-bezier(.16,1,.3,1) var(--d) forwards; }
.p8-mark .p8-tube .p8-bezel { animation-delay: var(--d); }
.p8-mark .p8-glass  { opacity: 0; animation: p8-fade .3s ease calc(var(--on) - .25s) forwards; }
.p8-mark .p8-beam   { animation: p8-beam .4s ease-out calc(var(--on) - .15s) forwards; }
.p8-mark .p8-screen { opacity: 0; animation: p8-on .7s cubic-bezier(.2,.9,.2,1) var(--on) forwards; }
.p8-mark .p8-live   { animation: p8-blink 1.6s steps(1) 2s infinite; }
.p8-mark .p8-roll   { animation: p8-roll 6.5s linear 2.4s infinite; }
.p8-mark .p8-chalk  { stroke-dasharray: 1; stroke-dashoffset: 1; animation: p8-chalk 6s ease-in-out 1.9s infinite; }

@keyframes p8-draw  { 99% { stroke-dashoffset: 0; stroke-dasharray: 1; } 100% { stroke-dashoffset: 0; stroke-dasharray: none; } }
@keyframes p8-fade  { to { opacity: 1; } }
@keyframes p8-beam  { 0% { opacity: 1; transform: scaleX(0); } 55% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1) scaleY(6); } }
@keyframes p8-on    { 0% { opacity: 0; transform: scale(1,.03); filter: brightness(3); }
                      35% { opacity: 1; transform: scale(1,1.06); filter: brightness(1.8); }
                      55% { transform: scale(1,1); filter: brightness(1); }
                      62% { opacity: .55; } 68% { opacity: 1; } 74% { opacity: .8; } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes p8-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes p8-roll  { 0% { transform: translateY(0); } 40%, 100% { transform: translateY(24px); } }
@keyframes p8-chalk { 0% { stroke-dashoffset: 1; opacity: 1; } 30% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; opacity: 1; }
                      90% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }

/* ---------- header lockup: static, flickers on hover ---------- */
.p8-lockup { height: 34px; width: auto; color: var(--ink); }
.p8-lockup .p8-word { font: 700 22px "Geist", Arial, sans-serif; letter-spacing: .02em; fill: currentColor; }
.p8-lockup .p8-sub  { font: 500 9px "Geist Mono", monospace; letter-spacing: .5em; fill: currentColor; opacity: .55; }
.logo:hover .p8-tubes, .logo:focus-visible .p8-tubes { animation: p8-flicker .45s steps(1); }
@keyframes p8-flicker { 0% { opacity: 1; } 15% { opacity: .35; } 30% { opacity: 1; } 45% { opacity: .6; } 60%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .p8-mark * { animation: none !important; opacity: 1; stroke-dashoffset: 0 !important; transform: none !important; filter: none; }
  .p8-mark .p8-beam { opacity: 0; }
  .logo:hover .p8-tubes { animation: none; }
}