/* =========================================================
   JG-VRP Speedometer Pro - Cyberpunk HUD
   ========================================================= */

:root {
    /* Panel background opacity (0 = fully transparent, 1 = solid) */
    --hud-bg: 0.28;
    /* Central Hexagon background image opacity */
    --hud-hex-img-opacity: 0.38;
    /* HUD size & position on screen */
    --hud-width: 540px;
    --hud-bottom: 28px;
    --hud-right: 32px;
}

* {
    user-select: none;
    -webkit-user-drag: none;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
    font-family: 'JetBrains Mono', 'Noto Sans JP', monospace;
    -webkit-font-smoothing: antialiased;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

main.speedometer {
    position: fixed;
    bottom: var(--hud-bottom);
    right: var(--hud-right);
    width: var(--hud-width);
    max-width: 94vw;
    aspect-ratio: 540 / 182;
    pointer-events: none;
}

#hud,
#welcome-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

#welcome-overlay {
    z-index: 2;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

#welcome-overlay.active {
    opacity: 1;
    transform: scale(1);
}

#welcome-overlay.fade-out {
    opacity: 0;
    transform: scale(1.02);
}

#hud {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#hud.hidden {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
}

/* Welcome Overlay Animations */
@keyframes welcomeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.welcome-spin {
    transform-origin: 0px 0px;
    animation: welcomeSpin 4.5s linear infinite;
}

.welcome-bar-fill {
    stroke-dasharray: 270;
    stroke-dashoffset: 270;
    transition: stroke-dashoffset 90ms linear;
}

@keyframes welcomePulse {
    0%, 100% { opacity: 0.95; }
    50% { opacity: 0.45; }
}

.welcome-pulse {
    animation: welcomePulse 1.8s ease-in-out infinite;
}

@keyframes welcomeNameGlow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.45)); }
    50% { filter: drop-shadow(0 0 16px rgba(232, 49, 139, 0.65)); }
}

.welcome-name {
    animation: welcomeNameGlow 2.5s ease-in-out infinite;
}

/* Translucent panel fills */
.bg-stop-top { stop-opacity: var(--hud-bg); }
.bg-stop-bottom { stop-opacity: calc(var(--hud-bg) + 0.08); }
.bg-fill { fill-opacity: var(--hud-bg); }

/* Typography */
.t-mono { font-family: 'JetBrains Mono', 'Noto Sans JP', monospace; font-weight: 700; }
.t-jp { font-family: 'Noto Sans JP', 'JetBrains Mono', sans-serif; font-weight: 700; }
.t-chakra { font-family: 'Chakra Petch', 'JetBrains Mono', sans-serif; font-weight: 700; }
.t-num { font-variant-numeric: tabular-nums; }

/* Smooth color changes */
.t-stroke { transition: stroke 150ms ease; }
.t-fill { transition: fill 150ms ease; }
#hud-speed-bars rect,
#hud-speed-dashes rect,
#hud-rpm-segments rect {
    transition: fill 60ms ease;
}

/* Blink animation (seatbelt, low health, redline, low fuel) */
@keyframes hudPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.hud-blink {
    animation: hudPulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Central Hexagon Background Image */
#hud-hex-bg-img {
    opacity: var(--hud-hex-img-opacity, 0.38);
    pointer-events: none;
    transition: opacity 250ms ease;
}