/* =====================================================================
   snake3d.css — 蛇と牡丹 3Dアニメーションセクション（スコープ限定）
   すべて .snake3d 配下に限定し、サイト全体のスタイルへ影響させない
   ===================================================================== */

.snake3d {
  --s-mx: 0;
  --s-my: 0;
  --s-rx: 0deg;
  --s-ry: 0deg;
  --s-px: 50%;
  --s-py: 50%;

  position: relative;
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  perspective: 1400px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.07), transparent 34%),
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.035), transparent 24%),
    #050505;
  color: #f5f5f5;
}

/* ── ヒーローパネル用コンパクト変種 ─────────────────────────── */
.snake3d--panel {
  min-height: 0;
  height: 100%;
  width: 100%;
}
.snake3d--panel .snake3d__stage {
  width: min(80%, 460px);
}
.snake3d--panel .snake3d__caption { display: none; }

.snake3d__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .5;
  z-index: 0;
}

/* ── アンビエントライト ─────────────────────────────────────── */
.snake3d__ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  opacity: .16;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.snake3d__ambient--a {
  width: 38vw; height: 38vw;
  left: -12vw; top: -16vw;
  background: white;
  animation: s3d-driftA 10s ease-in-out infinite alternate;
}
.snake3d__ambient--b {
  width: 32vw; height: 32vw;
  right: -10vw; bottom: -15vw;
  background: #777;
  animation: s3d-driftB 13s ease-in-out infinite alternate;
}

/* ── ステージ ───────────────────────────────────────────────── */
.snake3d__stage {
  position: relative;
  width: min(88vw, 720px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  z-index: 1;
}

.snake3d__rig {
  position: relative;
  width: 88%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(var(--s-rx)) rotateY(var(--s-ry)) translateZ(0);
  transition: transform 140ms ease-out;
  animation: s3d-breathe 6s ease-in-out infinite;
  will-change: transform;
}

.snake3d__depth {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  pointer-events: none;
}
.snake3d__depth img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.snake3d__depth--back {
  transform: translate3d(calc(var(--s-mx) * -10px), calc(var(--s-my) * -10px), -55px) scale(.99);
  filter: blur(16px) brightness(.28);
  opacity: .7;
}
.snake3d__depth--mid {
  transform: translate3d(calc(var(--s-mx) * -4px), calc(var(--s-my) * -4px), -16px) scale(1.004);
  filter: contrast(1.18) brightness(.55);
  opacity: .48;
}
.snake3d__depth--front {
  transform: translate3d(calc(var(--s-mx) * 10px), calc(var(--s-my) * 10px), 42px);
  filter: drop-shadow(0 28px 24px rgba(0,0,0,.58)) contrast(1.07);
}

.snake3d__shine {
  position: absolute;
  inset: 4%;
  transform: translateZ(70px);
  background: radial-gradient(circle at var(--s-px) var(--s-py), rgba(255,255,255,.29), rgba(255,255,255,.04) 13%, transparent 34%);
  mix-blend-mode: soft-light;
  -webkit-mask: url("/images/snake-peony.png") center / contain no-repeat;
  mask: url("/images/snake-peony.png") center / contain no-repeat;
  opacity: .9;
  pointer-events: none;
}

.snake3d__shadow {
  position: absolute;
  width: 68%;
  height: 12%;
  left: 16%;
  bottom: 0;
  transform: translateZ(-100px) rotateX(78deg);
  background: radial-gradient(ellipse, rgba(0,0,0,.95), transparent 68%);
  filter: blur(18px);
  opacity: .8;
}

/* ── 軌道リング ─────────────────────────────────────────────── */
.snake3d__orbit {
  position: absolute;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
}
.snake3d__orbit::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  box-shadow: 0 0 18px rgba(255,255,255,.7);
}
.snake3d__orbit--1 {
  width: 90%; height: 90%;
  transform: rotateX(67deg) rotateZ(12deg);
  animation: s3d-spin 12s linear infinite;
}
.snake3d__orbit--1::after { left: 8%; top: 18%; }
.snake3d__orbit--2 {
  width: 72%; height: 72%;
  transform: rotateY(70deg) rotateZ(-18deg);
  animation: s3d-spinReverse 17s linear infinite;
  opacity: .55;
}
.snake3d__orbit--2::after { right: 7%; bottom: 20%; width: 4px; height: 4px; }

/* ── キャプション ───────────────────────────────────────────── */
.snake3d__caption {
  position: absolute;
  top: clamp(32px, 6vw, 64px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.snake3d__eyebrow {
  font-size: 10px;
  letter-spacing: .28em;
  color: rgba(255,255,255,.5);
  margin-bottom: 12px;
}
.snake3d__title {
  font-family: var(--f-head, 'Cormorant Garamond', serif);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1;
  color: #fff;
}

.snake3d__hint {
  position: absolute;
  bottom: 2.6%;
  margin: 0;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .38em;
  animation: s3d-pulse 2.2s ease-in-out infinite;
  z-index: 1;
}

/* ── キーフレーム ───────────────────────────────────────────── */
@keyframes s3d-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.025; }
}
@keyframes s3d-spin { to { rotate: 1turn; } }
@keyframes s3d-spinReverse { to { rotate: -1turn; } }
@keyframes s3d-pulse { 50% { opacity: .25; transform: translateY(4px); } }
@keyframes s3d-driftA { to { transform: translate(10vw, 8vh) scale(1.1); } }
@keyframes s3d-driftB { to { transform: translate(-8vw, -6vh) scale(.9); } }

@media (max-width: 700px) {
  .snake3d__stage { width: 100vw; }
  .snake3d__rig { width: 92%; }
  .snake3d__hint { bottom: 7%; }
}

@media (prefers-reduced-motion: reduce) {
  .snake3d *, .snake3d *::before, .snake3d *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
  .snake3d__rig { transition: none; }
}