@charset "UTF-8";

/* ベース設定 */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.03em;
    overflow-x: hidden;
    cursor: none; /* カスタムカーソル */
    background-color: #0f172a;
    color: #f8fafc;
}

/* カスタムカーソル */
#cursor {
    position: fixed; top: 0; left: 0; width: 20px; height: 20px;
    background-color: rgba(59, 130, 246, 0.8); border-radius: 50%;
    pointer-events: none; z-index: 9999; mix-blend-mode: exclusion;
    transition: transform 0.1s ease; transform: translate(-50%, -50%);
}
#cursor-follower {
    position: fixed; top: 0; left: 0; width: 40px; height: 40px;
    border: 1px solid rgba(59, 130, 246, 0.5); border-radius: 50%;
    pointer-events: none; z-index: 9998;
    transition: transform 0.15s ease-out; transform: translate(-50%, -50%);
}
/* ホバー時の挙動 */
a:hover ~ #cursor, button:hover ~ #cursor, .magnet-button:hover ~ #cursor, label:hover ~ #cursor {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: #fff;
}

/* グラスモーフィズム共通 */
.glass-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* テックスタック・マーキーアニメーション */
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: scroll 40s linear infinite; }
.marquee-item { padding: 1rem 2rem; font-weight: bold; font-size: 1.25rem; display: flex; align-items: center; gap: 0.75rem; color: #94a3b8; }

/* 404ページ用グリッチ */
.glitch { position: relative; font-weight: 900; line-height: 1; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch::before { left: 2px; text-shadow: -2px 0 #ff00c1; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -2px 0 #00fff9; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim2 5s infinite linear alternate-reverse; }
@keyframes glitch-anim {
    0% { clip: rect(35px, 9999px, 16px, 0); }
    100% { clip: rect(68px, 9999px, 92px, 0); }
}
@keyframes glitch-anim2 {
    0% { clip: rect(15px, 9999px, 66px, 0); }
    100% { clip: rect(28px, 9999px, 12px, 0); }
}