/* =============================================
   TYPING NINJA — style.css
   ============================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050008;
}

/* =============================================
   SCENE
   ============================================= */
#scene {
  position: fixed;
  inset: 0;
  transition: opacity 1.2s ease;
}

#scene-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============ NINJA ============ */
#ninja-wrap {
  position: absolute;
  /* ground level: scene SVG ground is at y≈540/600 ≈ 90% from top */
  bottom: 7.5%;
  left: 0;
  /* The SVG is 93px tall — shift up so feet sit on ground */
  transform: translateY(0);
  animation: ninja-run 3.8s cubic-bezier(0.25, 0.1, 0.4, 1) forwards;
}

@keyframes ninja-run {
  0%   { transform: translateX(-80px); }
  82%  { transform: translateX(71vw); }
  88%  { transform: translateX(69.5vw); }   /* micro-brake before castle */
  100% { transform: translateX(70.5vw); }
}

/* Vertical bob while running */
#ninja-bob {
  animation: ninja-bob 0.32s ease-in-out infinite;
}
@keyframes ninja-bob {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}

/* Bob stops after run ends (JS adds .stopped class) */
#ninja-wrap.stopped #ninja-bob {
  animation: none;
}

/* ---- Limb pivot setup ---- */
/* Each limb <g> is translated so its pivot (hip/shoulder) = (0,0) in its local space */

/* Back leg pivot = hip centre of body (≈ x:35 y:72 in SVG viewBox) */
#leg-back {
  transform: translate(37px, 72px);
  transform-box: fill-box;
  animation: leg-b 0.32s ease-in-out infinite;
}
@keyframes leg-b {
  0%, 100% { transform: translate(37px, 72px) rotate(32deg); }
  50%       { transform: translate(37px, 72px) rotate(-32deg); }
}

#leg-front {
  transform: translate(33px, 72px);
  transform-box: fill-box;
  animation: leg-f 0.32s ease-in-out infinite;
}
@keyframes leg-f {
  0%, 100% { transform: translate(33px, 72px) rotate(-32deg); }
  50%       { transform: translate(33px, 72px) rotate(32deg); }
}

/* Arm pivots at shoulder (≈ x:35 y:44) */
#arm-back {
  transform: translate(37px, 47px);
  animation: arm-b 0.32s ease-in-out infinite;
}
@keyframes arm-b {
  0%, 100% { transform: translate(37px, 47px) rotate(38deg); }
  50%       { transform: translate(37px, 47px) rotate(-38deg); }
}

#arm-front {
  transform: translate(33px, 47px);
  animation: arm-f 0.32s ease-in-out infinite;
}
@keyframes arm-f {
  0%, 100% { transform: translate(33px, 47px) rotate(-38deg); }
  50%       { transform: translate(33px, 47px) rotate(38deg); }
}

/* Pause limbs when stopped */
#ninja-wrap.stopped #leg-back,
#ninja-wrap.stopped #leg-front,
#ninja-wrap.stopped #arm-back,
#ninja-wrap.stopped #arm-front {
  animation-play-state: paused;
}

/* Scene fade-out */
#scene.fade-out {
  opacity: 0;
  pointer-events: none;
}


/* =============================================
   MENU SCREEN
   ============================================= */
#menu-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #1e0a40 0%, #080010 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
}

#menu-screen.visible {
  opacity: 1;
  pointer-events: auto;
}

.menu-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ---- Title ---- */
.title-block {
  margin-bottom: 3.2rem;
}

#site-title {
  font-family: 'Cinzel Decorative', cursive;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
  user-select: none;
}

.t-typing {
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  font-weight: 900;
  color: #e8d09a;
  letter-spacing: 0.22em;
  text-shadow:
    0 0 20px rgba(255, 190, 60, 0.55),
    0 0 60px rgba(255, 130, 0, 0.25);
}

.t-ninja {
  font-size: clamp(4rem, 11vw, 10rem);
  font-weight: 900;
  color: #e8d09a;
  letter-spacing: 0.28em;
  margin-top: -0.05em;
  text-shadow:
    0 0 25px rgba(255, 190, 60, 0.6),
    0 0 70px rgba(255, 110, 0, 0.3),
    0 0 140px rgba(200, 60, 0, 0.15);
}

.title-sub {
  font-family: 'Shippori Mincho B1', serif;
  font-size: clamp(0.8rem, 1.8vw, 1.2rem);
  color: #7a6a5a;
  letter-spacing: 0.6em;
  margin-top: 0.6rem;
}

/* ---- Navigation ---- */
.menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.menu-btn {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
  font-weight: 500;
  background: transparent;
  border: 1px solid rgba(150, 110, 200, 0.35);
  color: #c8b090;
  padding: 0.75em 3.5em;
  min-width: 280px;
  cursor: pointer;
  letter-spacing: 0.18em;
  position: relative;
  overflow: hidden;
  transition: color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

/* Shimmer sweep on hover */
.menu-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 210, 100, 0.12) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.menu-btn:hover::before  { transform: translateX(120%); }

.menu-btn:hover {
  color: #fff5e0;
  border-color: rgba(220, 180, 80, 0.7);
  box-shadow:
    0 0 18px rgba(220, 160, 40, 0.25),
    inset 0 0 20px rgba(220, 160, 40, 0.06);
  transform: scaleX(1.025);
}

.menu-btn:active { transform: scaleX(0.99); }

/* ---- Language toggle ---- */
.lang-btn {
  font-size: clamp(0.75rem, 1.6vw, 1rem);
  padding: 0.6em 2.2em;
  min-width: 0;
  border-color: rgba(120, 90, 170, 0.25);
  letter-spacing: 0.08em;
}

.lang-opt {
  transition: color 0.3s, opacity 0.3s;
}

.lang-opt.active {
  color: #fff5e0;
  font-weight: 700;
}

.lang-opt:not(.active) {
  opacity: 0.35;
  color: #c8b090;
}

.lang-sep {
  opacity: 0.25;
  margin: 0 0.25em;
}

/* =============================================
   Menu item entrance animation
   (items slide up when menu-screen gets .visible)
   ============================================= */
.menu-btn {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}

#menu-screen.visible .menu-btn:nth-child(1) {
  opacity: 1; transform: translateY(0); transition-delay: 0.15s;
}
#menu-screen.visible .menu-btn:nth-child(2) {
  opacity: 1; transform: translateY(0); transition-delay: 0.3s;
}
#menu-screen.visible .menu-btn:nth-child(3) {
  opacity: 1; transform: translateY(0); transition-delay: 0.45s;
}

/* Title entrance */
#site-title, .title-sub {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

#menu-screen.visible #site-title {
  opacity: 1; transform: translateY(0); transition-delay: 0s;
}
#menu-screen.visible .title-sub {
  opacity: 1; transform: translateY(0); transition-delay: 0.08s;
}

/* ---- Legal footer links ---- */
.menu-footer {
  position: absolute;
  bottom: 1.6rem;
  left: 0;
  right: 0;
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#menu-screen.visible .menu-footer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.menu-footer a {
  font-family: 'Noto Serif JP', serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #7a6a5a;
  text-decoration: none;
  transition: color 0.25s;
}

.menu-footer a:hover {
  color: #c8a040;
}