/* Scroll-storytelling experience page (standalone). */
.xp { position: relative; }
.xp__canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block;
  background: radial-gradient(circle at 50% 25%, #34201492 0%, #140d08 75%), #120b07; }
.xp__panels { position: relative; z-index: 1; }
.xp__panel { min-height: 100vh; display: flex; align-items: center; padding: 0 9vw; }
.xp__panel--center { justify-content: center; text-align: center; }
.xp__panel--right { justify-content: flex-end; text-align: right; }
.xp__content { max-width: 560px; color: #fff; opacity: 0; transform: translateY(48px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.xp__content.in { opacity: 1; transform: none; }
.xp__content .eyebrow { color: var(--sand); letter-spacing: .18em; }
.xp__content h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.6rem); color: #fff; letter-spacing: -.02em; text-shadow: 0 6px 40px rgba(0,0,0,.55); margin: .1em 0 .3em; }
.xp__content p { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,.92); line-height: 1.7; }

.xp__progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--grad); z-index: 6; transition: width .1s linear; }
.xp__nav { position: fixed; top: 18px; left: 18px; z-index: 7; }
.xp__nav a { color: #fff; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.28); padding: 9px 15px; border-radius: 999px; backdrop-filter: blur(8px); font-weight: 600; font-size: .9rem; }
.xp__nav a:hover { background: rgba(0,0,0,.5); text-decoration: none; color: #fff; }
.xp__hint { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); z-index: 6; font-size: .85rem; letter-spacing: .1em; animation: xpbob 2s ease-in-out infinite; transition: opacity .4s; }
@keyframes xpbob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } }

@media (prefers-reduced-motion: reduce) { .xp__hint { animation: none; } }