/* ============================================================
   LAB BASE  —  shared cyberpunk design tokens + effect utilities
   used by the /lab direction prototypes. throwaway-ish, but this
   is basically the seed of bin.moe's real design system~
   ============================================================ */

/* bin's own fonts */
@font-face { font-family: 'Heading';   src: url('/Fonts/Heading.woff');   font-display: swap; }
@font-face { font-family: 'Paragraph'; src: url('/Fonts/Paragraph.ttf'); font-display: swap; }
@font-face { font-family: 'Tiny';      src: url('/Fonts/Tiny.woff');      font-display: swap; }
@font-face { font-family: 'Pixel';     src: url('/Fonts/04b03.ttf');      font-display: swap; }

:root {
    /* palette — "neon noir" default (terminal cyberpunk) */
    --c-primary: #ff2e88;   --c-primary-rgb: 255, 46, 136;
    --c-secondary: #00e5ff; --c-secondary-rgb: 0, 229, 255;
    --c-accent: #ffd166;    --c-accent-rgb: 255, 209, 102;
    --c-text: #e6f1ff;      --c-text-rgb: 230, 241, 255;
    --c-bg: #07070f;        --c-bg-rgb: 7, 7, 15;

    /* font roles (locked with bin) */
    --f-hero: 'Heading', 'Orbitron', sans-serif;
    --f-head: 'Heading', 'Chakra Petch', sans-serif;
    --f-body: 'Paragraph', 'Segoe UI', sans-serif;
    --f-mono: 'Share Tech Mono', 'Courier New', monospace;

    --glow: 0.45;
    --scan-op: 0.3;
    --grid-speed: 16s;

    /* background image system (kept from the real site) */
    --bg-img: url('/img/systemspace/takatonghi_darkened_more.png');
    --bg-tint: 0.55;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; min-height: 100vh;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    overflow-x: hidden;
}

a { color: var(--c-secondary); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--f-head); }

/* ---------- background layer ---------- */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: var(--bg-img) center / cover no-repeat; }
.bg-layer::after { content: ""; position: absolute; inset: 0;
    background: rgba(var(--c-bg-rgb), var(--bg-tint)); }

/* ---------- effect utilities ---------- */
.neon { text-shadow: 0 0 calc(8px * var(--glow)) rgba(var(--c-primary-rgb), var(--glow)),
                     0 0 calc(22px * var(--glow)) rgba(var(--c-primary-rgb), calc(var(--glow) * 0.55)); }
.neon-cyan { text-shadow: 0 0 calc(8px * var(--glow)) rgba(var(--c-secondary-rgb), var(--glow)),
                          0 0 calc(22px * var(--glow)) rgba(var(--c-secondary-rgb), calc(var(--glow) * 0.55)); }
.neon-border { border: 1px solid rgba(var(--c-primary-rgb), 0.55);
    box-shadow: 0 0 calc(14px * var(--glow)) rgba(var(--c-primary-rgb), calc(var(--glow) * 0.45)),
                inset 0 0 calc(22px * var(--glow)) rgba(var(--c-primary-rgb), calc(var(--glow) * 0.10)); }

/* scanlines — drop .scanlines anywhere fixed/full */
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 9000;
    background: repeating-linear-gradient(to bottom,
        rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
        rgba(0,0,0,var(--scan-op)) 3px, rgba(0,0,0,var(--scan-op)) 4px); }

/* animated perspective grid floor */
.gridfloor { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.gridfloor::before { content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(var(--c-secondary-rgb), 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--c-secondary-rgb), 0.22) 1px, transparent 1px);
    background-size: 46px 46px;
    transform: perspective(420px) rotateX(60deg) scale(2.4);
    transform-origin: center bottom;
    mask-image: linear-gradient(to top, #000 0%, transparent 72%);
    animation: lab-grid var(--grid-speed) linear infinite; }
@keyframes lab-grid { from { background-position: 0 0; } to { background-position: 0 46px; } }

/* film grain */
.grain { position: fixed; inset: -50%; z-index: 8999; pointer-events: none; opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    animation: lab-grain 0.6s steps(3) infinite; }
@keyframes lab-grain { 0%{transform:translate(0,0)} 33%{transform:translate(-8px,4px)} 66%{transform:translate(6px,-6px)} 100%{transform:translate(0,0)} }

/* glitch text — give the element data-text="..." and class .glitch */
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.glitch::before { color: var(--c-secondary); animation: glitchA 2.4s infinite linear alternate-reverse; }
.glitch::after  { color: var(--c-accent);    animation: glitchB 1.7s infinite linear alternate-reverse; }
@keyframes glitchA { 0%{clip-path:inset(0 0 82% 0);transform:translate(-2px,-1px)} 50%{clip-path:inset(40% 0 30% 0);transform:translate(3px,1px)} 100%{clip-path:inset(70% 0 5% 0);transform:translate(-1px,2px)} }
@keyframes glitchB { 0%{clip-path:inset(15% 0 60% 0);transform:translate(2px,1px)} 50%{clip-path:inset(55% 0 10% 0);transform:translate(-3px,-1px)} 100%{clip-path:inset(5% 0 75% 0);transform:translate(1px,-2px)} }

/* CRT power-on flash (apply to a fading overlay) */
@keyframes crt-on { 0%{transform:scale(1,0.003);filter:brightness(6);opacity:1}
    35%{transform:scale(1,0.6);filter:brightness(3)} 60%{transform:scale(1,1);filter:brightness(1.4)} 100%{filter:brightness(1)} }

/* ---------- shared bits ---------- */
.btn-neon { font-family: var(--f-mono); font-size: 14px; cursor: pointer; letter-spacing: 2px;
    padding: 0.8rem 1.6rem; color: var(--c-primary); background: transparent;
    border: 1px solid var(--c-primary); transition: all 0.18s ease; }
.btn-neon:hover { background: var(--c-primary); color: var(--c-bg);
    box-shadow: 0 0 calc(18px * var(--glow)) rgba(var(--c-primary-rgb), var(--glow)); }

/* prototype switcher bar (top of each prototype) */
.lab-switch { position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
    display: flex; gap: 0.25rem; align-items: center;
    padding: 0.45rem 0.8rem; font-family: var(--f-mono); font-size: 11px;
    background: rgba(5,5,12,0.82); border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.4);
    backdrop-filter: blur(6px); }
.lab-switch .brand { color: var(--c-primary); letter-spacing: 2px; margin-right: 0.75rem; }
.lab-switch a { color: var(--c-text); padding: 0.25rem 0.6rem; border: 1px solid transparent; }
.lab-switch a:hover { border-color: rgba(var(--c-secondary-rgb), 0.5); color: var(--c-secondary); }
.lab-switch a.active { color: var(--c-primary); border-color: rgba(var(--c-primary-rgb), 0.6); }
.lab-switch .spacer { flex: 1; }