/* =====================================
   NEON CORE SYSTEM
===================================== */

/* =====================================
   BORDER SYSTEM（Neon最適化）
===================================== */

.border-1,
.border-2,
.border-3,
.border-4 {
  position: relative;
  --r: 15px;
  /* 内線 radius 基本値 */
  --o: 8px;
  /* 外線オフセット（insetの絶対値） */
  border-radius: var(--r);
}

@media screen and (min-width: 1px) and (max-width: 743px) {

  .border-1,
  .border-2,
  .border-3,
  .border-4 {
    position: relative;
    --r: 8px;
    /* 内線 radius 基本値 */
    --o: 6px;
    /* 外線オフセット（insetの絶対値） */
    border-radius: var(--r);
  }
}

/* -----------------
   内線
------------------ */

.border-1 {
  border: 2px solid var(--c-2);
  --neon-inner: var(--c-2);
  --neon-outer: var(--c-1);
}

.border-2 {
  border: 2px solid var(--c-1);
  --neon-inner: var(--c-1);
  --neon-outer: var(--c-2);
}

.border-3 {
  --r: 9999px;
  border: 2px solid var(--c-1);
  --neon-inner: var(--c-1);
  --neon-outer: var(--c-2);
  background-color: black;
}

.border-4 {
  --r: 5px;
  border: 2px solid var(--c-2);
  --neon-inner: var(--c-2);
  --neon-outer: var(--c-1);
}

/* -----------------
   外線（疑似要素）
------------------ */

.border-1::before,
.border-2::before,
.border-3::before,
.border-4::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--o));
  border: 2px solid var(--neon-outer);
  border-radius: calc(var(--r) + var(--o));
  /* ←ズレ防止の核心 */
  pointer-events: none;
}

/* 影を直接揺らす */

@keyframes neonPulse {
  0% {
    text-shadow: 0 0 4px currentColor, 0 0 10px currentColor, 0 0 20px currentColor;
  }

  18% {
    text-shadow: 0 0 6px currentColor, 0 0 16px currentColor, 0 0 30px currentColor;
  }

  37% {
    text-shadow: 0 0 5px currentColor, 0 0 14px currentColor, 0 0 24px currentColor;
  }

  62% {
    text-shadow: 0 0 9px currentColor, 0 0 22px currentColor, 0 0 42px currentColor;
  }

  81% {
    text-shadow: 0 0 6px currentColor, 0 0 18px currentColor, 0 0 28px currentColor;
  }

  100% {
    text-shadow: 0 0 4px currentColor, 0 0 10px currentColor, 0 0 20px currentColor;
  }
}

/* 文字ネオン */

.neon-text {
  animation: neonPulse 2s ease-in-out infinite;
  animation-delay: calc(var(--neon-delay, 0s));
}

/* ボーダーネオン */

/* =====================================
   NEON BORDER (inner/outer color)
   - --neon-inner : 内側線の発光色
   - --neon-outer : 外側線の発光色
===================================== */

@keyframes neonBorderPulse {

  0% {
    box-shadow:
      0 0 4px var(--neon-inner),
      0 0 10px var(--neon-inner),
      inset 0 0 3px var(--neon-inner);
  }

  24% {
    box-shadow:
      0 0 9px var(--neon-inner),
      0 0 22px var(--neon-inner),
      inset 0 0 8px var(--neon-inner);
  }

  /* 瞬断（ほんの一瞬弱くなる） */
  30% {
    box-shadow:
      0 0 1px var(--neon-inner),
      inset 0 0 1px var(--neon-inner);
  }

  55% {
    box-shadow:
      0 0 12px var(--neon-inner),
      0 0 26px var(--neon-inner),
      inset 0 0 12px var(--neon-inner),
      inset 0 0 22px var(--neon-inner);
  }

  78% {
    box-shadow:
      0 0 6px var(--neon-inner),
      0 0 16px var(--neon-inner),
      inset 0 0 6px var(--neon-inner);
  }

  100% {
    box-shadow:
      0 0 4px var(--neon-inner),
      0 0 10px var(--neon-inner),
      inset 0 0 3px var(--neon-inner);
  }
}

.neon-border {
  animation: neonBorderPulse 2.2s ease-in-out infinite;
  animation-delay: calc(var(--neon-delay, 0s));
}

/* 外側線（::before）だけは外側色で光らせる */
.neon-border::before {
  box-shadow:
    0 0 3px var(--neon-outer),
    0 0 8px var(--neon-outer);
}

/* ==============================
   Section variation
================================ */

/* ゆったり */
#about .neon-border,
#about .neon-text {
  animation-duration: 2.8s;
}

/* 少し速め */
#cast .neon-border,
#cast .neon-text {
  animation-duration: 2s;
}

/* 重め */
#ticket .neon-border,
#ticket .neon-text {
  animation-duration: 3s;
}

/* 少し鋭い */
#special .neon-border,
#special .neon-text {
  animation-duration: 1.9s;
}

/* 最もゆっくり */
#disco .neon-border,
#disco .neon-text {
  animation-duration: 3.2s;
}

/* =========================
   Heading neon double line
========================= */

.hc-1,
.hc-2 {
  position: relative;
  display: inline-block;
  padding: 0.35em 0;
  /* 線と文字の余白 */
  --line-h: 2px;
  /* 線の太さ */
  --line-gap: 4px;
  /* 2重線の隙間（お好みで） */
  --line-color: currentColor;
  /* 初期値（上書きする） */
  --text-color: currentColor;
  /* 初期値（上書きする） */
  color: var(--text-color);
}

/* 文字色と線色を「交互」に */
.hc-1 {
  --text-color: var(--c-2);
  --line-color: var(--c-1);
}

/* 文字=青 / 線=赤 */
.hc-2 {
  --text-color: var(--c-1);
  --line-color: var(--c-2);
}

/* 文字=赤 / 線=青 */

/* 上の2重線（beforeで2本まとめて描く） */
.hc-1::before,
.hc-2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--line-h);
  background: var(--line-color);

  /* 2本目（下方向へオフセット） */
  box-shadow: 0 calc(var(--line-h) + var(--line-gap)) 0 var(--line-color);

  /* ネオン（線も光らせる） */
  filter: drop-shadow(0 0 3px var(--line-color)) drop-shadow(0 0 8px var(--line-color));
  animation: neonLinePulse 2.4s ease-in-out infinite;
  animation-delay: var(--neon-delay, 0s);
}

/* 下の2重線（afterで2本まとめて描く） */
.hc-1::after,
.hc-2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--line-h);
  background: var(--line-color);

  /* 2本目（上方向へオフセット） */
  box-shadow: 0 calc(-1 * (var(--line-h) + var(--line-gap))) 0 var(--line-color);

  filter: drop-shadow(0 0 3px var(--line-color)) drop-shadow(0 0 8px var(--line-color));
  animation: neonLinePulse 2.4s ease-in-out infinite;
  animation-delay: var(--neon-delay, 0s);
}

@keyframes neonLinePulse {

  /* 通常 */
  0% {
    opacity: 0.8;
    filter:
      drop-shadow(0 0 2px var(--line-color)) drop-shadow(0 0 6px var(--line-color));
  }

  /* しっかり発光 */
  20% {
    opacity: 1;
    filter:
      drop-shadow(0 0 5px var(--line-color)) drop-shadow(0 0 14px var(--line-color));
  }

  /* 少し落ちる */
  32% {
    opacity: 0.85;
    filter:
      drop-shadow(0 0 3px var(--line-color)) drop-shadow(0 0 8px var(--line-color));
  }

  /* 瞬断気味に弱く */
  38% {
    opacity: 0.55;
    filter:
      drop-shadow(0 0 1px var(--line-color));
  }

  /* 強く戻る */
  55% {
    opacity: 1;
    filter:
      drop-shadow(0 0 6px var(--line-color)) drop-shadow(0 0 16px var(--line-color));
  }

  /* なだらかに戻る */
  75% {
    opacity: 0.85;
    filter:
      drop-shadow(0 0 3px var(--line-color)) drop-shadow(0 0 8px var(--line-color));
  }

  100% {
    opacity: 0.8;
    filter:
      drop-shadow(0 0 2px var(--line-color)) drop-shadow(0 0 6px var(--line-color));
  }
}

@media screen and (max-width: 743px) {

  .hc-1,
  .hc-2 {
    --line-gap: 3px;
  }

  @keyframes neonBorderPulse {

    0% {
      box-shadow:
        0 0 3px var(--neon-inner),
        0 0 7px var(--neon-inner),
        inset 0 0 2px var(--neon-inner);
    }

    24% {
      box-shadow:
        0 0 6px var(--neon-inner),
        0 0 15px var(--neon-inner),
        inset 0 0 5px var(--neon-inner);
    }

    30% {
      box-shadow:
        0 0 1px var(--neon-inner),
        inset 0 0 1px var(--neon-inner);
    }

    55% {
      box-shadow:
        0 0 8px var(--neon-inner),
        0 0 17px var(--neon-inner),
        inset 0 0 8px var(--neon-inner),
        inset 0 0 15px var(--neon-inner);
    }

    78% {
      box-shadow:
        0 0 4px var(--neon-inner),
        0 0 11px var(--neon-inner),
        inset 0 0 4px var(--neon-inner);
    }

    100% {
      box-shadow:
        0 0 3px var(--neon-inner),
        0 0 7px var(--neon-inner),
        inset 0 0 2px var(--neon-inner);
    }
  }

  /* 外側線（::before）の光彩も 2/3 に */
  .neon-border::before {
    box-shadow:
      0 0 2px var(--neon-outer),
      0 0 5px var(--neon-outer);
  }

  @keyframes neonPulse {
    0% {
      text-shadow:
        0 0 3px currentColor,
        0 0 7px currentColor,
        0 0 13px currentColor;
    }

    18% {
      text-shadow:
        0 0 4px currentColor,
        0 0 11px currentColor,
        0 0 20px currentColor;
    }

    37% {
      text-shadow:
        0 0 3px currentColor,
        0 0 9px currentColor,
        0 0 16px currentColor;
    }

    62% {
      text-shadow:
        0 0 6px currentColor,
        0 0 15px currentColor,
        0 0 28px currentColor;
    }

    81% {
      text-shadow:
        0 0 4px currentColor,
        0 0 12px currentColor,
        0 0 19px currentColor;
    }

    100% {
      text-shadow:
        0 0 3px currentColor,
        0 0 7px currentColor,
        0 0 13px currentColor;
    }
  }

}