/* --------------------------------------------------
   File: site.troubles-anim.css
   担当:
   - お悩みタイル内SVGの個別調整
   - 各種 keyframes / アニメーション定義
   - エフェクト系の微調整
-------------------------------------------------- */

    @keyframes ttFanSpinNoise {
      0% {
        transform: rotate(0deg);
      }

      /* 33.33% ≒ 1秒: 720° = 1秒2回転 */
      33.333% {
        transform: rotate(720deg);
      }

      /* 勢いよく減速・逆転まがいのガタつき */
      34% {
        transform: rotate(698deg);
      }

      34.6% {
        transform: rotate(748deg);
      }

      35.2% {
        transform: rotate(705deg);
      }

      35.8% {
        transform: rotate(738deg);
      }

      36.5% {
        transform: rotate(712deg);
      }

      37.2% {
        transform: rotate(728deg);
      }

      38% {
        transform: rotate(718deg);
      }

      39% {
        transform: rotate(724deg);
      }

      40.5% {
        transform: rotate(720deg);
      }

      /* 細かく震えて止まる */
      43% {
        transform: rotate(717deg);
      }

      46% {
        transform: rotate(723deg);
      }

      50% {
        transform: rotate(719deg);
      }

      55% {
        transform: rotate(721deg);
      }

      62% {
        transform: rotate(720deg);
      }

      72% {
        transform: rotate(719.2deg);
      }

      82% {
        transform: rotate(720.5deg);
      }

      92% {
        transform: rotate(719.6deg);
      }

      100% {
        transform: rotate(720deg);
      }
    }

    /* 異音タイル：正方形＋ねじ4箇所＋ファン＋騒音ライン（tt-noise-fan-svg のみ） */
    #trouble-tile-3 .tt-noise-fan-svg .tt-fan-spin {
      animation: ttFanSpinNoise 3s linear infinite;
      transform-origin: 24px 27px;
    }

    #trouble-tile-3 .trouble-tile__viz svg {
      transform: translate(-2px, -2px);
    }

    #trouble-tile-3 .tt-noise-fan-svg .tt-fan-frame-outline {
      stroke: #d2d2d7 !important;
      stroke-width: 0.5 !important;
      fill: none !important;
    }

    #trouble-tile-3 .tt-noise-fan-svg .tt-sound-ring {
      transform-origin: 24px 27px;
    }

    #trouble-tile-3 .tt-noise-fan-svg .tt-sound-ring--u {
      animation: ttNoiseBurst 1.05s steps(1, end) infinite, ttNoiseOutUpSafe 1.05s ease-out infinite;
    }

    #trouble-tile-3 .tt-noise-fan-svg .tt-sound-ring--m {
      animation: ttNoiseBurst 1.05s steps(1, end) infinite, ttNoiseOutMidSafe 1.05s ease-out infinite;
      animation-delay: 0.18s, 0.18s;
    }

    #trouble-tile-3 .tt-noise-fan-svg .tt-sound-ring--d {
      animation: ttNoiseBurst 1.05s steps(1, end) infinite, ttNoiseOutDownSafe 1.05s ease-out infinite;
      animation-delay: 0.36s, 0.36s;
    }

    #trouble-tile-3 .tt-noise-fan-svg .tt-sound-ring .tt-sound-ring-stroke {
      fill: #f2891a !important;
      stroke: none !important;
    }

    #trouble-tile-3 .tt-noise-fan-svg .tt-sound-ring .tt-sound-ring-line {
      fill: #ffd338 !important;
      stroke: none !important;
    }

    #trouble-tile-3 .tt-noise-fan-svg .tt-sound-ring--m .tt-sound-ring-line {
      opacity: 0.98;
    }

    #trouble-tile-3 .tt-noise-fan-svg .tt-sound-ring--d .tt-sound-ring-line {
      opacity: 0.94;
    }

    @keyframes ttNoiseBurst {
      0% { opacity: 1; }
      14% { opacity: 0.96; }
      26% { opacity: 0.18; }
      38% { opacity: 0.92; }
      50% { opacity: 0.15; }
      62% { opacity: 0.88; }
      74% { opacity: 0.12; }
      100% { opacity: 0; }
    }

    @keyframes ttNoiseOutUpSafe {
      0% { transform: translate(0, 0) scale(0.9) rotate(-2deg); }
      45% { transform: translate(1.1px, -1px) scale(1.04) rotate(0.8deg); }
      100% { transform: translate(2.2px, -2px) scale(1.1) rotate(2.2deg); }
    }

    @keyframes ttNoiseOutMidSafe {
      0% { transform: translate(0, 0) scale(0.9) rotate(0deg); }
      45% { transform: translate(1.2px, 0) scale(1.04) rotate(0.6deg); }
      100% { transform: translate(2.5px, 0) scale(1.1) rotate(1.1deg); }
    }

    @keyframes ttNoiseOutDownSafe {
      0% { transform: translate(0, 0) scale(0.9) rotate(2deg); }
      45% { transform: translate(1.1px, 1px) scale(1.04) rotate(-0.8deg); }
      100% { transform: translate(2.2px, 2px) scale(1.1) rotate(-2.2deg); }
    }

    /* キーボード：symbol 内 scale(1.42) 済み。カルーセルは他タイルと同じ SVG 上限を使う */
    .troubles-carousel #trouble-tile-4.trouble-tile--laptop .trouble-tile__viz svg {
      transform: none;
    }

    .troubles-carousel #trouble-tile-4 .trouble-tile__viz svg {
      width: 100%;
      max-width: var(--trouble-tile-svg-max-w, 118px);
      max-height: var(--trouble-tile-svg-max-h, 102px);
    }

    /* キーボード故障：3キーが別方向へ弾ける／右上付近は連打（1.8s・位相ずらし） */
    #trouble-tile-4 .tt-kb-poppers .tt-key-cap {
      transform-origin: center;
    }

    #trouble-tile-4 .tt-key-pop {
      transform-origin: 0 0;
    }

    #trouble-tile-4 .tt-key-pop--a {
      animation: ttKeyPopA 1.8s ease-in-out infinite;
    }

    #trouble-tile-4 .tt-key-pop--b {
      transform-origin: center center;
      animation: ttKeyRapid 0.16s linear infinite;
    }

    #trouble-tile-4 .tt-key-pop--c {
      animation: ttKeyPopC 1.8s ease-in-out infinite;
      animation-delay: 0.12s;
    }

    #trouble-tile-4 .tt-key-pop--d {
      animation: ttKeyPopD 1.8s ease-in-out infinite;
      animation-delay: 0.2s;
    }

    @keyframes ttKeyRapid {
      0%, 100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(0.28px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #trouble-tile-4 .tt-key-pop--b {
        animation: none;
        transform: translateY(0);
      }
    }

    /* 左上へ */
    @keyframes ttKeyPopA {
      0%, 29% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
      }

      32% {
        transform: translate(0, 1.05px) scale(0.94) rotate(0deg);
        opacity: 1;
      }

      38% {
        transform: translate(-3px, -4px) rotate(-12deg);
        opacity: 1;
      }

      50% {
        transform: translate(-10px, -14px) rotate(-28deg);
        opacity: 1;
      }

      62% {
        transform: translate(-19px, -26px) rotate(-46deg);
        opacity: 0;
      }

      63% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
      }

      64%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
      }
    }

    /* 右下へ */
    @keyframes ttKeyPopC {
      0%, 29% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
      }

      32% {
        transform: translate(0, 1.05px) scale(0.94) rotate(0deg);
        opacity: 1;
      }

      38% {
        transform: translate(4px, 5px) rotate(11deg);
        opacity: 1;
      }

      50% {
        transform: translate(12px, 16px) rotate(26deg);
        opacity: 1;
      }

      62% {
        transform: translate(18px, 28px) rotate(42deg);
        opacity: 0;
      }

      63% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
      }

      64%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
      }
    }

    /* 左下へ */
    @keyframes ttKeyPopD {
      0%, 29% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
      }

      32% {
        transform: translate(0, 1.05px) scale(0.94) rotate(0deg);
        opacity: 1;
      }

      38% {
        transform: translate(-4px, 4px) rotate(-11deg);
        opacity: 1;
      }

      50% {
        transform: translate(-12px, 13px) rotate(-24deg);
        opacity: 1;
      }

      62% {
        transform: translate(-21px, 24px) rotate(-44deg);
        opacity: 0;
      }

      63% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
      }

      64%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
      }
    }

    .tt-err-spin {
      transform-origin: 0 0;
      animation: ttErrSpin 0.9s linear infinite;
    }

    @keyframes ttErrSpin {
      to { transform: rotate(360deg); }
    }

    .tt-bin-bit {
      transform-origin: center;
      opacity: 0;
    }

    .tt-bin-bit--upper {
      animation: ttBinFlowUpper 0.8s linear infinite;
    }

    .tt-bin-bit--lower {
      animation: ttBinFlowLower 0.8s linear infinite;
    }

    .tt-bin-bit.tt-b2 { animation-delay: 0.16s; }
    .tt-bin-bit.tt-b3 { animation-delay: 0.32s; }
    .tt-bin-bit.tt-b4 { animation-delay: 0.48s; }
    .tt-bin-bit.tt-b5 { animation-delay: 0.64s; }
    .tt-bin-bit.tt-b6 { animation-delay: 0.8s; }
    .tt-bin-bit.tt-b7 { animation-delay: 0.96s; }
    .tt-bin-bit.tt-b8 { animation-delay: 1.12s; }
    .tt-bin-bit.tt-b9 { animation-delay: 1.28s; }

    /* フォルダ上端〜開口付近 → HDD 方向の対角（上段はより浅い角度でタブ側から） */
    @keyframes ttBinFlowUpper {
      0% { opacity: 0; transform: translate(0, 0) scale(0.95); }
      8% { opacity: 0.95; }
      30% { opacity: 0.9; }
      40% { opacity: 0; }
      100% { opacity: 0; transform: translate(11px, 20px) scale(1.02); }
    }

    @keyframes ttBinFlowLower {
      0% { opacity: 0; transform: translate(0, 0) scale(0.95); }
      8% { opacity: 0.95; }
      30% { opacity: 0.9; }
      40% { opacity: 0; }
      100% { opacity: 0; transform: translate(11px, 23px) scale(1.02); }
    }

    @keyframes ttPowerPress {
      0%, 100% {
        transform: scale(1);
      }

      6% {
        transform: scale(0.955);
      }

      12% {
        transform: scale(0.99);
      }

      20% {
        transform: scale(0.965);
      }

      28% {
        transform: scale(1);
      }
    }

    @keyframes ttPowerQuestionOrbitA {
      0% {
        transform: rotate(0deg) translateX(552px) rotate(0deg);
      }
      100% {
        transform: rotate(360deg) translateX(552px) rotate(-360deg);
      }
    }

    @keyframes ttPowerQuestionOrbitB {
      0% {
        transform: rotate(130deg) translateX(484px) rotate(-130deg);
      }
      100% {
        transform: rotate(-230deg) translateX(484px) rotate(230deg);
      }
    }

    @keyframes ttPowerQuestionOrbitC {
      0% {
        transform: rotate(245deg) translateX(428px) rotate(-245deg);
      }
      100% {
        transform: rotate(605deg) translateX(428px) rotate(-605deg);
      }
    }