/* ── VT323 Font ─────────────────────────────────────────────────────── */
@font-face {
    font-family: 'VT323';
    src: url("../fonts/VT323-auhAibo.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* ── Global Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { overflow-x: hidden; color-scheme: dark; }
body {
    background: #000;
    color: #00ff41;
    font-family: 'VT323', 'Courier New', monospace;
    overflow-x: hidden;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 0 L16 16 M0 0 L0 10 M0 0 L10 0' stroke='%2300ff41' stroke-width='2' fill='none'/%3E%3C/svg%3E") 0 0, auto;
}

/* ── CRT Screen ────────────────────────────────────────────────────── */
.screen {
    min-height: 100vh;
    overflow-x: hidden;
    background: radial-gradient(ellipse at center, #001500 0%, #000c00 55%, #000 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 12vh 12px 80px;
    position: relative;
}

/* ── Scanlines ──────────────────────────────────────────────────────── */
.screen::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.13) 2px,
        rgba(0,0,0,0.13) 4px
    );
    pointer-events: none;
    z-index: 100;
}

/* ── CRT flicker ────────────────────────────────────────────────────── */
@keyframes flicker {
    0%, 94%, 100%  { opacity: 1; }
    95%             { opacity: 0.96; }
    97%             { opacity: 0.99; }
}
.screen { animation: flicker 9s infinite ease-in-out; }

/* ── Logo wrapper ───────────────────────────────────────────────────── */
.logo-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: clip; /* clips composited GPU layers (will-change) unlike overflow:hidden */
    margin-bottom: 2.5rem;
    position: relative;
}

/* ── Particle canvas ────────────────────────────────────────────────── */
#stardust-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
}

/* ── ASCII Logo ─────────────────────────────────────────────────────── */
#logo {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.35;
    white-space: pre;
    display: block;
    color: #00ff41;
    text-shadow:
        0 0 6px  #00ff41,
        0 0 14px #00c832,
        0 0 30px rgba(0,200,50,0.3);
    transform-origin: top center;
    will-change: transform;
}

/* ── Char animation ─────────────────────────────────────────────────── */
@keyframes spinIn {
    0%   { transform: rotate(700deg) scale(0.05); opacity: 0;   filter: blur(3px); }
    65%  { opacity: 1;                             filter: blur(0); }
    85%  { transform: rotate(-12deg) scale(1.08); }
    100% { transform: rotate(0deg)  scale(1);    opacity: 1;   filter: none; }
}

.char {
    display: inline-block;
    width: 1ch;
    text-align: center;
    transform-origin: 50% 50%;
}
.char--animating {
    animation: spinIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform, opacity; /* only promote to GPU layer during active animation */
}

/* ── Info block ─────────────────────────────────────────────────────── */
.info {
    text-align: center;
    margin-top: 0.4rem;
    line-height: 1.45;
}
.info-name {
    font-size: 2.4rem;
    color: #00ff41;
    letter-spacing: 3px;
    text-shadow: 0 0 10px #00ff41, 0 0 24px rgba(0,255,65,0.4);
}
.info-title {
    font-size: 1.7rem;
    color: #00dc3a;
    letter-spacing: 1px;
}
.info-address {
    font-size: 1.5rem;
    color: #00ff41;
    margin-top: 0.4rem;
    letter-spacing: 1px;
    animation: glow-pulse 2.8s ease-in-out infinite;
}
@keyframes glow-pulse {
    0%   { text-shadow: 0 0 4px #00ff41, 0 0 8px rgba(0,255,65,0.3); opacity: 0.7; }
    50%  { text-shadow: 0 0 12px #00ff41, 0 0 28px rgba(0,255,65,0.7), 0 0 48px rgba(0,255,65,0.3); opacity: 1; }
    100% { text-shadow: 0 0 4px #00ff41, 0 0 8px rgba(0,255,65,0.3); opacity: 0.7; }
}
.info-features {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 1.35rem;
    color: #009a28;
    letter-spacing: 1px;
    display: inline-block;
    text-align: left;
}

@media (max-width: 600px) {
    .info-features {
        font-size: 1.05rem;
    }
    .info-features li:nth-child(n+5) {
        display: none;
    }
}

/* ── Screen-reader only utility ─────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .char--animating { animation: none !important; }
    .screen          { animation: none !important; }
    .info-address    { animation: none !important; }
}

@media (max-width: 600px) {
    .info-name    { font-size: 1.8rem; }
    .info-title   { font-size: 1.4rem; }
    .info-address { font-size: 1.2rem; }
}

/* ── Custom tooltips ────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background: #000;
    color: #00ff41;
    border: 1px solid #00ff41;
    box-shadow: 0 0 8px #00ff41;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    letter-spacing: normal;
    white-space: nowrap;
    padding: 3px 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
    z-index: 300;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    opacity: 1;
    transform: translateY(0);
}