/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/

/* ════════════════════════════════════════════
   ITACHI COMMAND CENTER — KEYFRAMES LIBRARY
   v2.0 2026-03-12 by Leonardo (Antigravity)
════════════════════════════════════════════ */

/* ── 既存: フェードイン系 ── */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── HUDグリッチエフェクト ── */
@keyframes glitch {
    0% {
        clip-path: inset(0 0 98% 0);
        transform: translateX(-4px);
    }

    10% {
        clip-path: inset(40% 0 50% 0);
        transform: translateX(4px);
    }

    20% {
        clip-path: inset(80% 0 5% 0);
        transform: translateX(-4px);
    }

    30% {
        clip-path: inset(10% 0 85% 0);
        transform: translateX(4px);
        opacity: 0.8;
    }

    40% {
        clip-path: inset(60% 0 30% 0);
        transform: translateX(0);
    }

    50% {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes glitch-color {

    0%,
    100% {
        text-shadow: 0 0 8px var(--cmd-neon, #00f3ff), 0 0 20px var(--cmd-neon, #00f3ff);
    }

    25% {
        text-shadow: -3px 0 var(--cmd-magenta, #ff00ff), 3px 0 var(--cmd-neon, #00f3ff);
    }

    50% {
        text-shadow: 3px 0 var(--cmd-magenta, #ff00ff), -3px 0 var(--cmd-neon, #00f3ff);
    }

    75% {
        text-shadow: 0 0 2px #fff;
    }
}

/* ── スキャンライン（HUD背景） ── */
@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100vh);
    }
}

@keyframes scanline-flicker {

    0%,
    100% {
        opacity: 0.03;
    }

    50% {
        opacity: 0.06;
    }
}

/* ── ネオングロー（パルス） ── */
@keyframes neon-pulse {

    0%,
    100% {
        box-shadow: 0 0 5px var(--cmd-neon, #00f3ff), 0 0 10px var(--cmd-neon, #00f3ff), 0 0 20px var(--cmd-neon, #00f3ff);
    }

    50% {
        box-shadow: 0 0 10px var(--cmd-neon, #00f3ff), 0 0 30px var(--cmd-neon, #00f3ff), 0 0 60px var(--cmd-neon, #00f3ff);
    }
}

@keyframes neon-text-pulse {

    0%,
    100% {
        text-shadow: 0 0 4px var(--cmd-neon, #00f3ff), 0 0 12px var(--cmd-neon, #00f3ff);
        opacity: 0.9;
    }

    50% {
        text-shadow: 0 0 8px var(--cmd-neon, #00f3ff), 0 0 25px var(--cmd-neon, #00f3ff), 0 0 50px var(--cmd-neon, #00f3ff);
        opacity: 1;
    }
}

/* ── ビーコン（ドット点灯） ── */
@keyframes beacon {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

@keyframes beacon-ring {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ── データストリーム（ボーダーが流れる） ── */
@keyframes border-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ── ホログラムちらつき ── */
@keyframes hologram {

    0%,
    100% {
        opacity: 1;
        transform: scaleY(1) skewX(0deg);
    }

    92% {
        opacity: 1;
        transform: scaleY(1) skewX(0deg);
    }

    93% {
        opacity: 0.6;
        transform: scaleY(0.98) skewX(-1deg);
    }

    94% {
        opacity: 1;
        transform: scaleY(1) skewX(0deg);
    }

    96% {
        opacity: 0.7;
        transform: scaleY(0.99) skewX(1deg);
    }

    97% {
        opacity: 1;
        transform: scaleY(1) skewX(0deg);
    }
}

/* ── タイプライター点滅カーソル ── */
@keyframes blink-cursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ── スライドイン ── */
@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── スケールアップ ── */
@keyframes scale-up-top {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ── プログレスバー展開 ── */
@keyframes progress-expand {
    from {
        width: 0%;
    }

    to {
        width: var(--progress-width, 94%);
    }
}

/* ── オーブパルス（強化版） ── */
@keyframes orb-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
        filter: blur(0px);
    }

    50% {
        transform: scale(1.8);
        opacity: 1;
        filter: blur(3px);
    }
}

@keyframes orb-float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* ── パネル登場 ── */
@keyframes panel-appear {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── ワープライン ── */
@keyframes warp-line {
    0% {
        transform: scaleX(0);
        transform-origin: left;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        transform-origin: left;
        opacity: 0.4;
    }
}

/* ── ローテート ── */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }

    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── フリッカー（電源不安定風） ── */
@keyframes flicker {

    0%,
    100% {
        opacity: 1;
    }

    8% {
        opacity: 0.9;
    }

    9% {
        opacity: 1;
    }

    42% {
        opacity: 1;
    }

    43% {
        opacity: 0.7;
    }

    44% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    71% {
        opacity: 0.85;
    }

    72% {
        opacity: 1;
    }
}

/* ── ボーダーグロー ── */
@keyframes glow-border {

    0%,
    100% {
        border-color: rgba(0, 243, 255, 0.15);
    }

    50% {
        border-color: rgba(0, 243, 255, 0.6);
        box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
    }
}

/* ── ロールイン（透視投影） ── */
@keyframes rollIn {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(-20deg) translateY(30px);
    }

    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg) translateY(0);
    }
}

/* ── スクロールアニメーション（IntersectionObserver連携） ── */
@keyframes scroll-animation {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}