/* ==========================================================
   Magic — 滞留グロー + 花火 + マウスジェスチャー発動演出
   - PC (hover: hover and pointer: fine) のみ有効
   ========================================================== */

/* --- 滞留グロー (文字の光) --- */
.magic-word {
  display: inline-block;
  transition:
    text-shadow 0.7s cubic-bezier(.2,.9,.3,1),
    filter 0.7s ease;
  will-change: text-shadow, transform;
}
.magic-word.is-lit {
  text-shadow:
    0 0 6px rgba(255, 216, 120, 0.95),
    0 0 18px rgba(255, 216, 120, 0.7),
    0 0 36px rgba(255, 216, 120, 0.5),
    0 0 72px rgba(212, 168, 83, 0.35);
}

/* --- 花火 (三周年ブロック用) --- */
.magic-fireworks-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99996;
  overflow: hidden;
}
.magic-firework-rocket {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 245, 210, 1);
  box-shadow:
    0 0 8px rgba(255, 216, 120, 0.9),
    0 0 16px rgba(255, 216, 120, 0.6),
    0 0 32px rgba(212, 168, 83, 0.4);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.magic-firework-spark {
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.magic-firework-trail {
  position: absolute;
  top: 0; left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 216, 120, 0.85);
  box-shadow: 0 0 4px rgba(255, 216, 120, 0.7);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

/* --- ジェスチャー発動グロー (背景) --- */
.magic-gesture-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99994;
  opacity: 0;
  mix-blend-mode: screen;
  transform-origin: var(--gx, 50%) var(--gy, 50%);
  will-change: opacity, transform;
}
.magic-gesture-glow.is-circle {
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 235, 180, 0.55) 0%,
    rgba(255, 216, 120, 0.3) 10%,
    rgba(212, 168, 83, 0.15) 25%,
    rgba(212, 168, 83, 0.05) 45%,
    transparent 70%);
}
.magic-gesture-glow.is-pentagram {
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
      rgba(168, 130, 255, 0.45) 0%,
      rgba(255, 216, 120, 0.28) 12%,
      rgba(138, 98, 220, 0.12) 28%,
      transparent 55%);
}
.magic-gesture-glow.is-active {
  animation: magicGlowPulse 2.8s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes magicGlowPulse {
  0%   { opacity: 0;    transform: scale(.75); }
  18%  { opacity: 1;    transform: scale(1); }
  55%  { opacity: .85;  transform: scale(1.08); }
  100% { opacity: 0;    transform: scale(1.25); }
}

/* --- 魔法陣 SVG (五芒星) --- */
.magic-pentagram-svg {
  position: fixed;
  pointer-events: none;
  z-index: 99995;
  opacity: 0;
  will-change: opacity, transform, filter;
}
.magic-pentagram-svg.is-active {
  animation: magicPentaShow 3s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes magicPentaShow {
  0%   { opacity: 0;   transform: scale(.5) rotate(-15deg); filter: blur(10px); }
  20%  { opacity: 1;   transform: scale(1) rotate(0);        filter: blur(0); }
  65%  { opacity: .9;  transform: scale(1.06) rotate(2deg);  filter: blur(0); }
  100% { opacity: 0;   transform: scale(1.2) rotate(8deg);   filter: blur(6px); }
}

/* --- 風（螺旋ジェスチャー） --- */
.magic-wind-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99993;
  overflow: hidden;
}
.magic-wind-particle {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  will-change: transform, opacity;
  mix-blend-mode: screen;
  border-radius: 50%;
}
/* --- 縮小モーション環境 --- */
@media (prefers-reduced-motion: reduce) {
  .magic-word,
  .magic-gesture-glow,
  .magic-pentagram-svg,
  .magic-wind-particle {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================
   Secret Door — 五芒星で覚醒する隠し扉
   朝/夜モードで背景とメッセージ色を切り替え、扉本体は世界共通
   ========================================================== */

/* --- 下から差し込む光（五芒星の光が終わったあと、扉が視界に入るまで） --- */
.magic-floor-light {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58vh;
  pointer-events: none;
  z-index: 99991;
  opacity: 0;
  mix-blend-mode: screen;
  /* 出現・消失はゆっくり (3.5s) じんわり。中盤で緩く加速するような曲線。 */
  transition:
    opacity 3.5s cubic-bezier(.35,.05,.4,1),
    filter  3.5s ease;
  animation: magicFloorBreathe 4.0s ease-in-out infinite;
  background:
    radial-gradient(ellipse 28% 95% at 18% 100%,
      rgba(245, 166, 35, .42) 0%,
      rgba(232, 117, 26, .20) 40%,
      transparent 78%),
    radial-gradient(ellipse 28% 95% at 82% 100%,
      rgba(245, 166, 35, .42) 0%,
      rgba(232, 117, 26, .20) 40%,
      transparent 78%),
    radial-gradient(ellipse 45% 100% at 50% 115%,
      rgba(255, 216, 120, .55) 0%,
      rgba(245, 166, 35, .28) 35%,
      rgba(232, 117, 26, .10) 65%,
      transparent 92%),
    linear-gradient(to top,
      rgba(245, 163, 35, .40) 0%,
      rgba(232, 117, 26, .22) 20%,
      rgba(245, 166, 35, .08) 48%,
      transparent 92%);
}
body.is-morning .magic-floor-light {
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 28% 95% at 18% 100%,
      rgba(232, 117, 26, .34) 0%,
      rgba(212, 168, 83, .20) 40%,
      transparent 78%),
    radial-gradient(ellipse 28% 95% at 82% 100%,
      rgba(232, 117, 26, .34) 0%,
      rgba(212, 168, 83, .20) 40%,
      transparent 78%),
    radial-gradient(ellipse 45% 100% at 50% 115%,
      rgba(245, 166, 35, .40) 0%,
      rgba(232, 117, 26, .22) 35%,
      rgba(212, 168, 83, .10) 65%,
      transparent 92%),
    linear-gradient(to top,
      rgba(232, 117, 26, .28) 0%,
      rgba(212, 168, 83, .16) 20%,
      rgba(245, 216, 120, .06) 48%,
      transparent 92%);
}
.magic-floor-light.is-active { opacity: 1; }
.magic-floor-light.is-fading { opacity: 0; }
/* 解錠時の強い床光（別インスタンスとして積む） */
.magic-floor-light.is-bright {
  height: 72vh;
  animation: magicFloorBreatheFast 2.4s ease-in-out infinite;
  filter: saturate(1.15) brightness(1.12);
}
@keyframes magicFloorBreathe {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.18) saturate(1.08); }
}
@keyframes magicFloorBreatheFast {
  0%, 100% { filter: brightness(1.12) saturate(1.15); }
  50%      { filter: brightness(1.55) saturate(1.3); }
}

/* --- ステージ（フッター下に挿入される 100vh の虚空） --- */
.magic-door-stage {
  display: none;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 32px 16px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #14141e 0%, #0e0f1a 60%, #0a0a12 100%);
}
body.magic-door-awakened .magic-door-stage { display: flex; }

body.is-night .magic-door-stage {
  background: linear-gradient(180deg, #14141e 0%, #0e0f1a 60%, #0a0a12 100%);
}
body.is-morning .magic-door-stage {
  background: linear-gradient(180deg, #f5f0e8 0%, #ede5d4 50%, #e2d6bf 100%);
}

/* --- 虚空の光粒（星 or 金粉） --- */
.magic-void-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.magic-void-star {
  position: absolute;
  width: 2.5px; height: 2.5px;
  border-radius: 50%;
  opacity: 0;
  animation: magicStarBreathe 5.6s cubic-bezier(.4,0,.6,1) infinite;
}
body.is-night .magic-void-star {
  background: rgba(255, 245, 210, .95);
  box-shadow:
    0 0 10px rgba(255, 245, 210, .8),
    0 0 22px rgba(255, 216, 120, .45);
}
body.is-morning .magic-void-star {
  background: rgba(212, 113, 26, .7);
  box-shadow:
    0 0 8px rgba(212, 113, 26, .55),
    0 0 18px rgba(245, 166, 35, .35);
}
@keyframes magicStarBreathe {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* --- 下向きの光の筋（1回だけ） --- */
.magic-void-lightstream {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 36vh;
  transform: translate(-50%, -100%);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 216, 120, .5) 45%,
    rgba(255, 216, 120, .5) 55%,
    transparent 100%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
body.is-morning .magic-void-lightstream {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(212, 113, 26, .45) 45%,
    rgba(212, 113, 26, .45) 55%,
    transparent 100%);
  mix-blend-mode: multiply;
}
body.magic-door-awakened .magic-void-lightstream {
  animation: magicLightStream 1.8s cubic-bezier(.3,.5,.4,1) 0.4s 1 forwards;
}
@keyframes magicLightStream {
  0%   { transform: translate(-50%, -100%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(-50%, 250%); opacity: 0; }
}

/* --- 扉本体 --- */
.magic-door {
  display: block;
  position: relative;
  width: clamp(220px, 28vw, 280px);
  aspect-ratio: 280 / 440;
  text-decoration: none;
  outline: none;
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition:
    opacity 1.4s cubic-bezier(.22,1,.36,1),
    transform 1.4s cubic-bezier(.22,1,.36,1);
  z-index: 2;
  cursor: default;
  /* ホバー時のフレーム発光に使うカスタムプロパティ */
  --door-glow: rgba(245, 166, 35, .55);
}
body.magic-door-awakened .magic-door.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
body.magic-door-awakened .magic-door.is-ready { cursor: pointer; }

/* --- フレーム（アーチ + 二重枠） --- */
.magic-door-frame {
  position: absolute;
  inset: 0;
  border: 4px solid #d4711a;
  border-radius: 140px 140px 0 0;
  box-shadow:
    0 0 0 rgba(245, 166, 35, 0),
    inset 0 0 0 1px #f5a623,
    inset 0 0 40px rgba(0, 0, 0, .55);
  transition: box-shadow 1.4s cubic-bezier(.22,1,.36,1);
}
/* 扉が画面内に入ったら縁光が内側から灯る */
body.magic-door-awakened .magic-door.is-lit .magic-door-frame {
  box-shadow:
    0 0 60px rgba(245, 166, 35, .28),
    inset 0 0 0 1px #f5a623,
    inset 0 0 42px rgba(0, 0, 0, .52);
}
body.magic-door-awakened .magic-door.is-ready:hover .magic-door-frame,
body.magic-door-awakened .magic-door.is-ready:focus-visible .magic-door-frame {
  box-shadow:
    0 0 80px rgba(245, 166, 35, .6),
    inset 0 0 0 1px #ffeac2,
    inset 0 0 50px rgba(0, 0, 0, .4);
}

/* --- パネル（ウォールナット木目） --- */
.magic-door-panel {
  position: absolute;
  inset: 10px;
  border-radius: 130px 130px 0 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0, transparent 7px,
      rgba(255, 216, 120, .035) 7px, rgba(255, 216, 120, .035) 8px),
    linear-gradient(180deg, #2a1f16 0%, #1a120b 50%, #241a12 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 22%;
  overflow: hidden;
}

/* --- 中央の六花紋章 --- */
.magic-door-crest {
  width: 42%;
  height: auto;
  animation: magicCrestPulse 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(245, 166, 35, .55));
}
@keyframes magicCrestPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* --- 鍵穴（円 + 下方向のスリット） --- */
.magic-door-keyhole {
  position: relative;
  width: 18px;
  height: 28px;
  margin-top: 28%;
  filter: drop-shadow(0 0 8px rgba(245, 166, 35, .8));
}
.magic-door-keyhole::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 14px;
  height: 14px;
  background: #0a0604;
  border: 1.5px solid #f5a623;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, .95);
}
.magic-door-keyhole::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  width: 5px;
  height: 16px;
  background: #0a0604;
  border-left: 1.5px solid #f5a623;
  border-right: 1.5px solid #f5a623;
  border-bottom: 1.5px solid #f5a623;
  border-radius: 0 0 2px 2px;
  transform: translateX(-50%);
}

/* --- カスタム鍵カーソル（覚醒後はサイト全体で鍵に）
       内部 viewBox 32x32 を表示 48x48 に拡大 / hotspot 円中心 (9,9) → 表示換算 (13.5,13.5) ≒ 13 13。
       body と全子孫に適用することで、スクロールしてマウスが動かなくてもブラウザ既定の
       cursor リセットを気にせず常に鍵カーソルが維持される。 --- */
body.magic-door-awakened,
body.magic-door-awakened * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'><g fill='none' stroke='%23f5a623' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='4.5' fill='%23ffd880'/><circle cx='9' cy='9' r='1.6' fill='%232a1f16' stroke='none'/><path d='M12.2 12.2 L23 23'/><path d='M19 19 L22 16'/><path d='M21 21 L24 18'/></g></svg>") 13 13, pointer;
}
/* 朝モードでは鍵カーソルを黒基調に（明るい背景で金色が溶けてしまうため）。
   ストロークを #1a1a2e（ダーク紺）、頭のフィルを #f5f0e8（ベージュ寄り白）に反転。 */
html[data-mode="morning"] body.magic-door-awakened,
html[data-mode="morning"] body.magic-door-awakened * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'><g fill='none' stroke='%231a1a2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='4.5' fill='%23f5f0e8'/><circle cx='9' cy='9' r='1.6' fill='%231a1a2e' stroke='none'/><path d='M12.2 12.2 L23 23'/><path d='M19 19 L22 16'/><path d='M21 21 L24 18'/></g></svg>") 13 13, pointer;
}
/* 朝モードでも解錠後は default に戻す。上の朝モード用ルールの specificity
   (html[data-mode] + body.magic-door-awakened + *) が
   素の解錠ルールより強いので、朝モード専用で同等以上の specificity に
   する必要がある。 */
html[data-mode="morning"] body.magic-door-awakened.magic-door-unlocked,
html[data-mode="morning"] body.magic-door-awakened.magic-door-unlocked * {
  cursor: default;
}
html[data-mode="morning"] body.magic-door-awakened.magic-door-unlocked .magic-door,
html[data-mode="morning"] body.magic-door-awakened.magic-door-unlocked .magic-door * {
  cursor: pointer;
}
/* 解錠後はサイト全体のキーカーソルを default に戻し、扉だけ pointer に */
body.magic-door-awakened.magic-door-unlocked,
body.magic-door-awakened.magic-door-unlocked * {
  cursor: default;
}
body.magic-door-awakened.magic-door-unlocked .magic-door,
body.magic-door-awakened.magic-door-unlocked .magic-door * {
  cursor: pointer;
}

/* --- メッセージ --- */
.magic-door-message {
  display: block;
  margin: 28px 0 0;
  text-align: center;
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.95;
  letter-spacing: .04em;
  z-index: 2;
  max-width: 32em;
}
body.is-night .magic-door-message { color: #f4ecd8; }
body.is-morning .magic-door-message { color: #2a2535; }

.magic-door-message-line {
  display: block;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 1.1s cubic-bezier(.2,.7,.3,1),
    transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.magic-door-message.is-visible .magic-door-message-line:nth-child(1) { transition-delay: 0s; }
.magic-door-message.is-visible .magic-door-message-line:nth-child(2) { transition-delay: .18s; }
.magic-door-message.is-visible .magic-door-message-line:nth-child(3) { transition-delay: .36s; }
.magic-door-message.is-visible .magic-door-message-line {
  opacity: 1;
  transform: translateY(0);
}

/* "ご褒美" アクセント */
body.is-night .magic-door-message-accent  { color: #f5a623; }
body.is-morning .magic-door-message-accent { color: #d4711a; }

/* --- キーボードフォーカス --- */
.magic-door:focus-visible {
  /* 独自フォーカスリングは .magic-door-frame 側で表現するので outline は消す */
  outline: none;
}

/* --- クリック遷移演出: 扉を内側に開く + 画面全体ブラー + 白フェード --- */
body.magic-door-opening { overflow: hidden; }

/* 扉本体はスケールしない（内開きを主役にする） */
body.magic-door-opening .magic-door {
  transform: none;
}

/* パネルの 3D 回転に備えて perspective と hinge を用意 */
.magic-door-stage { perspective: 1400px; perspective-origin: 50% 42%; }
.magic-door { transform-style: preserve-3d; }
.magic-door-panel {
  transform-origin: left center;
  backface-visibility: hidden;
  transition: transform 1.15s cubic-bezier(.5,0,.3,1);
  z-index: 2; /* frame::before より上 */
}
/* 扉の向こう側に灯る光（パネルが開くと徐々に見える） */
.magic-door-frame::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 140px 140px 0 0;
  background: radial-gradient(ellipse at 50% 65%,
    #fffaf0 0%,
    rgba(255, 236, 180, .85) 38%,
    rgba(212, 113, 26, .25) 74%,
    transparent 100%);
  opacity: 0;
  transition: opacity 1.1s ease .15s;
  pointer-events: none;
  z-index: 1;
}
body.magic-door-opening .magic-door-panel {
  transform: rotateY(-96deg);
}
body.magic-door-opening .magic-door-frame::before { opacity: 1; }
body.magic-door-opening .magic-door-frame {
  box-shadow:
    0 0 120px rgba(255, 236, 180, .7),
    inset 0 0 0 1px #ffeac2,
    inset 0 0 70px rgba(0, 0, 0, .18);
  transition: box-shadow 1.1s ease;
}

/* メッセージはさっと消す */
body.magic-door-opening .magic-door-message { opacity: 0; transition: opacity .3s ease; }

/* 画面全体をブラー。flash / stage は別扱いで段階的に処理 */
body.magic-door-opening > *:not(.magic-door-flash):not(.magic-door-stage) {
  filter: blur(14px) brightness(1.05);
  transition: filter 1.15s ease-out .1s;
}
body.magic-door-opening .magic-door-stage {
  /* 扉を観察してもらうため弱めに */
  filter: blur(4px);
  transition: filter 1.15s ease-out .25s;
}

/* 全画面ソリッド白フェード（円状グラデは廃止） */
.magic-door-flash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  background: #ffffff;
}
body.magic-door-opening .magic-door-flash {
  animation: magicDoorFlash 1.35s cubic-bezier(.4,0,.4,1) .25s forwards;
}
@keyframes magicDoorFlash {
  0%   { opacity: 0; }
  45%  { opacity: .35; }
  100% { opacity: 1; }
}

/* --- reduced-motion: 扉は見せるがアニメは殺す --- */
@media (prefers-reduced-motion: reduce) {
  .magic-door-stage,
  .magic-void-lightstream,
  .magic-void-star,
  .magic-door,
  .magic-door-crest,
  .magic-door-message-line,
  .magic-door-flash,
  .magic-floor-light {
    animation: none !important;
    transition: opacity .3s ease !important;
  }
  body.magic-door-awakened .magic-door.is-visible,
  body.magic-door-awakened .magic-door.is-lit .magic-door-frame { transform: none !important; }
}