@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes ember-rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: translateY(calc(var(--rise, -220px))) scale(0.45); opacity: 0; }
}
@keyframes route-draw { to { stroke-dashoffset: 0; } }
@keyframes line-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: rise-in var(--dur) var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.hero-map {
  clip-path: inset(50% 50% 50% 50%);
  animation: unroll 1100ms var(--ease) forwards;
}
@keyframes unroll { to { clip-path: inset(0% 0% 0% 0%); } }

.hero-crown path.draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 1200ms var(--ease) 300ms forwards;
}
.hero h1 span {
  opacity: 0;
  animation: line-in 800ms var(--ease) forwards;
}
.hero h1 span:nth-child(1) { animation-delay: 500ms; }
.hero h1 span:nth-child(2) { animation-delay: 680ms; }
.hero h1 span:nth-child(3) { animation-delay: 860ms; }

.ember-bit { animation: ember-rise var(--d, 7s) linear infinite; animation-delay: var(--delay, 0s); }

.nav-link, .btn, .chip, .tool, .book-card, .flipper, .loc-list button {
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}
.book-card:hover, .perk:hover { transform: translateY(-2px); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-out 280ms ease both; }
::view-transition-new(root) { animation: fade-in 480ms var(--ease) both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .hero-map { clip-path: none; }
  .hero-crown path.draw, .pre-crown path.draw { stroke-dashoffset: 0; }
  .hero h1 span { opacity: 1; }
  .ember-bit { display: none; }
  .flipper-inner { transform: none !important; }
  .flipper[aria-pressed="true"] .face.front { display: none; }
  .flipper .face.back { transform: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}