/* ブラインド（カメラ ON/OFF）— ヘッダーのシャッタートグル */
.camera-blind-toggle[aria-pressed="true"] {
    color: #ffffff;
    background: linear-gradient(180deg, #3a424c 0%, #2e353d 48%, #252c34 100%);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(212, 40, 40, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.14);
}

.camera-blind {
    position: absolute;
    inset: 0;
    z-index: 0.25;
    pointer-events: none;
    overflow: hidden;
}

.camera-blind__slats {
    position: absolute;
    inset: 0;
    transform: translateY(-101%);
    background-color: #c8c8c8;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center top;
    filter: brightness(0.82);
}

.camera-blind--shutter-1 .camera-blind__slats {
    background-image: url("../../public/images/shutter_images/shutter_1.png");
}

.camera-blind--shutter-2 .camera-blind__slats {
    background-image: url("../../public/images/shutter_images/shutter_2.png");
}

.camera-blind--shutter-3 .camera-blind__slats {
    background-image: url("../../public/images/shutter_images/shutter_3.png");
}

.camera-blind.is-closed .camera-blind__slats {
    transform: translateY(0);
}

/* A: 途中でよく止まる */
@keyframes camera-blind-shutter-close-a {
    0% { transform: translateY(-101%); }
    22% { transform: translateY(-68%); }
    38% { transform: translateY(-58%); }
    52% { transform: translateY(-38%); }
    66% { transform: translateY(-30%); }
    80% { transform: translateY(-10%); }
    92% { transform: translateY(-3%); }
    100% { transform: translateY(0); }
}

@keyframes camera-blind-shutter-open-a {
    0% { transform: translateY(0); }
    10% { transform: translateY(-4%); }
    26% { transform: translateY(-14%); }
    42% { transform: translateY(-32%); }
    58% { transform: translateY(-42%); }
    74% { transform: translateY(-66%); }
    88% { transform: translateY(-82%); }
    100% { transform: translateY(-101%); }
}

/* B: 最初ゆっくり → 一気に → 終わり慎重 */
@keyframes camera-blind-shutter-close-b {
    0% { transform: translateY(-101%); }
    14% { transform: translateY(-88%); }
    26% { transform: translateY(-46%); }
    34% { transform: translateY(-42%); }
    50% { transform: translateY(-24%); }
    64% { transform: translateY(-19%); }
    82% { transform: translateY(-6%); }
    100% { transform: translateY(0); }
}

@keyframes camera-blind-shutter-open-b {
    0% { transform: translateY(0); }
    12% { transform: translateY(-6%); }
    28% { transform: translateY(-18%); }
    44% { transform: translateY(-36%); }
    56% { transform: translateY(-44%); }
    70% { transform: translateY(-62%); }
    86% { transform: translateY(-86%); }
    100% { transform: translateY(-101%); }
}

/* C: 最初にグイッ → 後半ずっーっとゆっくり */
@keyframes camera-blind-shutter-close-c {
    0% { transform: translateY(-101%); }
    10% { transform: translateY(-52%); }
    18% { transform: translateY(-47%); }
    34% { transform: translateY(-28%); }
    48% { transform: translateY(-23%); }
    62% { transform: translateY(-13%); }
    76% { transform: translateY(-8%); }
    90% { transform: translateY(-2%); }
    100% { transform: translateY(0); }
}

@keyframes camera-blind-shutter-open-c {
    0% { transform: translateY(0); }
    8% { transform: translateY(-2%); }
    22% { transform: translateY(-10%); }
    38% { transform: translateY(-24%); }
    52% { transform: translateY(-32%); }
    66% { transform: translateY(-52%); }
    80% { transform: translateY(-72%); }
    92% { transform: translateY(-92%); }
    100% { transform: translateY(-101%); }
}

.camera-blind.is-closing.camera-blind--curve-a .camera-blind__slats {
    animation: camera-blind-shutter-close-a 0.88s linear forwards;
}

.camera-blind.is-opening.camera-blind--curve-a .camera-blind__slats {
    animation: camera-blind-shutter-open-a 0.82s linear forwards;
}

.camera-blind.is-closing.camera-blind--curve-b .camera-blind__slats {
    animation: camera-blind-shutter-close-b 0.92s linear forwards;
}

.camera-blind.is-opening.camera-blind--curve-b .camera-blind__slats {
    animation: camera-blind-shutter-open-b 0.86s linear forwards;
}

.camera-blind.is-closing.camera-blind--curve-c .camera-blind__slats {
    animation: camera-blind-shutter-close-c 0.96s linear forwards;
}

.camera-blind.is-opening.camera-blind--curve-c .camera-blind__slats {
    animation: camera-blind-shutter-open-c 0.9s linear forwards;
}

@media (prefers-reduced-motion: reduce) {
    .camera-blind.is-closing .camera-blind__slats,
    .camera-blind.is-opening .camera-blind__slats {
        animation: none;
    }
}