@charset "UTF-8";
/* ===== 重ね合わせレイアウトの基本設定（新構造対応） ===== */
#dark {
  position: relative;
  width: 100%;
  z-index: 1;
  min-height: 100vh;
}
#dark.ifarea.dark {
  position: relative;
  z-index: 1;
}

#front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
#front.light {
  position: absolute;
  z-index: 2;
}

.glitch-container.dark-mode-active #front {
  display: none !important;
}
.glitch-container.dark-mode-active #dark {
  position: relative;
  z-index: 1;
}

.glitch-container.glitch-cyber-active #dark {
  z-index: 3 !important;
}
.glitch-container.glitch-cyber-active #front {
  z-index: 2 !important;
}

/* グリッチエフェクト用スタイル（新構造対応） */
.glitch-container {
  position: relative;
  overflow: hidden;
  --glitch-intensity: 0.6;
  --transform-intensity: 12px;
  --filter-intensity: 1.2;
}

/* スクロール進行度に応じたグリッチ強度変化 */
.glitch-container.scroll-glitch-low {
  --scroll-intensity: 0.2;
}

.glitch-container.scroll-glitch-medium {
  --scroll-intensity: 0.5;
}

.glitch-container.scroll-glitch-high {
  --scroll-intensity: 0.8;
}

.glitch-container.scroll-glitch-max {
  --scroll-intensity: 1;
}

.glitch-container.glitch-cyber-active #front {
  animation: cyber-glitch-front var(--glitch-duration, 0.5s) linear;
  z-index: 2 !important;
}
.glitch-container.glitch-cyber-active #dark {
  animation: cyber-glitch-back var(--glitch-duration, 0.5s) linear;
  z-index: 3 !important;
}

/* RGB分離エフェクト（新構造対応） */
.glitch-container.rgb-split-active #front::before,
.glitch-container.rgb-split-active #front::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  z-index: -1;
}
.glitch-container.rgb-split-active #front::before {
  animation: rgb-split-red var(--glitch-duration, 0.5s) linear infinite;
  mix-blend-mode: screen;
  filter: sepia(1) hue-rotate(320deg) saturate(5) brightness(1.5);
}
.glitch-container.rgb-split-active #front::after {
  animation: rgb-split-blue var(--glitch-duration, 0.5s) linear infinite;
  mix-blend-mode: screen;
  filter: sepia(1) hue-rotate(180deg) saturate(5) brightness(1.5);
}

/* サイバーグリッチアニメーション - 表面 */
@keyframes cyber-glitch-front {
  0% {
    opacity: 1;
    transform: translate(0) scale(1) skew(0deg);
    filter: brightness(1) contrast(1) hue-rotate(0deg) saturate(1);
  }
  5% {
    opacity: calc(1 - var(--glitch-intensity) * 0.1);
    transform: translate(calc(var(--transform-intensity) * -0.25), calc(var(--transform-intensity) * 0.08)) scale(calc(1 + var(--glitch-intensity) * 0.01)) skew(calc(var(--glitch-intensity) * 0.2deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 0.3)) contrast(calc(1 + var(--filter-intensity) * 0.8)) hue-rotate(calc(var(--glitch-intensity) * 10deg)) saturate(calc(1 + var(--filter-intensity) * 0.5));
  }
  10% {
    opacity: calc(1 - var(--glitch-intensity) * 0.3);
    transform: translate(calc(var(--transform-intensity) * 0.42), calc(var(--transform-intensity) * -0.17)) scale(calc(1 - var(--glitch-intensity) * 0.01)) skew(calc(var(--glitch-intensity) * -0.3deg));
    filter: brightness(calc(1 - var(--filter-intensity) * 0.3)) contrast(calc(1 + var(--filter-intensity) * 1.5)) hue-rotate(calc(var(--glitch-intensity) * -20deg)) saturate(calc(1 + var(--filter-intensity) * 1));
  }
  15% {
    opacity: calc(1 - var(--glitch-intensity) * 0.6);
    transform: translate(calc(var(--transform-intensity) * -0.67), calc(var(--transform-intensity) * 0.25)) scale(calc(1 + var(--glitch-intensity) * 0.02)) skew(calc(var(--glitch-intensity) * 0.5deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 0.8)) contrast(calc(1 - var(--filter-intensity) * 0.2)) hue-rotate(calc(var(--glitch-intensity) * 45deg)) saturate(calc(1 - var(--filter-intensity) * 0.5));
  }
  20% {
    opacity: calc(1 - var(--glitch-intensity) * 0.8);
    transform: translate(calc(var(--transform-intensity) * 1), calc(var(--transform-intensity) * -0.08)) scale(calc(1 - var(--glitch-intensity) * 0.02)) skew(calc(var(--glitch-intensity) * -0.8deg));
    filter: brightness(calc(1 - var(--filter-intensity) * 0.6)) contrast(calc(1 + var(--filter-intensity) * 2.5)) hue-rotate(calc(var(--glitch-intensity) * -60deg)) saturate(calc(1 + var(--filter-intensity) * 2));
  }
  25% {
    opacity: calc(1 - var(--glitch-intensity) * 0.9);
    transform: translate(calc(var(--transform-intensity) * -0.5), calc(var(--transform-intensity) * 0.33)) scale(calc(1 + var(--glitch-intensity) * 0.03)) skew(calc(var(--glitch-intensity) * 1deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 1.2)) contrast(calc(1 - var(--filter-intensity) * 0.5)) hue-rotate(calc(var(--glitch-intensity) * 90deg)) saturate(calc(1 - var(--filter-intensity) * 0.7));
  }
  30% {
    opacity: calc(1 - var(--glitch-intensity) * 0.95);
    transform: translate(calc(var(--transform-intensity) * 1.25), calc(var(--transform-intensity) * -0.42)) scale(calc(1 - var(--glitch-intensity) * 0.03)) skew(calc(var(--glitch-intensity) * -1.2deg));
    filter: brightness(calc(1 - var(--filter-intensity) * 0.8)) contrast(calc(1 + var(--filter-intensity) * 3)) hue-rotate(calc(var(--glitch-intensity) * -120deg)) saturate(calc(1 + var(--filter-intensity) * 3));
  }
  35% {
    opacity: calc(1 - var(--glitch-intensity) * 0.98);
    transform: translate(calc(var(--transform-intensity) * -0.83), calc(var(--transform-intensity) * 0.17)) scale(calc(1 + var(--glitch-intensity) * 0.04)) skew(calc(var(--glitch-intensity) * 0.7deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 2)) contrast(calc(1 - var(--filter-intensity) * 0.7)) hue-rotate(calc(var(--glitch-intensity) * 150deg)) saturate(calc(1 - var(--filter-intensity) * 0.9));
  }
  40% {
    opacity: calc(1 - var(--glitch-intensity));
    transform: translate(calc(var(--transform-intensity) * 1.67), calc(var(--transform-intensity) * -0.25)) scale(calc(1 - var(--glitch-intensity) * 0.04)) skew(calc(var(--glitch-intensity) * -1.5deg));
    filter: brightness(calc(1 - var(--filter-intensity) * 0.9)) contrast(calc(1 + var(--filter-intensity) * 4)) hue-rotate(calc(var(--glitch-intensity) * -180deg)) saturate(calc(1 + var(--filter-intensity) * 4));
  }
  45% {
    opacity: calc(1 - var(--glitch-intensity) * 0.97);
    transform: translate(calc(var(--transform-intensity) * -1), calc(var(--transform-intensity) * 0.5)) scale(calc(1 + var(--glitch-intensity) * 0.05)) skew(calc(var(--glitch-intensity) * 1.3deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 1.5)) contrast(calc(1 - var(--filter-intensity) * 0.6)) hue-rotate(calc(var(--glitch-intensity) * 210deg)) saturate(calc(1 - var(--filter-intensity) * 0.8));
  }
  50% {
    opacity: calc(1 - var(--glitch-intensity) * 0.92);
    transform: translate(calc(var(--transform-intensity) * 1.5), calc(var(--transform-intensity) * -0.33)) scale(calc(1 - var(--glitch-intensity) * 0.05)) skew(calc(var(--glitch-intensity) * -0.9deg));
    filter: brightness(calc(1 - var(--filter-intensity) * 0.7)) contrast(calc(1 + var(--filter-intensity) * 3.5)) hue-rotate(calc(var(--glitch-intensity) * -240deg)) saturate(calc(1 + var(--filter-intensity) * 3.5));
  }
  55% {
    opacity: calc(1 - var(--glitch-intensity) * 0.85);
    transform: translate(calc(var(--transform-intensity) * -1.17), calc(var(--transform-intensity) * 0.08)) scale(calc(1 + var(--glitch-intensity) * 0.06)) skew(calc(var(--glitch-intensity) * 0.6deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 0.9)) contrast(calc(1 - var(--filter-intensity) * 0.3)) hue-rotate(calc(var(--glitch-intensity) * 270deg)) saturate(calc(1 - var(--filter-intensity) * 0.6));
  }
  60% {
    opacity: calc(1 - var(--glitch-intensity) * 0.7);
    transform: translate(calc(var(--transform-intensity) * 0.83), calc(var(--transform-intensity) * -0.58)) scale(calc(1 - var(--glitch-intensity) * 0.02)) skew(calc(var(--glitch-intensity) * -0.4deg));
    filter: brightness(calc(1 - var(--filter-intensity) * 0.4)) contrast(calc(1 + var(--filter-intensity) * 2)) hue-rotate(calc(var(--glitch-intensity) * -300deg)) saturate(calc(1 + var(--filter-intensity) * 1.5));
  }
  65% {
    opacity: calc(1 - var(--glitch-intensity) * 0.5);
    transform: translate(calc(var(--transform-intensity) * -0.58), calc(var(--transform-intensity) * 0.25)) scale(calc(1 + var(--glitch-intensity) * 0.02)) skew(calc(var(--glitch-intensity) * 0.2deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 0.4)) contrast(calc(1 + var(--filter-intensity) * 0.5)) hue-rotate(calc(var(--glitch-intensity) * 330deg)) saturate(calc(1 + var(--filter-intensity) * 0.3));
  }
  70% {
    opacity: calc(1 - var(--glitch-intensity) * 0.3);
    transform: translate(calc(var(--transform-intensity) * 0.33), calc(var(--transform-intensity) * -0.17)) scale(calc(1 - var(--glitch-intensity) * 0.01)) skew(calc(var(--glitch-intensity) * -0.1deg));
    filter: brightness(calc(1 - var(--filter-intensity) * 0.2)) contrast(calc(1 + var(--filter-intensity) * 1.2)) hue-rotate(calc(var(--glitch-intensity) * -30deg)) saturate(calc(1 + var(--filter-intensity) * 0.8));
  }
  75% {
    opacity: calc(1 - var(--glitch-intensity) * 0.2);
    transform: translate(calc(var(--transform-intensity) * -0.17), calc(var(--transform-intensity) * 0.08)) scale(calc(1 + var(--glitch-intensity) * 0.01)) skew(calc(var(--glitch-intensity) * 0.05deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 0.2)) contrast(calc(1 + var(--filter-intensity) * 0.3)) hue-rotate(calc(var(--glitch-intensity) * 15deg)) saturate(calc(1 + var(--filter-intensity) * 0.2));
  }
  80% {
    opacity: calc(1 - var(--glitch-intensity) * 0.1);
    transform: translate(calc(var(--transform-intensity) * 0.08), calc(var(--transform-intensity) * -0.08)) scale(1) skew(calc(var(--glitch-intensity) * -0.02deg));
    filter: brightness(calc(1 - var(--filter-intensity) * 0.1)) contrast(calc(1 + var(--filter-intensity) * 0.7)) hue-rotate(calc(var(--glitch-intensity) * -10deg)) saturate(calc(1 + var(--filter-intensity) * 0.4));
  }
  85% {
    opacity: calc(1 - var(--glitch-intensity) * 0.05);
    transform: translate(calc(var(--transform-intensity) * -0.08), calc(var(--transform-intensity) * 0.04)) scale(1) skew(calc(var(--glitch-intensity) * 0.01deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 0.1)) contrast(calc(1 + var(--filter-intensity) * 0.4)) hue-rotate(calc(var(--glitch-intensity) * 5deg)) saturate(calc(1 + var(--filter-intensity) * 0.1));
  }
  90% {
    opacity: calc(1 - var(--glitch-intensity) * 0.02);
    transform: translate(calc(var(--transform-intensity) * 0.04), calc(var(--transform-intensity) * -0.03)) scale(1) skew(0deg);
    filter: brightness(calc(1 - var(--filter-intensity) * 0.05)) contrast(calc(1 + var(--filter-intensity) * 0.2)) hue-rotate(calc(var(--glitch-intensity) * -3deg)) saturate(calc(1 + var(--filter-intensity) * 0.05));
  }
  95% {
    opacity: calc(1 - var(--glitch-intensity) * 0.01);
    transform: translate(calc(var(--transform-intensity) * -0.02), calc(var(--transform-intensity) * 0.01)) scale(1) skew(0deg);
    filter: brightness(calc(1 + var(--filter-intensity) * 0.05)) contrast(calc(1 + var(--filter-intensity) * 0.1)) hue-rotate(calc(var(--glitch-intensity) * 2deg)) saturate(calc(1 + var(--filter-intensity) * 0.02));
  }
  100% {
    opacity: 1;
    transform: translate(0) scale(1) skew(0deg);
    filter: brightness(1) contrast(1) hue-rotate(0deg) saturate(1);
  }
}
/* サイバーグリッチアニメーション - 裏面 */
@keyframes cyber-glitch-back {
  0% {
    opacity: 0;
    transform: translate(0) scale(1) skew(0deg);
    filter: brightness(1) contrast(1) hue-rotate(0deg) saturate(1) invert(0);
  }
  5% {
    opacity: calc(var(--glitch-intensity) * 0.1);
    transform: translate(calc(var(--transform-intensity) * 0.25), calc(var(--transform-intensity) * -0.08)) scale(calc(1 - var(--glitch-intensity) * 0.01)) skew(calc(var(--glitch-intensity) * -0.2deg));
    filter: brightness(calc(1 - var(--filter-intensity) * 0.3)) contrast(calc(1 + var(--filter-intensity) * 0.8)) hue-rotate(calc(var(--glitch-intensity) * -10deg)) saturate(calc(1 + var(--filter-intensity) * 0.5)) invert(calc(var(--glitch-intensity) * 0.1));
  }
  10% {
    opacity: calc(var(--glitch-intensity) * 0.3);
    transform: translate(calc(var(--transform-intensity) * -0.42), calc(var(--transform-intensity) * 0.17)) scale(calc(1 + var(--glitch-intensity) * 0.01)) skew(calc(var(--glitch-intensity) * 0.3deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 0.3)) contrast(calc(1 + var(--filter-intensity) * 1.5)) hue-rotate(calc(var(--glitch-intensity) * 20deg)) saturate(calc(1 + var(--filter-intensity) * 1)) invert(calc(var(--glitch-intensity) * 0.2));
  }
  15% {
    opacity: calc(var(--glitch-intensity) * 0.6);
    transform: translate(calc(var(--transform-intensity) * 0.67), calc(var(--transform-intensity) * -0.25)) scale(calc(1 - var(--glitch-intensity) * 0.02)) skew(calc(var(--glitch-intensity) * -0.5deg));
    filter: brightness(calc(1 - var(--filter-intensity) * 0.8)) contrast(calc(1 - var(--filter-intensity) * 0.2)) hue-rotate(calc(var(--glitch-intensity) * -45deg)) saturate(calc(1 - var(--filter-intensity) * 0.5)) invert(calc(var(--glitch-intensity) * 0.4));
  }
  20% {
    opacity: calc(var(--glitch-intensity) * 0.8);
    transform: translate(calc(var(--transform-intensity) * -1), calc(var(--transform-intensity) * 0.08)) scale(calc(1 + var(--glitch-intensity) * 0.02)) skew(calc(var(--glitch-intensity) * 0.8deg));
    filter: brightness(calc(1 + var(--filter-intensity) * 0.6)) contrast(calc(1 + var(--filter-intensity) * 2.5)) hue-rotate(calc(var(--glitch-intensity) * 60deg)) saturate(calc(1 + var(--filter-intensity) * 2)) invert(calc(var(--glitch-intensity) * 0.6));
  }
  25% {
    opacity: 0.9;
    transform: translate(6px, -4px) scale(0.97) skew(-1deg);
    filter: brightness(0.8) contrast(0.5) hue-rotate(-90deg) saturate(0.3) invert(0.8);
  }
  30% {
    opacity: 0.95;
    transform: translate(-15px, 5px) scale(1.03) skew(1.2deg);
    filter: brightness(1.8) contrast(4) hue-rotate(120deg) saturate(4) invert(0.9);
  }
  35% {
    opacity: 0.98;
    transform: translate(10px, -2px) scale(0.96) skew(-0.7deg);
    filter: brightness(0.3) contrast(0.3) hue-rotate(-150deg) saturate(0.1) invert(0.95);
  }
  40% {
    opacity: 1;
    transform: translate(-20px, 3px) scale(1.04) skew(1.5deg);
    filter: brightness(1.9) contrast(5) hue-rotate(180deg) saturate(5) invert(1);
  }
  45% {
    opacity: 0.97;
    transform: translate(12px, -6px) scale(0.95) skew(-1.3deg);
    filter: brightness(0.5) contrast(0.4) hue-rotate(-210deg) saturate(0.2) invert(0.9);
  }
  50% {
    opacity: 0.92;
    transform: translate(-18px, 4px) scale(1.05) skew(0.9deg);
    filter: brightness(1.7) contrast(4.5) hue-rotate(240deg) saturate(4.5) invert(0.8);
  }
  55% {
    opacity: 0.85;
    transform: translate(14px, -1px) scale(0.94) skew(-0.6deg);
    filter: brightness(0.1) contrast(0.7) hue-rotate(-270deg) saturate(0.4) invert(0.7);
  }
  60% {
    opacity: 0.7;
    transform: translate(-10px, 7px) scale(1.02) skew(0.4deg);
    filter: brightness(1.4) contrast(3) hue-rotate(300deg) saturate(2.5) invert(0.5);
  }
  65% {
    opacity: 0.5;
    transform: translate(7px, -3px) scale(0.98) skew(-0.2deg);
    filter: brightness(0.6) contrast(1.5) hue-rotate(-330deg) saturate(1.3) invert(0.3);
  }
  70% {
    opacity: 0.3;
    transform: translate(-4px, 2px) scale(1.01) skew(0.1deg);
    filter: brightness(1.2) contrast(2.2) hue-rotate(30deg) saturate(1.8) invert(0.2);
  }
  75% {
    opacity: 0.2;
    transform: translate(2px, -1px) scale(0.99) skew(-0.05deg);
    filter: brightness(0.8) contrast(1.3) hue-rotate(-15deg) saturate(1.2) invert(0.1);
  }
  80% {
    opacity: 0.1;
    transform: translate(-1px, 1px) scale(1) skew(0.02deg);
    filter: brightness(1.1) contrast(1.7) hue-rotate(10deg) saturate(1.4) invert(0.05);
  }
  85% {
    opacity: 0.05;
    transform: translate(1px, -0.5px) scale(1) skew(-0.01deg);
    filter: brightness(0.9) contrast(1.4) hue-rotate(-5deg) saturate(1.1) invert(0.02);
  }
  90% {
    opacity: 0.02;
    transform: translate(-0.5px, 0.3px) scale(1) skew(0deg);
    filter: brightness(1.05) contrast(1.2) hue-rotate(3deg) saturate(1.05) invert(0.01);
  }
  95% {
    opacity: 0.01;
    transform: translate(0.2px, -0.1px) scale(1) skew(0deg);
    filter: brightness(0.95) contrast(1.1) hue-rotate(-2deg) saturate(1.02) invert(0);
  }
  100% {
    opacity: 0;
    transform: translate(0) scale(1) skew(0deg);
    filter: brightness(1) contrast(1) hue-rotate(0deg) saturate(1) invert(0);
  }
}
/* RGB分離アニメーション */
@keyframes rgb-split-red {
  0%, 100% {
    transform: translate(0, 0);
    opacity: calc(0.8 * var(--glitch-intensity));
  }
  25% {
    transform: translate(calc(var(--transform-intensity) * -0.42), calc(var(--transform-intensity) * 0.17));
    opacity: calc(0.9 * var(--glitch-intensity));
  }
  50% {
    transform: translate(calc(var(--transform-intensity) * 0.67), calc(var(--transform-intensity) * -0.25));
    opacity: calc(0.6 * var(--glitch-intensity));
  }
  75% {
    transform: translate(calc(var(--transform-intensity) * -0.25), calc(var(--transform-intensity) * 0.08));
    opacity: calc(0.7 * var(--glitch-intensity));
  }
}
@keyframes rgb-split-blue {
  0%, 100% {
    transform: translate(0, 0);
    opacity: calc(0.8 * var(--glitch-intensity));
  }
  25% {
    transform: translate(calc(var(--transform-intensity) * 0.42), calc(var(--transform-intensity) * -0.17));
    opacity: calc(0.7 * var(--glitch-intensity));
  }
  50% {
    transform: translate(calc(var(--transform-intensity) * -0.67), calc(var(--transform-intensity) * 0.25));
    opacity: calc(0.9 * var(--glitch-intensity));
  }
  75% {
    transform: translate(calc(var(--transform-intensity) * 0.25), calc(var(--transform-intensity) * -0.08));
    opacity: calc(0.6 * var(--glitch-intensity));
  }
}
/* 強化されたノイズエフェクト（新構造対応） */
.glitch-container.noise-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 25% 25%, rgba(255, 0, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(0, 255, 255, 0.1) 0%, transparent 50%), linear-gradient(90deg, transparent 0%, rgba(0, 255, 0, 0.02) 49%, rgba(0, 255, 0, 0.05) 50%, rgba(0, 255, 0, 0.02) 51%, transparent 100%), radial-gradient(ellipse 1px 1px at 20px 30px, #fff, transparent), radial-gradient(ellipse 1px 1px at 40px 70px, #f0f, transparent), radial-gradient(ellipse 1px 1px at 90px 40px, #0ff, transparent);
  background-size: 100px 100px, 120px 120px, 100% 2px, 100px 100px, 80px 80px, 110px 110px;
  animation: cyber-noise var(--glitch-duration, 0.5s) linear infinite;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.glitch-container.noise-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, transparent 0%, rgba(255, 0, 0, 0.1) 2%, transparent 3%, transparent 97%, rgba(0, 0, 255, 0.1) 98%, transparent 100%);
  background-size: 100% 50px;
  animation: glitch-lines var(--glitch-duration, 0.5s) steps(20) infinite;
  opacity: 0;
  z-index: 11;
  pointer-events: none;
  mix-blend-mode: screen;
}

#front.noise-active::before,
#dark.noise-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  animation: cyber-noise var(--glitch-duration, 0.5s) linear infinite;
  opacity: var(--noise-intensity, 0.3);
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* サイバーノイズアニメーション */
@keyframes cyber-noise {
  0% {
    opacity: 0;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    transform: scale(1);
  }
  10% {
    opacity: var(--noise-intensity, 0.3);
    background-position: -10px -5px, 15px 8px, 0 2px, -5px -8px, 12px 3px, -8px 6px;
    transform: scale(1.002);
  }
  20% {
    opacity: var(--noise-intensity, 0.4);
    background-position: 20px -10px, -12px 15px, 0 4px, 8px -12px, -15px 7px, 10px -5px;
    transform: scale(0.998);
  }
  30% {
    opacity: var(--noise-intensity, 0.5);
    background-position: -15px 8px, 25px -6px, 0 6px, -10px 9px, 18px -4px, -12px 11px;
    transform: scale(1.001);
  }
  40% {
    opacity: var(--noise-intensity, 0.6);
    background-position: 8px -15px, -20px 12px, 0 8px, 15px -7px, -8px 14px, 6px -9px;
    transform: scale(0.999);
  }
  50% {
    opacity: var(--noise-intensity, 0.7);
    background-position: -25px 5px, 10px -18px, 0 10px, -12px 16px, 22px -8px, -14px 3px;
    transform: scale(1.003);
  }
  60% {
    opacity: var(--noise-intensity, 0.6);
    background-position: 12px 20px, -18px -8px, 0 12px, 8px -14px, -20px 9px, 16px 7px;
    transform: scale(0.997);
  }
  70% {
    opacity: var(--noise-intensity, 0.4);
    background-position: -8px -12px, 22px 5px, 0 14px, -16px 11px, 14px -12px, -6px 15px;
    transform: scale(1.001);
  }
  80% {
    opacity: var(--noise-intensity, 0.3);
    background-position: 18px 8px, -14px -20px, 0 16px, 10px 6px, -25px -5px, 12px -18px;
    transform: scale(0.999);
  }
  90% {
    opacity: var(--noise-intensity, 0.2);
    background-position: -5px 15px, 8px -10px, 0 18px, -20px -8px, 16px 12px, -10px -6px;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    background-position: 0 0, 0 0, 0 20px, 0 0, 0 0, 0 0;
    transform: scale(1);
  }
}
/* グリッチラインアニメーション */
@keyframes glitch-lines {
  0% {
    opacity: 0;
    background-position: 0 0;
    transform: scaleY(1);
  }
  10% {
    opacity: var(--noise-intensity, 0.2);
    background-position: 0 -5px;
    transform: scaleY(1.02);
  }
  20% {
    opacity: var(--noise-intensity, 0.4);
    background-position: 0 10px;
    transform: scaleY(0.98);
  }
  30% {
    opacity: var(--noise-intensity, 0.3);
    background-position: 0 -8px;
    transform: scaleY(1.01);
  }
  40% {
    opacity: var(--noise-intensity, 0.5);
    background-position: 0 15px;
    transform: scaleY(0.99);
  }
  50% {
    opacity: var(--noise-intensity, 0.6);
    background-position: 0 -12px;
    transform: scaleY(1.03);
  }
  60% {
    opacity: var(--noise-intensity, 0.4);
    background-position: 0 8px;
    transform: scaleY(0.97);
  }
  70% {
    opacity: var(--noise-intensity, 0.3);
    background-position: 0 -3px;
    transform: scaleY(1.01);
  }
  80% {
    opacity: var(--noise-intensity, 0.2);
    background-position: 0 12px;
    transform: scaleY(0.99);
  }
  90% {
    opacity: var(--noise-intensity, 0.1);
    background-position: 0 -6px;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    background-position: 0 0;
    transform: scaleY(1);
  }
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  @keyframes glitch-front {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    20% {
      opacity: 0.3;
      transform: translateX(1px);
    }
    50% {
      opacity: 0;
      transform: translateX(-1px);
    }
    80% {
      opacity: 0.7;
      transform: translateX(0.5px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes glitch-back {
    0% {
      opacity: 0;
      transform: translateX(0);
    }
    20% {
      opacity: 0.7;
      transform: translateX(-1px);
    }
    50% {
      opacity: 1;
      transform: translateX(1px);
    }
    80% {
      opacity: 0.3;
      transform: translateX(-0.5px);
    }
    100% {
      opacity: 0;
      transform: translateX(0);
    }
  }
}
/*# sourceMappingURL=maps/glitch-effect.css.map */