/* ================= scroll-scrub film experience ================= */

.xp-stage { position: fixed; inset: 0; overflow: hidden; background: var(--ink); z-index: 1; }
.xp-stage video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%; width: auto; height: auto;
}
/* cinematic vignette + edge darkening so text always reads */
.xp-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(250,247,241,0.82) 0%, rgba(250,247,241,0.15) 34%, transparent 55%),
    linear-gradient(rgba(250,247,241,0.55), transparent 22%, transparent 70%, rgba(250,247,241,0.7)),
    radial-gradient(ellipse 78% 68% at 50% 50%, transparent 40%, rgba(250,247,241,0.55));
}

/* scroll track sets the scrub length */
.xp-track { position: relative; z-index: 2; pointer-events: none; }

/* ---------------- loader ---------------- */
.xp-loader {
  position: fixed; inset: 0; z-index: 150; background: var(--ink);
  display: grid; place-content: center; justify-items: center; gap: 22px;
  transition: opacity 0.8s, visibility 0.8s;
}
.xp-loader.done { opacity: 0; visibility: hidden; }
.xp-loader img { width: 92px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.xp-loader__panel { display: grid; justify-items: center; gap: 16px; transition: opacity 0.4s, transform 0.4s; }
.xp-loader__panel.gone { opacity: 0; transform: translateY(-8px); position: absolute; pointer-events: none; }
.xp-loader__bar { width: 220px; height: 2px; background: rgba(36,31,24,0.15); overflow: hidden; border-radius: 2px; }
.xp-loader__fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--clay), var(--amber)); transition: width 0.25s ease-out; }
.xp-loader p { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream-dim); }
.xp-loader__enter {
  opacity: 0; transform: translateY(14px) scale(0.96); pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.xp-loader__enter.show { opacity: 1; transform: none; pointer-events: auto; }

/* hold the page still until the visitor chooses to enter */
body.locked { overflow: hidden; }

/* ---------------- intro ---------------- */
.xp-intro {
  position: fixed; inset: 0; z-index: 30; display: grid; place-content: center;
  text-align: center; padding: 0 6vw; pointer-events: none;
}
.xp-intro__kicker {
  font-size: 0.76rem; letter-spacing: 0.44em; text-transform: uppercase;
  color: var(--amber); font-weight: 600; margin-bottom: 20px;
}
.xp-intro h1 {
  font-size: clamp(3rem, 10vw, 8.5rem); line-height: 0.94;
  text-shadow: 0 1px 14px rgba(250,247,241,0.95), 0 0 30px rgba(250,247,241,0.8);
}
.xp-intro h1 em { font-style: italic; color: var(--amber); }
.xp-intro__sub {
  max-width: 430px; margin: 24px auto 0; color: rgba(36,31,24,0.82);
  font-weight: 300; text-shadow: 0 1px 14px rgba(250,247,241,0.95), 0 0 30px rgba(250,247,241,0.8);
}
.xp-intro__scroll {
  margin-top: 44px; display: block; font-size: 0.7rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: rgba(36,31,24,0.6);
}
.xp-intro__scroll::after {
  content: ''; display: block; width: 1px; height: 46px; margin: 12px auto 0;
  background: linear-gradient(var(--amber), transparent);
  animation: drip 1.9s ease-in-out infinite;
}
@keyframes drip {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------------- chapter card ---------------- */
.xp-chapters { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.chapter-card {
  position: absolute; left: 5.5vw; top: 50%; width: min(430px, 42vw);
  transform: translateY(-50%);
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.chapter-card.on { opacity: 1; visibility: visible; pointer-events: auto; }
.chapter-card__num {
  font-family: var(--font-display); font-size: 4.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px rgba(156,92,20,0.55);
  margin-bottom: 4px;
}
.chapter-card__tag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--amber); font-weight: 600; margin-bottom: 12px;
}
.chapter-card h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 14px;
  text-shadow: 0 1px 14px rgba(250,247,241,0.95), 0 0 30px rgba(250,247,241,0.8);
}
.chapter-card p {
  color: rgba(36,31,24,0.85); font-weight: 300; font-size: 1rem;
  margin-bottom: 22px; text-shadow: 0 1px 14px rgba(250,247,241,0.95), 0 0 30px rgba(250,247,241,0.8);
}
/* each line of the card lifts in */
.chapter-card > * { transform: translateY(18px); transition: transform 0.75s cubic-bezier(0.22,1,0.36,1); }
.chapter-card.on > * { transform: none; }
.chapter-card.on > *:nth-child(2) { transition-delay: 0.06s; }
.chapter-card.on > *:nth-child(3) { transition-delay: 0.12s; }
.chapter-card.on > *:nth-child(4) { transition-delay: 0.18s; }
.chapter-card.on > *:nth-child(5) { transition-delay: 0.24s; }

/* ---------------- hotspot on the character ---------------- */
.xp-hotspots { position: fixed; z-index: 26; pointer-events: none; }
.hotspot {
  position: absolute; transform: translate(-50%, -50%);
  opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s;
}
.hotspot.on { opacity: 1; visibility: visible; pointer-events: auto; }
.hotspot button {
  width: 62px; height: 62px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.78); border: 1.5px solid rgba(36,31,24,0.3);
  backdrop-filter: blur(4px); color: var(--cream); font-size: 1.4rem; box-shadow: 0 6px 20px rgba(36,31,24,0.16);
  display: grid; place-items: center; position: relative;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s, border-color 0.3s;
}
.hotspot button::before, .hotspot button::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1.5px solid rgba(36,31,24,0.32); animation: ping 2.8s ease-out infinite;
}
.hotspot button::after { animation-delay: 1.4s; }
@keyframes ping {
  0% { transform: scale(0.7); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
.hotspot button:hover { transform: scale(1.14); background: var(--amber); border-color: var(--amber); }

/* ---------------- chapter rail ---------------- */
.xp-rail {
  position: fixed; right: 2.6vw; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 16px;
}
.xp-rail button {
  display: flex; align-items: center; gap: 12px; background: none; border: none;
  cursor: pointer; color: rgba(36,31,24,0.45); font-family: var(--font-body);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.3s; padding: 0;
}
.xp-rail button span.label {
  opacity: 0; transform: translateX(8px);
  transition: opacity 0.3s, transform 0.3s; white-space: nowrap;
}
.xp-rail button:hover span.label { opacity: 1; transform: none; }
.xp-rail button i {
  width: 26px; height: 2px; background: currentColor; display: block;
  transition: width 0.35s cubic-bezier(0.22,1,0.36,1), background 0.3s;
  order: 2;
}
.xp-rail button span.label { order: 1; }
.xp-rail button:hover { color: rgba(36,31,24,0.9); }
.xp-rail button.active { color: var(--amber); }
.xp-rail button.active i { width: 46px; }
.xp-rail button.active span.label { opacity: 1; transform: none; }

/* ---------------- outro ---------------- */
.xp-outro {
  position: fixed; inset: 0; z-index: 28; display: grid; place-content: center;
  text-align: center; padding: 0 6vw; opacity: 0; visibility: hidden;
  transition: opacity 0.8s, visibility 0.8s; pointer-events: none;
}
.xp-outro.on { opacity: 1; visibility: visible; pointer-events: auto; }
.xp-outro h2 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); margin-bottom: 16px; text-shadow: 0 1px 14px rgba(250,247,241,0.95), 0 0 30px rgba(250,247,241,0.8); }
.xp-outro p { color: rgba(36,31,24,0.8); max-width: 460px; margin: 0 auto 32px; font-weight: 300; }
.xp-outro__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------- progress ---------------- */
.xp-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(36,31,24,0.1); z-index: 45; }
.xp-progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--clay), var(--amber)); }

/* ---------------- story popup ---------------- */
.xp-overlay {
  position: fixed; inset: 0; z-index: 120; padding: 4vw;
  background: rgba(6,5,4,0.72); backdrop-filter: blur(10px);
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.xp-overlay.open { opacity: 1; pointer-events: auto; }
.xp-modal {
  position: relative; width: min(720px, 94vw); max-height: 86vh; overflow-y: auto;
  background: var(--ink-2); border: 1px solid rgba(36,31,24,0.1);
  border-radius: 24px; overflow: hidden;
  transform: translateY(34px) scale(0.96); opacity: 0;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.4s;
}
.xp-overlay.open .xp-modal { transform: none; opacity: 1; }
.xp-modal__still { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.xp-modal__inner { padding: 34px 42px 40px; }
.xp-modal__tag {
  font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--amber); font-weight: 600; display: block; margin-bottom: 10px;
}
.xp-modal h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 14px; }
.xp-modal p { color: var(--cream-dim); font-weight: 300; margin-bottom: 14px; }
.xp-modal__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.xp-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; border: none;
  background: rgba(250,247,241,0.7); color: var(--cream); font-size: 1rem;
  backdrop-filter: blur(6px); transition: background 0.25s, transform 0.25s;
}
.xp-modal__close:hover { background: var(--clay); transform: rotate(90deg); }

@media (max-width: 900px) {
  .xp-stage::after {
    background:
      linear-gradient(rgba(250,247,241,0.5), transparent 26%, rgba(250,247,241,0.55) 62%, rgba(250,247,241,0.9)),
      radial-gradient(ellipse 80% 70% at 50% 45%, transparent 42%, rgba(250,247,241,0.5));
  }
  .chapter-card {
    left: 6vw; right: 6vw; width: auto; top: auto; bottom: 12vh; transform: none;
  }
  .chapter-card.on > * { transform: none; }
  .chapter-card__num { font-size: 3.2rem; }
  .xp-rail { right: 3vw; gap: 13px; }
  .xp-rail button span.label { display: none; }
  .hotspot button { width: 52px; height: 52px; font-size: 1.15rem; }
  .xp-modal__inner { padding: 26px 24px 32px; }
}