@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --bg-color: #050505;
    --primary-color: #ff0000;
    --text-color: #a0a0a0;
}

body {
    font-family: 'JetBrains Mono', monospace;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
}

/* デジタル出現アニメーション（右から流れてくる） */
.digital-in {
    animation: slide-in-right 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

/* デジタル退出アニメーション */
.digital-out {
    animation: data-corrupt 0.4s ease-in forwards !important;
}

@keyframes slide-in-right {
    0% { opacity: 0; transform: translateX(50px) skewX(-10deg); filter: brightness(3) blur(4px); }
    70% { opacity: 1; transform: translateX(-5px) skewX(2deg); filter: brightness(1.5) blur(1px); }
    100% { opacity: 1; transform: translateX(0) skewX(0); filter: brightness(1) blur(0); }
}

@keyframes data-corrupt {
    0% { opacity: 1; filter: contrast(1); }
    50% { opacity: 0.8; filter: contrast(3) blur(2px) hue-rotate(90deg); transform: skewX(2deg); }
    100% { opacity: 0; filter: contrast(5) blur(10px); transform: skewX(-5deg) scaleY(0.1); }
}

/* スキャンライン効果 */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 100;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* 画面のわずかな揺れ */
@keyframes flicker {
    0% { opacity: 0.97; }
    5% { opacity: 0.95; }
    10% { opacity: 0.9; }
    15% { opacity: 0.95; }
    20% { opacity: 0.98; }
    100% { opacity: 1; }
}

.screen {
    animation: flicker 0.15s infinite;
}

.glitch-text {
    text-shadow: 2px 0 #ff0000, -2px 0 #00ffff;
}

.record-card {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid #333;
    position: relative;
    transition: all 0.2s ease;
}

.record-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
    transform: translateX(5px);
}

.record-card::before {
    content: ">";
    position: absolute;
    left: -15px;
    color: var(--primary-color);
    opacity: 0;
    transition: opacity 0.2s;
}

.record-card:hover::before {
    opacity: 1;
}