/* ═══════════════════════════════
   MUSE Recruit — TOP Page CSS
   ═══════════════════════════════ */

/* ── Body override ── */
html:has(body.is-top),
body.is-top { overflow: hidden; height: 100% }


/* ── Keyframes ── */
@keyframes pulsate {
  0%   { transform: scale(1); opacity: .6 }
  100% { transform: scale(2.2); opacity: 0 }
}
@keyframes marquee {
  0%   { transform: translateX(0) }
  100% { transform: translateX(-100%) }
}
@keyframes compassSpin {
  0%   { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}
@keyframes glowPulse {
  0%, 100% { opacity: .08; transform: scale(1) }
  50%      { opacity: .15; transform: scale(1.1) }
}
@keyframes particleRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0 }
  10%  { opacity: 1 }
  90%  { opacity: .6 }
  100% { transform: translateY(-100vh) translateX(var(--drift)); opacity: 0 }
}


/* ── Compass ── */
.compass-container { transition: opacity 1s ease }
.compass-needle {
  transition: transform .8s cubic-bezier(.34,1.56,.64,1);
  transform-origin: 50% 50%;
}
.compass-ring  { animation: compassSpin 60s linear infinite }
.compass-ticks { animation: compassSpin 120s linear infinite reverse }


/* ── Glow Orbs ── */
.glow-orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px); pointer-events: none;
  animation: glowPulse 12s ease-in-out infinite;
}
.glow-1 {
  width: 600px; height: 600px; top: -200px; left: -200px;
  background: radial-gradient(circle, rgba(30,144,255,.12), transparent 70%);
}
.glow-2 {
  width: 500px; height: 500px; bottom: -150px; right: -150px;
  background: radial-gradient(circle, rgba(135,206,235,.1), transparent 70%);
  animation-delay: -6s;
}


/* ── Particles ── */
.particle {
  position: absolute; width: 1px; height: 1px;
  background: #87CEEB; border-radius: 50%;
  box-shadow: 0 0 4px rgba(135,206,235,.6);
  animation: particleRise var(--dur) linear infinite;
  animation-delay: var(--delay);
  left: var(--x); bottom: -10px;
  --drift: var(--dx);
}


/* ── Slide Panel ── */
.slide-panel {
  will-change: transform;
  backface-visibility: hidden;
}


/* ── Background Photo (CurioTech方式) ── */
.--city {
  background-image: var(--image);
  background-size: cover;
  background-position: var(--bg-pos, center);
  opacity: var(--bg-opacity, .4);
}
.--city::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,6,14, var(--grad-top, .3)) 0%,
    rgba(6,6,14, var(--grad-mid, .1)) 35%,
    rgba(6,6,14, var(--grad-mid, .1)) 65%,
    rgba(6,6,14, var(--grad-bot, .65)) 100%
  );
}
.--city::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(6,6,14,.35) 100%);
  z-index: 1;
}