/* Service scroll world (Stage 4). Builds on home.css tokens.
   A fixed stage holds the film; the page scrolls a tall .track that js/service.js maps
   to video time; the .end card then scrolls up over the final "after" frame. */

.world-page { padding-bottom: 0; background: #0b1311; }
.world-page::before { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- stage ---------- */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0b1311; }
.stage-blur {
  position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover;
  filter: blur(38px) saturate(1.1) brightness(.45); transform: scale(1.05);
}
.frame {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; aspect-ratio: 3 / 4; max-width: 100%; overflow: hidden;
  box-shadow: 0 0 80px rgba(0, 0, 0, .6);
}
/* phones / tall windows: fill the screen, crop the film's sides */
@media (max-aspect-ratio: 3/4) {
  .frame { left: 0; right: 0; transform: none; width: 100%; aspect-ratio: auto; }
}
.poster, .film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster-after { opacity: 0; }                      /* fallback scrub = poster crossfade */
.film { opacity: 0; transition: opacity .4s ease; background: transparent; }
.film.is-ready { opacity: 1; }
.frame-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 14, 12, .55), transparent 22%),
    linear-gradient(to top, rgba(8, 14, 12, .7), transparent 38%);
}

.chip {
  position: absolute; top: calc(70px + env(safe-area-inset-top)); left: 16px; display: grid;
  padding: 7px 13px; border-radius: 999px; background: rgba(12, 20, 18, .62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 700 11px/1 var(--f-brand); letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s;
}
.chip span { grid-area: 1 / 1; transition: opacity .3s; }
.chip .c-after { opacity: 0; color: var(--mint); }
.stage.is-after .chip .c-before { opacity: 0; }
.stage.is-after .chip .c-after { opacity: 1; }
.progress {
  position: absolute; top: calc(62px + env(safe-area-inset-top)); left: 16px; right: 16px; height: 3px;
  border-radius: 3px; background: rgba(241, 245, 242, .18); overflow: hidden; opacity: 0; transition: opacity .3s;
}
.progress i { display: block; height: 100%; width: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); }
.stage.is-scrubbing .chip, .stage.is-scrubbing .progress { opacity: 1; }

/* ---------- the spell ---------- */
.spell-wrap {
  position: absolute; left: 0; right: 0; top: 38%; transform: translateY(-50%);
  padding: 0 20px; text-align: center; pointer-events: none;
}
.spell {
  margin: 0; font: 400 clamp(46px, 14vw, 92px)/1 "Mystery Quest", var(--f-script);
  letter-spacing: .02em; color: var(--mint);
  text-shadow: 0 0 18px rgba(185, 228, 203, .55), 0 4px 22px rgba(0, 0, 0, .7);
}
.spell .ch { display: inline-block; opacity: 0; transform: translateY(12px) scale(.6) rotate(-8deg); filter: blur(6px);
  animation: conjure .7s cubic-bezier(.2, .9, .3, 1.3) forwards; animation-delay: calc(.35s + var(--k) * 55ms); }
.spell .spark {
  position: absolute; width: 6px; height: 6px; margin: -3px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff, var(--mint) 45%, transparent 70%); border-radius: 50%;
  animation: twinkle var(--d, 2.2s) ease-in-out infinite; animation-delay: var(--delay, 0s);
}
.whisper {
  margin: 14px auto 0; max-width: 22ch; font: 600 25px/1.15 var(--f-script); color: var(--ink);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
  opacity: 0; animation: rise .8s 1.3s cubic-bezier(.2, .8, .2, 1) forwards;
}
.magic-line {
  position: absolute; left: 20px; right: 20px; bottom: calc(40px + env(safe-area-inset-bottom));
  margin: 0; text-align: center; font: 700 30px/1.1 var(--f-script); color: var(--mint);
  text-shadow: 0 0 16px rgba(185, 228, 203, .45), 0 3px 16px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(12px);
}
.hint {
  position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  margin: 0; display: grid; justify-items: center; gap: 2px; white-space: nowrap;
  font: 600 22px/1 var(--f-script); color: var(--mint); text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
  animation: fade-in .8s 1.8s backwards;
}
.hint svg { width: 24px; height: 24px; stroke-width: 2.2; animation: nudge 1.6s ease-in-out infinite; }
.loading {
  position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(12, 20, 18, .7);
  font-size: 13px; color: var(--muted); white-space: nowrap; transition: opacity .3s;
}
.loading:empty { opacity: 0; }
.loading a { color: var(--mint); }

.end-scrim { position: absolute; inset: 0; background: #0b1311; opacity: 0; pointer-events: none; }

/* ---------- top nav ---------- */
.world-top {
  position: fixed; z-index: 10; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(12px + env(safe-area-inset-top)) 16px 0;
  pointer-events: none;
}
.world-top a { pointer-events: auto; }
.back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 8px;
  border-radius: 999px; background: rgba(12, 20, 18, .62); text-decoration: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 600 14px/1 var(--f-body);
}
.back svg { width: 20px; height: 20px; stroke-width: 2.2; }
.top-call {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sage); color: #0f1f18;
}
.top-call svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }

/* ---------- end card ---------- */
.world-page main { position: relative; z-index: 5; }
.end {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; padding: 90px 18px calc(40px + env(safe-area-inset-bottom));
}
.end-card {
  width: min(100%, 460px); text-align: center; padding: 32px 22px 26px; border-radius: 28px;
  background: rgba(22, 34, 32, .86); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.end-mark { width: 58px; height: 42px; fill: var(--sage); stroke: none; }
.end-eyebrow { margin: 10px 0 0; font: 700 11.5px/1.3 var(--f-brand); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.end h2 { margin: 10px 0 0; font: 400 38px/.95 var(--f-display); text-transform: uppercase; }
.end h2 span { display: block; color: var(--sage); }
.end-number {
  display: block; margin-top: 14px; text-decoration: none;
  font: 400 clamp(46px, 13vw, 64px)/1 var(--f-display); letter-spacing: .02em;
}
.end-sub { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.end-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.end-more { margin: 26px 0 10px; font: 600 23px/1 var(--f-script); color: var(--mint); }
.end-others { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.end-others a {
  display: inline-block; padding: 9px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  font: 700 11.5px/1 var(--f-brand); letter-spacing: .1em; text-transform: uppercase; color: #d3ddd8;
  transition: background-color .2s, color .2s;
}
@media (hover: hover) {
  .end-others a:hover { background: var(--sage); color: #0f1f18; }
  .end-number:hover { color: var(--mint); }
}

@keyframes conjure { to { opacity: 1; transform: none; filter: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.2); } }

@media (min-width: 900px) {
  .chip { left: 22px; }
  .progress { left: 22px; right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .spell .ch, .whisper { opacity: 1; transform: none; filter: none; }
  .spell .spark { display: none; }
}