/* ============================================ */
/* Opening Animation - ローダー後の演出 */
/* ============================================ */

/* オープニングセクション */
.opening-animation-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vw;
    background-color: #000000;
    overflow: hidden;
    z-index: 10;
}

.opening-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 初期状態: すべての要素を非表示 */
.opening-bg-layer,
.opening-car-image,
.opening-text-pattern,
.opening-copy-jp,
.opening-logo {
    opacity: 0;
    visibility: hidden;
}

/* アニメーション開始後の状態 */
body.opening-animation-started .opening-bg-layer,
body.opening-animation-started .opening-car-image,
body.opening-animation-started .opening-text-pattern,
body.opening-animation-started .opening-copy-jp,
body.opening-animation-started .opening-logo {
    opacity: 0;
    visibility: visible;
}

/* ===== 背景画像 ===== */
.opening-bg-layer {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 1;
}

.opening-bg-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: bgFlicker 8s linear infinite;
}


@keyframes bgFlicker {
    0%, 100% {
        filter: contrast(1) brightness(1);
    }
    25% {
        filter: contrast(1.1) brightness(1.02);
    }
    50% {
        filter: contrast(0.95) brightness(0.98);
    }
    75% {
        filter: contrast(1.05) brightness(1.01);
    }
}


/* ===== 背景画像アニメーション ===== */
body.opening-animation-started .opening-bg-layer.animate-in {
    animation: fadeInBg 1s ease-out forwards;
}

@keyframes fadeInBg {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ===== 車画像 ===== */
.opening-car-image {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 150;
}

.opening-car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: carFlicker 8s linear infinite;
}

/* 車画像のグリッチレイヤー - 削除 */

@keyframes carFlicker {
    0%, 100% {
        filter: contrast(1) brightness(1);
    }
    25% {
        filter: contrast(1.08) brightness(1.01);
    }
    50% {
        filter: contrast(0.97) brightness(0.99);
    }
    75% {
        filter: contrast(1.03) brightness(1.005);
    }
}



/* ===== 車画像アニメーション ===== */
body.opening-animation-started .opening-car-image.animate-in {
    animation: slideInCar 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes slideInCar {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* ===== 英語テキスト ===== */
.opening-text-pattern {
    position: fixed;
    top: 10vh;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    max-width: 1200px;
    pointer-events: none;
    z-index: 100;
    mix-blend-mode: screen;
}

.opening-text-pattern img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(100%);
    opacity: 0.3;
}

/* 英語テキストのグリッチエフェクト用疑似要素 */
.opening-text-pattern::before,
.opening-text-pattern::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../img/top/hero_copy01.svg?v=20251030');
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.opening-text-pattern::before {
    z-index: 5;
    animation: textPatternGlitch1 5s linear infinite;
}

.opening-text-pattern::after {
    z-index: 6;
    animation: textPatternGlitch2 5s linear infinite;
}

/* 英語テキストグリッチ - Layer 1 (上半分シフト) */
@keyframes textPatternGlitch1 {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
        clip-path: inset(0 0 50% 0);
        transform: translate(-18px, 0);
        filter: brightness(1.5) saturate(1.5);
    }
    5.5% {
        opacity: 0;
    }
    18% {
        opacity: 1;
        clip-path: inset(0 0 50% 0);
        transform: translate(20px, 8px);
        filter: brightness(1.6) saturate(1.6);
    }
    18.5% {
        opacity: 0;
    }
    32% {
        opacity: 1;
        clip-path: inset(0 0 50% 0);
        transform: translate(-15px, -10px);
        filter: brightness(1.5) saturate(1.5);
    }
    32.5% {
        opacity: 0;
    }
}

/* 英語テキストグリッチ - Layer 2 (下半分シフト) */
@keyframes textPatternGlitch2 {
    0%, 100% {
        opacity: 0;
    }
    5.2% {
        opacity: 1;
        clip-path: inset(50% 0 0 0);
        transform: translate(22px, 0);
        filter: brightness(1.6) saturate(1.6);
    }
    5.7% {
        opacity: 0;
    }
    18.2% {
        opacity: 1;
        clip-path: inset(50% 0 0 0);
        transform: translate(-19px, -6px);
        filter: brightness(1.5) saturate(1.5);
    }
    18.7% {
        opacity: 0;
    }
    32.2% {
        opacity: 1;
        clip-path: inset(50% 0 0 0);
        transform: translate(17px, 12px);
        filter: brightness(1.6) saturate(1.6);
    }
    32.7% {
        opacity: 0;
    }
}

/* ===== 英語テキストアニメーション ===== */
body.opening-animation-started .opening-text-pattern.animate-in {
    animation: fadeInScale 1s ease-out forwards;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* ===== 英語テキストCRT消去エフェクト ===== */
.opening-text-pattern.crt-off {
    animation: crtTurnOffText 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes crtTurnOffText {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scaleY(1) scaleX(1);
        filter: brightness(1);
    }
    20% {
        opacity: 0.8;
        transform: translate(-50%, 0) scaleY(1) scaleX(1);
        filter: brightness(1.5) contrast(1.5);
    }
    40% {
        opacity: 0.6;
        transform: translate(-50%, 0) scaleY(0.8) scaleX(1.05);
        filter: brightness(2) contrast(2);
    }
    60% {
        opacity: 0.3;
        transform: translate(-50%, 0) scaleY(0.1) scaleX(1.1);
        filter: brightness(3) contrast(3);
    }
    80% {
        opacity: 0.1;
        transform: translate(-50%, 0) scaleY(0.01) scaleX(0.95);
        filter: brightness(4) contrast(5);
    }
    100% {
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 0) scaleY(0) scaleX(0);
        filter: brightness(5) contrast(0);
    }
}

/* ===== 日本語コピー ===== */
.opening-copy-jp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    z-index: 200;
}

.opening-copy-jp img {
    width: 100%;
    height: auto;
}

/* 鼓動エフェクト用の疑似要素 */
.opening-copy-jp::before,
.opening-copy-jp::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    pointer-events: none;
}

.opening-copy-jp::before {
    background-image: url('../img/top/hero_copy02.svg?v=20251030');
    animation: copyHeartbeat1 2.5s step-end infinite;
    z-index: 1;
}

.opening-copy-jp::after {
    background-image: url('../img/top/hero_copy02.svg?v=20251030');
    animation: copyHeartbeat2 2.5s step-end infinite;
    z-index: 2;
}

/* 鼓動グリッチエフェクト - Red channel */
@keyframes copyHeartbeat1 {
    0%, 100% { opacity: 0; }
    4% { opacity: 0.8; transform: translate(calc(-50% - 10px), calc(-50% + 2px)); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.4); }
    4.2% { opacity: 0; }
    8% { opacity: 0.9; transform: translate(calc(-50% + 12px), calc(-50% - 2px)); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.5); }
    8.3% { opacity: 0; }
    20% { opacity: 0.8; transform: translate(calc(-50% - 10px), calc(-50% + 2px)); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.4); }
    20.2% { opacity: 0; }
    24% { opacity: 0.9; transform: translate(calc(-50% + 12px), calc(-50% - 2px)); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.5); }
    24.3% { opacity: 0; }
    40% { opacity: 0.8; transform: translate(calc(-50% - 10px), calc(-50% + 2px)); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.4); }
    40.2% { opacity: 0; }
    44% { opacity: 0.9; transform: translate(calc(-50% + 12px), calc(-50% - 2px)); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.5); }
    44.3% { opacity: 0; }
    60% { opacity: 0.8; transform: translate(calc(-50% - 10px), calc(-50% + 2px)); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.4); }
    60.2% { opacity: 0; }
    64% { opacity: 0.9; transform: translate(calc(-50% + 12px), calc(-50% - 2px)); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.5); }
    64.3% { opacity: 0; }
    80% { opacity: 0.8; transform: translate(calc(-50% - 10px), calc(-50% + 2px)); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.4); }
    80.2% { opacity: 0; }
    84% { opacity: 0.9; transform: translate(calc(-50% + 12px), calc(-50% - 2px)); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.5); }
    84.3% { opacity: 0; }
}

/* 鼓動グリッチエフェクト - Cyan channel */
@keyframes copyHeartbeat2 {
    0%, 100% { opacity: 0; }
    4.1% { opacity: 0.8; transform: translate(calc(-50% + 9px), calc(-50% - 2px)); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.4); }
    4.3% { opacity: 0; }
    8.1% { opacity: 0.9; transform: translate(calc(-50% - 11px), calc(-50% + 3px)); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.5); }
    8.4% { opacity: 0; }
    20.1% { opacity: 0.8; transform: translate(calc(-50% + 9px), calc(-50% - 2px)); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.4); }
    20.3% { opacity: 0; }
    24.1% { opacity: 0.9; transform: translate(calc(-50% - 11px), calc(-50% + 3px)); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.5); }
    24.4% { opacity: 0; }
    40.1% { opacity: 0.8; transform: translate(calc(-50% + 9px), calc(-50% - 2px)); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.4); }
    40.3% { opacity: 0; }
    44.1% { opacity: 0.9; transform: translate(calc(-50% - 11px), calc(-50% + 3px)); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.5); }
    44.4% { opacity: 0; }
    60.1% { opacity: 0.8; transform: translate(calc(-50% + 9px), calc(-50% - 2px)); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.4); }
    60.3% { opacity: 0; }
    64.1% { opacity: 0.9; transform: translate(calc(-50% - 11px), calc(-50% + 3px)); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.5); }
    64.4% { opacity: 0; }
    80.1% { opacity: 0.8; transform: translate(calc(-50% + 9px), calc(-50% - 2px)); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.4); }
    80.3% { opacity: 0; }
    84.1% { opacity: 0.9; transform: translate(calc(-50% - 11px), calc(-50% + 3px)); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.5); }
    84.4% { opacity: 0; }
}

/* ===== 日本語コピーアニメーション ===== */
body.opening-animation-started .opening-copy-jp.animate-in {
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ===== 日本語コピー再表示時のポジション（slide1と同じ） ===== */
.opening-copy-jp.reappear {
    top: auto !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 800px !important;
    max-height: none !important;
}

/* ===== 日本語コピーCRT消去エフェクト ===== */
.opening-copy-jp.crt-off {
    animation: crtTurnOffCopy 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes crtTurnOffCopy {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleY(1) scaleX(1);
        filter: brightness(1);
    }
    20% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scaleY(1) scaleX(1);
        filter: brightness(1.5) contrast(1.5);
    }
    40% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scaleY(0.8) scaleX(1.05);
        filter: brightness(2) contrast(2);
    }
    60% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scaleY(0.1) scaleX(1.1);
        filter: brightness(3) contrast(3);
    }
    80% {
        opacity: 0.1;
        transform: translate(-50%, -50%) scaleY(0.01) scaleX(0.95);
        filter: brightness(4) contrast(5);
    }
    100% {
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -50%) scaleY(0) scaleX(0);
        filter: brightness(5) contrast(0);
    }
}

/* ===== ロゴ ===== */
.opening-logo {
    position: absolute;
    top: 20%;
    left: calc(50% - 75px);
    width: 150px;
    z-index: 300;
}

.opening-logo img {
    width: 100%;
    height: auto;
}

/* ===== ロゴアニメーション ===== */
body.opening-animation-started .opening-logo.animate-in {
    animation: fadeInRotate 1s ease-out forwards;
}

@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* ===== ロゴグリッチエフェクト ===== */
.opening-logo.glitch-effect::before,
.opening-logo.glitch-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.opening-logo.glitch-effect::before,
.opening-logo.glitch-effect::after {
    background-image: url('../img/common/logo_header.svg?v=20251030');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.opening-logo.glitch-effect::before {
    animation: logoGlitch1 3s linear 1 alternate both;
    filter: hue-rotate(120deg);
}

.opening-logo.glitch-effect::after {
    animation: logoGlitch2 3s linear 1 alternate both;
    filter: hue-rotate(240deg);
}

@keyframes logoGlitch1 {
    0% { opacity: 1; clip-path: polygon(0% 45%, 100% 45%, 100% 52%, 0% 52%); transform: translate(-3%, 0.2%); }
    2% { opacity: 1; clip-path: polygon(0% 12%, 100% 12%, 100% 19%, 0% 19%); transform: translate(5%, -0.3%); }
    4% { opacity: 1; clip-path: polygon(0% 67%, 100% 67%, 100% 71%, 0% 71%); transform: translate(-2%, 0.4%); }
    6% { opacity: 1; clip-path: polygon(0% 33%, 100% 33%, 100% 41%, 0% 41%); transform: translate(6%, -0.1%); }
    8% { opacity: 1; clip-path: polygon(0% 78%, 100% 78%, 100% 85%, 0% 85%); transform: translate(-4%, 0.3%); }
    10% { opacity: 1; clip-path: polygon(0% 8%, 100% 8%, 100% 15%, 0% 15%); transform: translate(3%, -0.2%); }
    12% { opacity: 1; clip-path: polygon(0% 54%, 100% 54%, 100% 62%, 0% 62%); transform: translate(-5%, 0.1%); }
    13.3%, 100% { opacity: 0; clip-path: none; transform: none; }
}

@keyframes logoGlitch2 {
    0% { opacity: 1; clip-path: polygon(0% 22%, 100% 22%, 100% 29%, 0% 29%); transform: translate(4%, -0.3%); }
    2% { opacity: 1; clip-path: polygon(0% 65%, 100% 65%, 100% 73%, 0% 73%); transform: translate(-5%, 0.2%); }
    4% { opacity: 1; clip-path: polygon(0% 5%, 100% 5%, 100% 12%, 0% 12%); transform: translate(3%, 0.4%); }
    6% { opacity: 1; clip-path: polygon(0% 51%, 100% 51%, 100% 58%, 0% 58%); transform: translate(-6%, -0.1%); }
    8% { opacity: 1; clip-path: polygon(0% 82%, 100% 82%, 100% 89%, 0% 89%); transform: translate(2%, 0.3%); }
    10% { opacity: 1; clip-path: polygon(0% 18%, 100% 18%, 100% 24%, 0% 24%); transform: translate(-4%, -0.2%); }
    12% { opacity: 1; clip-path: polygon(0% 72%, 100% 72%, 100% 79%, 0% 79%); transform: translate(5%, 0.1%); }
    13.3%, 100% { opacity: 0; clip-path: none; transform: none; }
}

/* ===== SP対応 ===== */
@media (max-width: 768px) {
    .opening-animation-section {
        height: 100vh;
        background-color: #0b0b0b;
    }

    /* 英語テキスト */
    .opening-text-pattern {
        position: fixed;
        width: 30vw;
        top: 0 !important;
        left: 0 !important;
        height: 100vh;
        transform: none !important;
    }

    .opening-text-pattern img {
        aspect-ratio: auto;
    }

    /* SP版英語テキストグリッチエフェクト */
    .opening-text-pattern::before,
    .opening-text-pattern::after {
        background-image: url('../img/top/hero_copy01_sp.svg?v=20251030') !important;
        width: 30vw !important;
        height: 100vh !important;
    }

    /* SP版英語テキストCRT消去エフェクト */
    .opening-text-pattern.crt-off {
        animation: crtTurnOffTextSP 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }

    @keyframes crtTurnOffTextSP {
        0% {
            opacity: 1;
            transform: scaleX(1);
            filter: brightness(1);
        }
        20% {
            opacity: 0.8;
            transform: scaleX(1);
            filter: brightness(1.5) contrast(1.5);
        }
        40% {
            opacity: 0.6;
            transform: scaleX(0.9);
            filter: brightness(2) contrast(2);
        }
        60% {
            opacity: 0.3;
            transform: scaleX(0.1);
            filter: brightness(3) contrast(3);
        }
        80% {
            opacity: 0.1;
            transform: scaleX(0.01);
            filter: brightness(4) contrast(5);
        }
        100% {
            opacity: 0;
            visibility: hidden;
            transform: scaleX(0);
            filter: brightness(5) contrast(0);
        }
    }

    /* 車画像 - 初期状態は縮小（車全体が見える - 2/3サイズ、右に移動） */
    .opening-car-image {
        width: 300%;
        left: -110%;
    }

    .opening-car-image img {
        transform: scale(0.67) translateX(5%);
        transform-origin: center center;
    }

    /* 車画像 - ピースで欠けながら切り替え */
    .opening-car-image.zoom-in img {
        animation: pieceDisappear 0.6s steps(1) forwards;
    }

    /* 背景画像 - 初期状態は縮小（2/3サイズ、右に移動） */
    .opening-bg-layer {
        width: 300%;
        left: -110%;
    }

    .opening-bg-layer img {
        transform: scale(0.67) translateX(5%);
        transform-origin: center center;
    }

    /* 背景画像 - ピースで欠けながら切り替え */
    .opening-bg-layer.zoom-in img {
        animation: pieceDisappear 0.6s steps(1) forwards;
    }

    /* イエローデビル風：小さいサイズがピースで欠ける */
    @keyframes pieceDisappear {
        0% {
            transform: scale(0.67) translateX(5%);
            clip-path: inset(0 0 0 0);
        }
        10% {
            transform: scale(0.67) translateX(5%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 80%);
        }
        20% {
            transform: scale(0.67) translateX(5%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
        }
        30% {
            transform: scale(0.67) translateX(5%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 0% 40%);
        }
        40% {
            transform: scale(0.67) translateX(5%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%);
        }
        50% {
            transform: scale(0.67) translateX(5%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
            opacity: 0;
        }
        51% {
            transform: scale(1) translateX(0);
            clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
            opacity: 1;
        }
        60% {
            transform: scale(1) translateX(0);
            clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%);
        }
        70% {
            transform: scale(1) translateX(0);
            clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 0% 40%);
        }
        80% {
            transform: scale(1) translateX(0);
            clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
        }
        90% {
            transform: scale(1) translateX(0);
            clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 80%);
        }
        100% {
            transform: scale(1) translateX(0);
            clip-path: inset(0 0 0 0);
        }
    }

    /* 日本語コピー */
    .opening-copy-jp {
        width: 60vw !important;
        max-width: none !important;
        max-height: 70vh !important;
        top: 40% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        height: auto !important;
        bottom: auto;
    }

    .opening-copy-jp img {
        width: 100%;
        height: auto;
        max-height: 50vh;
        object-fit: contain;
    }

    /* SP版鼓動エフェクト */
    .opening-copy-jp::before,
    .opening-copy-jp::after {
        background-image: url('../img/top/hero_copy02_sp.svg?v=20251030') !important;
    }

    /* SP版再表示時のポジション（slide1と同じ） */
    .opening-copy-jp.reappear {
        width: 14vw !important;
        height: 40vw !important;
        top: 27vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    /* SP版CRT消去エフェクト */
    .opening-copy-jp.crt-off {
        animation: crtTurnOffCopySP 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }

    @keyframes crtTurnOffCopySP {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scaleY(1) scaleX(1);
            filter: brightness(1);
        }
        20% {
            opacity: 0.8;
            transform: translate(-50%, -50%) scaleY(1) scaleX(1);
            filter: brightness(1.5) contrast(1.5);
        }
        40% {
            opacity: 0.6;
            transform: translate(-50%, -50%) scaleY(0.8) scaleX(1.05);
            filter: brightness(2) contrast(2);
        }
        60% {
            opacity: 0.3;
            transform: translate(-50%, -50%) scaleY(0.1) scaleX(1.1);
            filter: brightness(3) contrast(3);
        }
        80% {
            opacity: 0.1;
            transform: translate(-50%, -50%) scaleY(0.01) scaleX(0.95);
            filter: brightness(4) contrast(5);
        }
        100% {
            opacity: 0;
            visibility: hidden;
            transform: translate(-50%, -50%) scaleY(0) scaleX(0);
            filter: brightness(5) contrast(0);
        }
    }

    /* ロゴ */
    .opening-logo {
        top: 1.5rem;
        width: 15vw;
        left: calc(50% - 7.5vw);
    }

}

/* ============================================ */
/* Glitch Effect */
/* ============================================ */
.glitch-effect::before,
.glitch-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.opening-bg-layer.glitch-effect::before,
.opening-bg-layer.glitch-effect::after {
    background-image: url('../img/top/bg_img01.png?v=20251030');
    background-size: cover;
}

.opening-car-image.glitch-effect::before,
.opening-car-image.glitch-effect::after {
    background-image: url('../img/top/FV_img01.png?v=20251030');
    background-size: cover;
}

.opening-text-pattern.glitch-effect::before,
.opening-text-pattern.glitch-effect::after {
    background-image: url('../img/top/hero_copy01.svg?v=20251030');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.glitch-effect::before {
    animation: glitch-before 3s linear 1 alternate both;
    filter: hue-rotate(120deg);
}

.glitch-effect::after {
    animation: glitch-after 3s linear 1 alternate both;
    filter: hue-rotate(240deg);
}

@keyframes glitch-before {
    0% { opacity: 1; clip-path: polygon(0% 45%, 100% 45%, 100% 52%, 0% 52%); transform: translate(-3%, 0.2%); }
    2% { opacity: 1; clip-path: polygon(0% 12%, 100% 12%, 100% 19%, 0% 19%); transform: translate(5%, -0.3%); }
    4% { opacity: 1; clip-path: polygon(0% 67%, 100% 67%, 100% 71%, 0% 71%); transform: translate(-2%, 0.4%); }
    6% { opacity: 1; clip-path: polygon(0% 33%, 100% 33%, 100% 41%, 0% 41%); transform: translate(6%, -0.1%); }
    8% { opacity: 1; clip-path: polygon(0% 78%, 100% 78%, 100% 85%, 0% 85%); transform: translate(-4%, 0.3%); }
    10% { opacity: 1; clip-path: polygon(0% 8%, 100% 8%, 100% 15%, 0% 15%); transform: translate(3%, -0.2%); }
    12% { opacity: 1; clip-path: polygon(0% 54%, 100% 54%, 100% 62%, 0% 62%); transform: translate(-5%, 0.1%); }
    13.3%, 100% { opacity: 0; clip-path: none; transform: none; }
}

@keyframes glitch-after {
    0% { opacity: 1; clip-path: polygon(0% 22%, 100% 22%, 100% 29%, 0% 29%); transform: translate(4%, -0.3%); }
    2% { opacity: 1; clip-path: polygon(0% 65%, 100% 65%, 100% 73%, 0% 73%); transform: translate(-5%, 0.2%); }
    4% { opacity: 1; clip-path: polygon(0% 5%, 100% 5%, 100% 12%, 0% 12%); transform: translate(3%, 0.4%); }
    6% { opacity: 1; clip-path: polygon(0% 51%, 100% 51%, 100% 58%, 0% 58%); transform: translate(-6%, -0.1%); }
    8% { opacity: 1; clip-path: polygon(0% 82%, 100% 82%, 100% 89%, 0% 89%); transform: translate(2%, 0.3%); }
    10% { opacity: 1; clip-path: polygon(0% 18%, 100% 18%, 100% 24%, 0% 24%); transform: translate(-4%, -0.2%); }
    12% { opacity: 1; clip-path: polygon(0% 72%, 100% 72%, 100% 79%, 0% 79%); transform: translate(5%, 0.1%); }
    13.3%, 100% { opacity: 0; clip-path: none; transform: none; }
}

/* === 中くらいのグリッチエフェクト（PC版2回目用） === */
.glitch-effect-medium::before,
.glitch-effect-medium::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.opening-bg-layer.glitch-effect-medium::before,
.opening-bg-layer.glitch-effect-medium::after {
    background-image: url('../img/top/bg_img01.png?v=20251030');
    background-size: cover;
}

.opening-car-image.glitch-effect-medium::before,
.opening-car-image.glitch-effect-medium::after {
    background-image: url('../img/top/FV_img01.png?v=20251030');
    background-size: cover;
}

.glitch-effect-medium::before {
    animation: glitch-medium-before 1s linear 1 alternate both;
    filter: hue-rotate(120deg);
}

.glitch-effect-medium::after {
    animation: glitch-medium-after 1s linear 1 alternate both;
    filter: hue-rotate(240deg);
}

@keyframes glitch-medium-before {
    0% { opacity: 1; clip-path: polygon(0% 45%, 100% 45%, 100% 50%, 0% 50%); transform: translate(-2%, 0.15%); }
    10% { opacity: 1; clip-path: polygon(0% 12%, 100% 12%, 100% 17%, 0% 17%); transform: translate(3%, -0.2%); }
    20% { opacity: 1; clip-path: polygon(0% 67%, 100% 67%, 100% 71%, 0% 71%); transform: translate(-1.5%, 0.25%); }
    30% { opacity: 1; clip-path: polygon(0% 33%, 100% 33%, 100% 38%, 0% 38%); transform: translate(4%, -0.1%); }
    40% { opacity: 1; clip-path: polygon(0% 78%, 100% 78%, 100% 83%, 0% 83%); transform: translate(-2.5%, 0.2%); }
    50% { opacity: 1; clip-path: polygon(0% 8%, 100% 8%, 100% 13%, 0% 13%); transform: translate(2%, -0.15%); }
    60% { opacity: 1; clip-path: polygon(0% 54%, 100% 54%, 100% 59%, 0% 59%); transform: translate(-3%, 0.1%); }
    70% { opacity: 0.8; clip-path: polygon(0% 25%, 100% 25%, 100% 30%, 0% 30%); transform: translate(2.5%, -0.1%); }
    80% { opacity: 0.6; clip-path: polygon(0% 60%, 100% 60%, 100% 65%, 0% 65%); transform: translate(-1%, 0.05%); }
    90% { opacity: 0.3; clip-path: polygon(0% 40%, 100% 40%, 100% 45%, 0% 45%); transform: translate(1%, 0%); }
    100% { opacity: 0; clip-path: none; transform: none; }
}

@keyframes glitch-medium-after {
    0% { opacity: 1; clip-path: polygon(0% 22%, 100% 22%, 100% 27%, 0% 27%); transform: translate(2.5%, -0.2%); }
    10% { opacity: 1; clip-path: polygon(0% 65%, 100% 65%, 100% 70%, 0% 70%); transform: translate(-3%, 0.15%); }
    20% { opacity: 1; clip-path: polygon(0% 5%, 100% 5%, 100% 10%, 0% 10%); transform: translate(2%, 0.25%); }
    30% { opacity: 1; clip-path: polygon(0% 51%, 100% 51%, 100% 56%, 0% 56%); transform: translate(-4%, -0.1%); }
    40% { opacity: 1; clip-path: polygon(0% 89%, 100% 89%, 100% 94%, 0% 94%); transform: translate(2.5%, 0.2%); }
    50% { opacity: 1; clip-path: polygon(0% 37%, 100% 37%, 100% 42%, 0% 42%); transform: translate(-2%, -0.15%); }
    60% { opacity: 1; clip-path: polygon(0% 71%, 100% 71%, 100% 76%, 0% 76%); transform: translate(3%, 0.1%); }
    70% { opacity: 0.8; clip-path: polygon(0% 15%, 100% 15%, 100% 20%, 0% 20%); transform: translate(-2%, 0.05%); }
    80% { opacity: 0.6; clip-path: polygon(0% 55%, 100% 55%, 100% 60%, 0% 60%); transform: translate(1.5%, -0.05%); }
    90% { opacity: 0.3; clip-path: polygon(0% 80%, 100% 80%, 100% 85%, 0% 85%); transform: translate(-1%, 0%); }
    100% { opacity: 0; clip-path: none; transform: none; }
}

/* ============================================ */
/* SP用グリッチエフェクト上書き（PC設定の後に配置） */
/* ============================================ */
@media (max-width: 768px) {
    .opening-text-pattern.glitch-effect::before,
    .opening-text-pattern.glitch-effect::after {
        background-image: url('../img/top/hero_copy01_sp.svg?v=20251030') !important;
        width: 30vw !important;
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center left !important;
    }
}