/* ═══════════════════════════════════════
   Motion & Interaction
   Figma往復の影響を受けない動的CSS
═══════════════════════════════════════ */


/* ── Book tilt on mouse ── */
.hero-book {
  perspective: 800px;
}

.book-mockup {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.book-spine,
.book-pages {
  transition: width 0.15s ease-out;
}

.book-cover::after {
  transition: background-position 0.3s ease-out;
}


/* ── CTA Button hover ── */
.btn,
.btn-ghost,
.platform-pill {
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover {
  background: #E8432A;
}

.btn-ghost:hover {
  background: #E8432A;
  border-color: #E8432A;
  color: #FFF;
}

.platform-pill:hover {
  background: #E8432A;
  border-color: #E8432A;
}


/* ── Text link hover ── */
.nav-link {
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: #E8432A;
}


/* ── Flywheel scroll rotation ── */
.toolkit-flywheel svg {
  will-change: transform;
}


/* ── Nav hide on scroll ── */
.nav {
  transition: transform 0.3s ease;
}

.nav.nav-hidden {
  transform: translateY(-100%);
}