/* ---------- オープニング（初回だけ表示） ---------- */
.intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  overflow: hidden;
  background: #070504;
  cursor: pointer;
  transition: opacity .9s ease, visibility .9s ease;
}
.intro.is-out { opacity: 0; visibility: hidden; }
body.intro-lock { overflow: hidden; }

/* 左右に揺れるスポットライト */
.intro-spot {
  position: absolute; top: -20%; left: 50%;
  width: 140vmax; height: 140vmax;
  margin-left: -70vmax;
  background: conic-gradient(from 168deg at 50% 0%,
    transparent 0deg, rgba(241,230,207,.16) 12deg, transparent 24deg);
  transform-origin: 50% 0%;
  animation: spot-sway 3.2s ease-in-out infinite alternate, fade-in 1s ease both;
}
@keyframes spot-sway {
  from { transform: rotate(-14deg); }
  to   { transform: rotate(14deg); }
}

.intro-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

/* 回るレコード */
.vinyl {
  position: relative;
  width: min(46vmin, 260px); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #d4a64a 0 17%, #0e0b08 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #151110 0 2px, #0b0908 2px 4px);
  box-shadow: 0 0 0 2px #2a2118, 0 20px 60px rgba(0,0,0,.8), 0 0 80px rgba(212,166,74,.15);
  animation: spin 1.8s linear infinite;
}
/* 登場の動きは外側の枠で（回転とぶつからないように） */
.vinyl-wrap { animation: vinyl-in 1s cubic-bezier(.2,.8,.2,1) both; }
/* 盤面の光の反射 */
.vinyl::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg,
    transparent 0 40deg, rgba(255,255,255,.08) 60deg, transparent 80deg,
    transparent 220deg, rgba(255,255,255,.06) 240deg, transparent 260deg);
  animation: spin 1.8s linear infinite reverse; /* 反射は止まって見えるように逆回転 */
}
@keyframes vinyl-in {
  from { opacity: 0; transform: scale(.6) rotate(-90deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 立ちのぼる音符 */
.intro-note {
  position: absolute; bottom: 50%; left: 50%;
  color: #d4a64a;
  font-size: 28px;
  opacity: 0;
  text-shadow: 0 0 12px rgba(212,166,74,.6);
  animation: note-rise 2.4s ease-out forwards;
}
@keyframes note-rise {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(.6); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -42vh) rotate(var(--rot)) scale(1.2); }
}

/* タイトル */
.intro-title {
  margin-top: 34px;
  font-family: "Noto Serif JP", serif; font-weight: 700;
  font-size: clamp(30px, 7vw, 64px);
  color: #f1e6cf;
  text-shadow: 0 0 30px rgba(212,166,74,.45), 3px 3px 0 #a8322b;
  animation: title-in 1.1s ease .9s both;
}
.intro-sub {
  margin-top: 10px;
  font-family: "Playfair Display", serif; font-style: italic;
  letter-spacing: .4em; text-transform: uppercase;
  font-size: 14px; color: #d4a64a;
  animation: fade-in 1s ease 1.5s both;
}
@keyframes title-in {
  from { opacity: 0; letter-spacing: .6em; filter: blur(8px); }
  to   { opacity: 1; letter-spacing: .04em; filter: blur(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.intro-skip {
  position: absolute; bottom: 24px; left: 0; right: 0;
  text-align: center;
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 12px; letter-spacing: .25em; color: #9c8e75;
  animation: fade-in 1s ease 1s both;
}