/* Lokales Inter (DSGVO-sauber, kein Google CDN) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }

:root {
    --bg: #F7FAEF;
    --text: #1F3A2C;
    --muted: #5A6B5F;
    --accent: #6BB033;
    --accent-strong: #5C9A2A;
    --highlight: #F5E664;
    --surface: #FFFFFF;
    --border: #E2E8D0;
    --code-bg: #ECF0DF;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(31,58,44,0.04), 0 1px 0 rgba(31,58,44,0.02);
    --shadow-md: 0 6px 24px -10px rgba(31,58,44,0.18), 0 2px 4px rgba(31,58,44,0.04);

    --maxw: 1080px;
    --maxw-prose: 700px;

    /* Fluide Spacing-Token: skalieren ruhig zwischen 360px und 1280px viewport */
    --pad-x: clamp(18px, 3.5vw, 36px);
    --pad-section: clamp(40px, 6vw, 64px);
    --pad-hero-top: clamp(56px, 9vw, 104px);
    --pad-hero-bottom: clamp(32px, 5vw, 56px);
    --gap-grid: clamp(12px, 1.6vw, 20px);
    --pad-card: clamp(16px, 2vw, 24px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(15px, 0.5vw + 14px, 18px);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body { overflow-x: hidden; }

/* Tastatur-Fokus deutlich, aber nicht laut */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--accent); }

/* ============== NAV ============== */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 250, 239, 0.85);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border);
}
.nav-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 12px var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 24px);
    flex-wrap: wrap;
    row-gap: 6px;
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.logo-mark {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--text);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0;
    box-shadow: var(--shadow-sm);
}
.nav-links {
    display: flex;
    gap: clamp(14px, 1.8vw, 22px);
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
}
.nav-links a {
    color: var(--text);
    font-weight: 500;
    font-size: clamp(14px, 0.85vw + 11px, 15px);
    position: relative;
    padding: 6px 0;
    -webkit-tap-highlight-color: transparent;
}
.nav-links a:hover { color: var(--accent-strong); }
.nav-links a:hover::after,
.nav-links a.current::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.nav-links .lang-divider { color: var(--border); font-weight: 300; }

/* ============== HERO (Index) ============== */
main { position: relative; z-index: 1; }

.hero {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--pad-hero-top) var(--pad-x) var(--pad-hero-bottom);
}
.hero h1 {
    font-size: clamp(34px, 5.4vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0 0 clamp(14px, 1.8vw, 24px);
    text-wrap: balance;
}
.hero h1 .accent {
    color: var(--accent-strong);
    background: linear-gradient(180deg, transparent 60%, rgba(245, 230, 100, 0.55) 60%);
    padding: 0 0.05em;
}
.lead {
    font-size: clamp(16px, 0.5vw + 14px, 19px);
    line-height: 1.55;
    color: var(--text);
    max-width: 62ch;
    margin: 0;
    text-wrap: pretty;
}

/* ============== SECTIONS ============== */
.section {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--pad-section) var(--pad-x);
}
.section-head { margin-bottom: clamp(18px, 2.4vw, 28px); }
.section h2 {
    font-size: clamp(22px, 2vw + 8px, 30px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    font-weight: 700;
}
.muted { color: var(--muted); margin: 0; }

/* ============== LAB GRID ============== */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--gap-grid);
}
.card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad-card);
    color: var(--text);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

/* Expandable card via <details>/<summary> */
details.card {
    cursor: pointer;
}
details.card > summary {
    list-style: none;
    display: block;
    outline: none;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after {
    content: "›";
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
    transition: transform 220ms ease, color 180ms ease;
}
details.card:hover > summary::after { color: var(--accent-strong); }
details.card[open] > summary::after { transform: rotate(90deg); }
details.card[open] {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}
details.card > summary > h3 { padding-right: 24px; }

.card-detail {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    cursor: default;
}
.card-detail p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    margin: 0 0 10px;
    text-wrap: pretty;
}
.card-detail p:last-child { margin-bottom: 0; }
.card-detail strong { font-weight: 600; }
.card-detail a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-color: rgba(108, 176, 51, 0.35);
}
.card-detail a:hover { text-decoration-color: var(--accent); }
.card-detail ul {
    margin: 4px 0 10px;
    padding-left: 1.1rem;
    font-size: 14px;
    color: var(--text);
}
.card-detail ul li { margin: 2px 0; }
.card-detail code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: var(--code-bg);
    padding: 0.05em 0.35em;
    border-radius: 3px;
    border: 1px solid var(--border);
}
.card-icon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 14px;
}
.card h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.card p {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0 0 14px;
    text-wrap: pretty;
}
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0; margin: 0;
}
.tags li {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

/* ============== WRITEUPS LIST ============== */
.writeups-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.writeups-list li {
    border-bottom: 1px solid var(--border);
}
.writeups-list li:last-child { border-bottom: 0; }
.writeups-list a.row {
    display: block;
    padding: 18px 0;
    color: var(--text);
}
.writeups-list a.row:hover { color: var(--accent-strong); }
.writeups-list .title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}
.writeups-list .meta {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    text-wrap: pretty;
}

/* ============== KONTAKT ============== */
.section-contact { padding-bottom: clamp(56px, 8vw, 96px); }
.contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.kontakt-mail {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text);
}
.kontakt-mail:hover { border-color: var(--accent); }

/* ============== ARTICLE (Writeups) ============== */
article {
    max-width: var(--maxw-prose);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 64px) var(--pad-x) clamp(56px, 8vw, 96px);
}
article h1 {
    font-size: clamp(26px, 1.6vw + 18px, 38px);
    line-height: 1.15;
    letter-spacing: -0.022em;
    font-weight: 700;
    margin: 0 0 8px;
    text-wrap: balance;
}
article .sub {
    color: var(--muted);
    font-size: clamp(14px, 0.3vw + 12px, 15px);
    margin: 0 0 clamp(24px, 3vw, 36px);
}
article p {
    margin: 0.85rem 0;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
article h2 {
    font-size: clamp(16px, 0.5vw + 14px, 19px);
    font-weight: 700;
    letter-spacing: -0.005em;
    margin: clamp(2rem, 3.5vw, 2.6rem) 0 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
article a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-color: rgba(108, 176, 51, 0.4);
    text-underline-offset: 3px;
}
article a:hover { text-decoration-color: var(--accent); }

article ol, article ul {
    padding-left: 1.4rem;
    margin: 0.7rem 0;
}
article ol li, article ul li {
    margin: 0.3rem 0;
}

article code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: var(--code-bg);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    border: 1px solid var(--border);
}

article pre {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: clamp(11.5px, 0.3vw + 10.5px, 13.5px);
    line-height: 1.55;
    background: var(--code-bg);
    border: 1px solid var(--border);
    padding: clamp(10px, 1.4vw, 16px);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: 1.3rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
article pre code {
    background: transparent;
    padding: 0;
    border: 0;
    font-size: inherit;
}

article blockquote {
    border-left: 3px solid var(--accent);
    margin: 1.2rem 0;
    padding: 0.1rem 0 0.1rem 1rem;
    color: var(--muted);
    font-style: italic;
}

article hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 3rem 0;
}

article strong { font-weight: 600; color: var(--text); }
article em { font-style: italic; }

article .closing-note {
    color: var(--muted);
    font-size: 14.5px;
    margin-top: 2rem;
}

article .back-link {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

/* Mobile-spezifische Anpassungen — alles andere skaliert über clamp() */
@media (max-width: 480px) {
    /* Logo+Nav stapeln, wenn beides nicht in eine Zeile passt — flex-wrap macht das, hier nur etwas Tightening */
    .nav-inner { padding-block: 10px; }
    .logo-mark { width: 32px; height: 32px; font-size: 15px; }
    .logo { font-size: 17px; gap: 8px; }
    .nav-links { font-size: 14px; gap: 12px; }

    /* Vergrößerte Tap-Targets */
    .nav-links a { padding: 8px 0; }
    .writeups-list a.row { padding: 16px 0; }
    .kontakt-mail { padding: 12px 14px; }

    /* Card-Pfeil weiter weg vom Text */
    details.card > summary > h3 { padding-right: 28px; }
}

/* Sehr breite Displays — kein Hochskalieren über 1080px hinaus, aber zumindest geometrische Spannung halten */
@media (min-width: 1400px) {
    .hero { padding-top: clamp(96px, 10vw, 120px); }
}

/* Druck — schwarz auf weiß, keine sticky-nav, keine glow */
@media print {
    .nav, .techno-strobe, .techno-flash, .techno-banner, .techno-laser, .techno-hint, .techno-scanlines { display: none !important; }
    body { background: #fff; color: #000; }
    .card { break-inside: avoid; box-shadow: none; border-color: #999; }
    a { color: #000; text-decoration: underline; }
}

/* Reduce-Motion respektieren — außer im opt-in Technomodus */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 100ms !important;
    }
    .card:hover { transform: none; }
    /* Techno-Klassen werden durch User-Geste aktiviert — Animationen dort weiter erlauben */
    body.techno-on,
    body.techno-on *,
    .techno-strobe, .techno-flash, .techno-laser, .techno-banner, .techno-scanlines {
        animation-duration: revert !important;
        animation-iteration-count: revert !important;
        transition-duration: revert !important;
    }
}

/* ============== TECHNOMODUS — maximum carnage ============== */
:root { --techno-hue: 0deg; }

body.techno-on {
    background: #000;
    overflow: hidden;
    animation: techno-bg 140ms infinite;
}
@keyframes techno-bg {
    0%   { background: #ff00aa; }
    16%  { background: #00ffd0; }
    33%  { background: #ffee00; }
    50%  { background: #ff3300; }
    66%  { background: #6600ff; }
    83%  { background: #00ff44; }
    100% { background: #ff0066; }
}

body.techno-on .nav,
body.techno-on main,
body.techno-on article {
    filter: hue-rotate(var(--techno-hue)) saturate(4) contrast(1.5) blur(0.4px);
    animation: techno-shake 180ms infinite;
}
@keyframes techno-shake {
    0%   { transform: translate(-8px, 6px) skew(-3deg, 1deg) scale(1.02); }
    14%  { transform: translate(9px, -7px) skew(2deg, -1.5deg) scale(0.99); }
    28%  { transform: translate(-6px, -8px) skew(-1.5deg, 2deg) scale(1.03); }
    42%  { transform: translate(8px, 5px) skew(3deg, -1deg) scale(0.98); }
    57%  { transform: translate(-9px, 4px) skew(-2deg, 2deg) scale(1.01); }
    71%  { transform: translate(7px, -6px) skew(2.5deg, -2deg) scale(1.02); }
    85%  { transform: translate(-5px, 8px) skew(-3deg, 1deg) scale(0.99); }
    100% { transform: translate(6px, -3px) skew(1.5deg, -2deg) scale(1.03); }
}

body.techno-on .nav {
    background: rgba(0, 0, 0, 0.4) !important;
    border-bottom: 4px solid #ff00ff;
    box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffff;
}

body.techno-on .card,
body.techno-on details.card {
    background: rgba(255, 0, 255, 0.18) !important;
    border-color: #00ffff !important;
    border-width: 2px !important;
    box-shadow:
        0 0 30px rgba(255, 0, 255, 0.7),
        inset 0 0 20px rgba(0, 255, 255, 0.4) !important;
    animation: techno-card-flicker 240ms infinite;
}
@keyframes techno-card-flicker {
    0%   { transform: rotate(-1.5deg) scale(1); }
    33%  { transform: rotate(1.5deg) scale(1.04); }
    66%  { transform: rotate(-0.5deg) scale(0.97); }
    100% { transform: rotate(1deg) scale(1.02); }
}
body.techno-on .card-icon {
    animation: techno-spin 400ms linear infinite;
    filter: drop-shadow(0 0 15px #ff00ff) drop-shadow(0 0 30px #00ffff);
}
@keyframes techno-spin {
    0%   { transform: rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) scale(1.6); }
    50%  { transform: rotate(180deg) scale(0.7); }
    75%  { transform: rotate(270deg) scale(1.5); }
    100% { transform: rotate(360deg) scale(1); }
}

body.techno-on h1,
body.techno-on h2,
body.techno-on h3,
body.techno-on p,
body.techno-on .lead,
body.techno-on a {
    color: #ffffff !important;
    text-shadow:
        -3px 0 0 #ff00ff,
        3px 0 0 #00ffff,
        0 0 20px rgba(255, 255, 255, 0.8),
        0 0 40px #ffff00 !important;
    animation: techno-text-glitch 90ms infinite steps(2, end);
}
@keyframes techno-text-glitch {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-2px, 1px); }
    100% { transform: translate(2px, -1px); }
}

body.techno-on h1 .accent {
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff00ff) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    animation: techno-gradient 1s linear infinite !important;
    text-shadow: none !important;
}
@keyframes techno-gradient {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}

body.techno-on .kontakt-mail {
    background: rgba(0, 0, 0, 0.6) !important;
    border-color: #ff00ff !important;
    color: #00ffff !important;
}

/* Strobe layer 1 — colored radials */
.techno-strobe {
    position: fixed;
    inset: -10vh -10vw;
    pointer-events: none;
    z-index: 9998;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 0, 200, 0.95), transparent 35%),
        radial-gradient(circle at 85% 25%, rgba(0, 230, 255, 0.95), transparent 35%),
        radial-gradient(circle at 50% 90%, rgba(255, 230, 0, 0.95), transparent 35%),
        radial-gradient(circle at 25% 75%, rgba(255, 50, 0, 0.85), transparent 30%),
        radial-gradient(circle at 78% 65%, rgba(100, 0, 255, 0.85), transparent 30%);
    mix-blend-mode: screen;
    animation: techno-strobe 140ms steps(2, end) infinite, techno-rotate 2.4s linear infinite;
}
@keyframes techno-strobe {
    0%   { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.4; transform: scale(1.15); }
}
@keyframes techno-rotate {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Strobe layer 2 — pure white flash, harder */
.techno-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10001;
    background: #ffffff;
    opacity: 0;
    animation: techno-flash 380ms steps(1, end) infinite;
    mix-blend-mode: difference;
}
@keyframes techno-flash {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    16%  { opacity: 0; }
    50%  { opacity: 0; }
    58%  { opacity: 0.7; }
    66%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Scanlines for CRT vibe */
.techno-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 3px
    );
    animation: techno-scanmove 1s linear infinite;
}
@keyframes techno-scanmove {
    0%   { transform: translateY(0); }
    100% { transform: translateY(3px); }
}

.techno-banner {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(60px, 16vw, 220px);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #fff;
    text-shadow:
        -8px 0 0 #ff00ff,
        8px 0 0 #00ffff,
        0 -6px 0 #ffff00,
        0 6px 0 #ff0066,
        0 0 30px #fff,
        0 0 60px #ff00ff,
        0 0 120px #00ffff;
    z-index: 10002;
    pointer-events: none;
    animation: techno-banner-pulse 220ms infinite alternate, techno-banner-jitter 80ms infinite steps(3, end);
    user-select: none;
    white-space: nowrap;
}
@keyframes techno-banner-pulse {
    0%   { transform: translate(-50%, -50%) scale(0.95) rotate(-4deg) skew(2deg); }
    100% { transform: translate(-50%, -50%) scale(1.18) rotate(4deg) skew(-2deg); }
}
@keyframes techno-banner-jitter {
    0%   { letter-spacing: -0.04em; filter: hue-rotate(0deg); }
    50%  { letter-spacing: 0.04em; filter: hue-rotate(180deg); }
    100% { letter-spacing: -0.04em; filter: hue-rotate(0deg); }
}

.techno-hint {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    z-index: 10003;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 0 0 12px #ff00ff, 0 0 24px #00ffff;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #ff00ff;
}

.techno-laser {
    position: fixed;
    top: 0;
    left: 50%;
    width: 6px;
    height: 220vh;
    pointer-events: none;
    z-index: 9999;
    transform-origin: top center;
    mix-blend-mode: screen;
    opacity: 0.95;
    filter: blur(1px);
}
.techno-laser-0  { background: linear-gradient(180deg, #ff00ff, transparent); animation: laser-sweep-a 1.4s linear infinite; }
.techno-laser-1  { background: linear-gradient(180deg, #00ffff, transparent); animation: laser-sweep-b 1.4s linear infinite; }
.techno-laser-2  { background: linear-gradient(180deg, #ffff00, transparent); animation: laser-sweep-a 1.0s linear infinite reverse; }
.techno-laser-3  { background: linear-gradient(180deg, #00ff66, transparent); animation: laser-sweep-b 1.0s linear infinite reverse; }
.techno-laser-4  { background: linear-gradient(180deg, #ff3399, transparent); animation: laser-sweep-a 1.8s linear infinite;            animation-delay: 0.2s; }
.techno-laser-5  { background: linear-gradient(180deg, #33ccff, transparent); animation: laser-sweep-b 1.8s linear infinite;            animation-delay: 0.2s; }
.techno-laser-6  { background: linear-gradient(180deg, #ff6600, transparent); animation: laser-sweep-a 1.2s linear infinite reverse;    animation-delay: 0.4s; }
.techno-laser-7  { background: linear-gradient(180deg, #cc00ff, transparent); animation: laser-sweep-b 1.2s linear infinite reverse;    animation-delay: 0.4s; }
.techno-laser-8  { background: linear-gradient(180deg, #ffffff, transparent); animation: laser-sweep-a 0.8s linear infinite;            animation-delay: 0.6s; }
.techno-laser-9  { background: linear-gradient(180deg, #00ffaa, transparent); animation: laser-sweep-b 0.8s linear infinite;            animation-delay: 0.6s; }
.techno-laser-10 { background: linear-gradient(180deg, #ff0044, transparent); animation: laser-sweep-a 1.6s linear infinite reverse;    animation-delay: 0.9s; }
.techno-laser-11 { background: linear-gradient(180deg, #4400ff, transparent); animation: laser-sweep-b 1.6s linear infinite reverse;    animation-delay: 0.9s; }
.techno-laser-12 { background: linear-gradient(180deg, #ffaa00, transparent); animation: laser-sweep-a 2.0s linear infinite;            animation-delay: 0.3s; }
.techno-laser-13 { background: linear-gradient(180deg, #00aaff, transparent); animation: laser-sweep-b 2.0s linear infinite;            animation-delay: 0.3s; }
.techno-laser-14 { background: linear-gradient(180deg, #ff00aa, transparent); animation: laser-sweep-a 0.9s linear infinite reverse;    animation-delay: 0.5s; }
.techno-laser-15 { background: linear-gradient(180deg, #aaff00, transparent); animation: laser-sweep-b 0.9s linear infinite reverse;    animation-delay: 0.5s; }

@keyframes laser-sweep-a {
    0%   { transform: rotate(-78deg); }
    50%  { transform: rotate(78deg); }
    100% { transform: rotate(-78deg); }
}
@keyframes laser-sweep-b {
    0%   { transform: rotate(75deg); }
    50%  { transform: rotate(-75deg); }
    100% { transform: rotate(75deg); }
}