/* The Potion Room — custom layer on top of Tailwind CDN */

html { scroll-behavior: smooth; }

.hero-bg {
  background:
    radial-gradient(circle at 50% 30%, rgba(203, 162, 74, 0.18), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(183, 157, 223, 0.14), transparent 50%),
    radial-gradient(circle at 85% 90%, rgba(42, 28, 71, 0.6), transparent 55%),
    linear-gradient(160deg, #0a0712, #1a1130 70%, #2a1c47);
}
.vignette {
  background: radial-gradient(ellipse at center, transparent 35%, rgba(10, 7, 18, 0.85) 100%);
  pointer-events: none;
}

.ph-block { position: relative; overflow: hidden; }
.ph-1 { background: linear-gradient(160deg, #2a1c47, #cba24a44); }
.ph-2 { background: linear-gradient(160deg, #1a1130, #b79ddf44); }
.ph-3 { background: linear-gradient(160deg, #3a2a5a, #cba24a33); }
.ph-4 { background: linear-gradient(160deg, #14102a, #2a1c47); }
.ph-map { background: linear-gradient(160deg, #1a1130, #0a0712); }

section { animation: fade 0.7s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Hero photo — subtle Ken Burns drift */
.hero-photo { animation: kenburns 28s ease-out infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  section { animation: none; }
  .hero-photo { animation: none; }
}