/* =====================================================================
   MUCA BRASIL — HALLOWEEN 2026
   Dark fantasy cinematic experience
   ===================================================================== */

:root {
  /* noite: pretos e azuis frios dão profundidade */
  --ink-0: #06070a;
  --ink-1: #0b0e13;
  --ink-2: #121720;
  /* texto */
  --bone: #ece5d8;
  --bone-2: #c4bcae;
  --bone-3: #8f887d;
  /* ambiente */
  --mist: #a3afbf;
  --mist-2: #5f6b7b;
  --moss: #17221c;
  --earth: #1a130e;
  /* luz real (tochas, lanternas) — usar com parcimônia */
  --flame: #ec8a3a;
  --flame-2: #ffb766;
  /* perigo */
  --blood: #b8392e;
  --blood-2: #e0675a;
  /* recompensas */
  --gold: #d6b26a;
  --gold-2: #7f6534;

  --f-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --f-voice: 'Cormorant Garamond', Georgia, serif;
  --f-text: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --axis: clamp(16px, 31vw, 620px);   /* eixo vertical que liga abertura, prólogo e final */
  --topbar: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink-0); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--bone-2);
  font: 400 17.5px/1.65 var(--f-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
strong { color: var(--bone); font-weight: 700; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--flame-2); outline-offset: 3px; border-radius: 2px; }
section[id], main [id] { scroll-margin-top: calc(var(--topbar) + 8px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--bone); color: var(--ink-0);
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }

/* ---------- tipografia compartilhada ---------- */
.kicker {
  display: flex; align-items: center; gap: 12px;
  font: 600 13px/1.2 var(--f-display);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist);
}
.kicker span {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--bone-3); letter-spacing: .12em;
}
.kicker span::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.kicker--gold { color: var(--gold); }

/* tipo de evento: só texto, na cor da categoria */
.badge {
  display: block; width: fit-content;
  font: 600 12px/1.2 var(--f-text); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c, var(--mist));
}
.badge--invasao { --c: var(--blood-2); }
.badge--mapa { --c: #b49cf0; }
.badge--missao { --c: var(--flame); }

.voice {
  font: italic 500 clamp(22px, 2vw, 28px)/1.3 var(--f-voice);
  color: var(--bone);
  max-width: 34ch;
}

.caveat {
  max-width: 62ch;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--mist-2);
  font-size: 15px; line-height: 1.6;
  color: var(--bone-2);
}
.caveat strong { color: var(--bone); }
.caveat--blood { border-left-color: var(--blood); }
.caveat--gold { border-left-color: var(--gold); }

/* =====================================================================
   BARRA SUPERIOR
   ===================================================================== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--topbar);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
  transition: background-color .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.topbar[data-solid="true"] {
  background: rgba(6, 7, 10, .92);
  border-bottom-color: rgba(236, 229, 216, .08);
}
/* na abertura o menu some (os capítulos da própria cena já navegam); depois dela, recolhe ao descer e volta ao subir */
.topbar { transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .3s, background-color .35s ease, border-color .35s ease; }
.topbar[data-solid="false"] { opacity: 0; visibility: hidden; pointer-events: none; }
.topbar[data-hidden="true"]:not(:focus-within) { transform: translateY(-100%); }
.topbar__mark { flex: none; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.topbar[data-solid="true"] .topbar__mark { opacity: 1; visibility: visible; }
.topbar__mark img { height: 36px; width: auto; }
.topbar__nav { margin-left: auto; display: flex; gap: clamp(14px, 1.8vw, 28px); }
.topbar__nav a {
  position: relative; padding: 6px 0;
  font-size: 15px; font-weight: 500; color: var(--bone-2);
  text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.topbar__nav a:hover { color: var(--bone); }
.topbar__nav a[aria-current="true"] { color: var(--bone); }
.topbar__nav a[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--flame);
}
.topbar__toggle {
  display: none; margin-left: auto; align-items: center; gap: 10px;
  padding: 8px 4px; border: 0; background: none; cursor: pointer;
  font: 600 13px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--bone);
}
.topbar__toggle-lines, .topbar__toggle-lines::before, .topbar__toggle-lines::after {
  display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .25s;
}
.topbar__toggle-lines { position: relative; }
.topbar__toggle-lines::before, .topbar__toggle-lines::after { content: ""; position: absolute; left: 0; }
.topbar__toggle-lines::before { top: -6px; }
.topbar__toggle-lines::after { top: 6px; }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-lines { background: transparent; }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-lines::before { transform: translateY(6px) rotate(45deg); }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-lines::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .topbar__toggle { display: inline-flex; }
  .topbar__nav {
    position: absolute; top: var(--topbar); left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 20px;
    background: rgba(6, 7, 10, .97);
    border-bottom: 1px solid rgba(236, 229, 216, .1);
    display: none;
  }
  .topbar__nav.is-open { display: flex; }
  .topbar__nav a { padding: 13px 0; font-size: 17px; border-bottom: 1px solid rgba(236, 229, 216, .07); }
  .topbar__nav a[aria-current="true"]::after { display: none; }
  .topbar:has(.is-open) { background: rgba(6, 7, 10, .97); }
}

/* =====================================================================
   CENA 1 — A CHEGADA
   ===================================================================== */
.arrival {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 640px; max-height: 1200px;
  overflow: hidden; isolation: isolate;
  background: #0a0d12;
}
.arrival__stage { position: absolute; inset: 0; }
.arrival__plate {
  position: absolute; inset: -3%; width: 106%; height: 106%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
}
.arrival__tree {
  position: absolute; right: -5%; bottom: -6%;
  height: 96%; width: auto; max-width: none;
  filter: blur(2px) brightness(.55);
}
.arrival__fog {
  position: absolute; left: 0; right: 0; bottom: 4%; height: 32%;
  background: url(../img/fog.webp) center bottom / 125% 100% no-repeat;
  opacity: .22;
}
.arrival__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.arrival.is-3d .arrival__canvas { opacity: 1; }

.arrival__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 7, 10, .65) 0, rgba(6, 7, 10, 0) 16%),
    radial-gradient(ellipse 44% 34% at 50% 28%, rgba(6, 8, 12, .5), transparent 72%),
    linear-gradient(0deg, var(--ink-0) 0, rgba(6, 7, 10, .82) 14%, rgba(6, 7, 10, 0) 40%);
}

.arrival__title {
  position: absolute; z-index: 2;
  left: var(--axis); top: clamp(76px, 11vh, 132px);
  width: min(40vw, 760px);
}
.arrival__mark { position: relative; }
.arrival__mark::before {          /* luz das letras acesas espalhando na névoa atrás do logo */
  content: ""; position: absolute; left: -6%; right: -6%; top: 20%; bottom: -34%; z-index: -1;
  background: radial-gradient(ellipse 52% 50% at 50% 46%, rgba(236, 138, 58, .20), rgba(236, 138, 58, .06) 55%, transparent 74%);
  mix-blend-mode: screen; pointer-events: none;
}
.arrival__mark img {
  width: 100%; height: auto;
  filter:
    drop-shadow(0 0 2px rgba(0, 0, 0, .55))            /* assenta a borda da placa */
    drop-shadow(0 0 22px rgba(236, 138, 58, .20))      /* borda suavizada pela luz das letras */
    drop-shadow(0 22px 38px rgba(0, 0, 0, .7));        /* sombra projetada na cena */
}
@media (prefers-reduced-motion: no-preference) { .is-live-hero .arrival__mark::before { animation: flicker 7.1s steps(1) infinite; } }
.arrival__year {
  display: block; text-align: center; margin-top: -.1em; padding-left: .32em;   /* compensa o espaço que o letter-spacing deixa depois do último dígito */
  font: 600 clamp(26px, 2.6vw, 46px)/1 var(--f-display);
  letter-spacing: .32em;
  color: #dfe4ea;
  text-shadow: 0 0 22px rgba(170, 195, 230, .35), 0 3px 10px rgba(0, 0, 0, .9);
}
.arrival__lead {
  margin-top: clamp(26px, 3.6vh, 40px);
  max-width: 30ch;
  font: italic 500 clamp(21px, 1.75vw, 28px)/1.3 var(--f-voice);
  color: var(--bone);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .95);
}
.arrival__status {
  margin-top: 14px;
  font-size: 15px; letter-spacing: .04em; color: var(--mist);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}
.arrival__status strong { color: var(--bone-2); font-weight: 500; }
.arrival__cta {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 26px; padding: 10px 0;
  font: 600 14px var(--f-display); letter-spacing: .18em; text-transform: uppercase;
  color: var(--bone); text-decoration: none;
}
.arrival__cta::after {
  content: ""; width: 46px; height: 1px; background: var(--flame);
  box-shadow: 0 0 10px rgba(236, 138, 58, .7);
  transition: width .4s ease;
}
.arrival__cta:hover::after { width: 76px; }

.chapters {
  position: absolute; z-index: 2;
  left: calc(var(--axis) + 3vw); right: var(--gutter); bottom: clamp(22px, 4.5vh, 48px);
}
.chapters ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); }
.chapters a {
  position: relative; display: grid; gap: 4px;
  padding-top: 16px; text-decoration: none;
  border-top: 1px solid rgba(236, 229, 216, .22);
}
.chapters a::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--flame-2); box-shadow: 0 0 12px rgba(255, 183, 102, .8);
  transition: width .5s ease;
}
.chapters a:hover::before, .chapters a:focus-visible::before { width: 100%; }
/* primeira visita: atalhos esmaecidos e sem clique até o final da página ser alcançado */
.chapters a { transition: opacity .9s ease; }
.chapters-locked .chapters a { opacity: .32; pointer-events: none; cursor: default; }
.chapters__n { font: 600 13px var(--f-display); letter-spacing: .14em; color: var(--mist); }
.chapters__t { font: 600 clamp(15px, 1.15vw, 18px)/1.25 var(--f-display); color: var(--bone); }
.chapters__w { font-size: 14px; line-height: 1.4; color: var(--bone-3); }
.chapters .badge { font-size: 11px; letter-spacing: .16em; }

/* =====================================================================
   PRÓLOGO
   ===================================================================== */
.prologue {
  margin: clamp(64px, 11vh, 130px) var(--gutter) clamp(30px, 6vh, 70px) var(--axis);
  max-width: 34ch;
  font: italic 500 clamp(24px, 2.3vw, 34px)/1.35 var(--f-voice);
  color: var(--bone-2);
}
.prologue__name { color: var(--bone); font-style: normal; font-family: var(--f-display); font-weight: 600; font-size: .8em; letter-spacing: .04em; }

/* =====================================================================
   CENA 2 — O LEVANTAR DOS MORTOS
   Paisagem fria que sangra pela direita; texto na escuridão à esquerda;
   a invasão avança da esquerda para a direita, esfriando até o vermelho.
   ===================================================================== */
.rise { --scene-h: clamp(560px, 92vh, 940px); position: relative; padding-bottom: clamp(70px, 12vh, 140px); }
.rise__scene {
  position: absolute; top: 0; right: 0; left: 24%;
  height: var(--scene-h);
  overflow: hidden;
}
.rise__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
.rise__scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink-0) 0, rgba(6, 7, 10, .7) 22%, rgba(6, 7, 10, 0) 48%),
    linear-gradient(180deg, var(--ink-0) 0, rgba(6, 7, 10, 0) 18%, rgba(6, 7, 10, 0) 62%, var(--ink-0) 100%),
    linear-gradient(270deg, rgba(6, 7, 10, .6) 0, rgba(6, 7, 10, 0) 12%);
}
/* brasa vermelha que sobe das covas */
.rise__blood {
  position: absolute; left: 20%; right: 0; bottom: 6%; height: 52%;
  background: radial-gradient(ellipse 50% 55% at 60% 84%, rgba(184, 57, 46, .3), rgba(184, 57, 46, 0) 70%);
  mix-blend-mode: screen;
  opacity: .9;
}
.rise__fog {
  position: absolute; left: 0; bottom: 8%; width: 200%; height: 34%;
  background: url(../img/fog.webp) 0 100% / 50% auto repeat-x;
  opacity: .32;
}
.is-live .rise__fog { animation: drift 110s linear infinite; }
.is-live .rise__blood { animation: smoulder 9s ease-in-out infinite; }
@keyframes drift { to { transform: translateX(-50%); } }
@keyframes smoulder { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

.rise__copy {
  position: relative; z-index: 1;
  margin-left: var(--gutter);
  width: min(620px, 44vw);
  padding-top: clamp(40px, 8vh, 110px);
  min-height: calc(var(--scene-h) * .74);
  display: grid; gap: 18px; align-content: start;
}
.rise__title {
  margin: 4px 0 6px;
  font: 600 clamp(44px, 4.6vw, 80px)/.98 var(--f-display);
  letter-spacing: .01em;
  color: #e3e9f0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .8);
}
.rise__copy > p:not(.kicker):not(.voice) { max-width: 46ch; }
.rise__copy .voice { color: #dde4ec; }

.facts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 6px; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mist-2); }
.facts dd { font: 600 17px var(--f-display); color: var(--bone); }

.acts {
  position: relative; z-index: 1;
  margin: clamp(36px, 6vh, 64px) var(--gutter) 0 calc(24% + 2vw);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.acts__step { position: relative; padding: 30px 28px 0 0; }
.acts__step::before {           /* a frente de avanço */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
}
.acts__step:nth-child(1) { --c1: rgba(163, 175, 191, .25); --c2: rgba(163, 175, 191, .55); }
.acts__step:nth-child(2) { --c1: rgba(163, 175, 191, .55); --c2: rgba(184, 57, 46, .7); }
.acts__step:nth-child(3) { --c1: rgba(184, 57, 46, .8); --c2: rgba(224, 103, 90, 1); }
.acts__n {
  position: absolute; top: -13px; left: 0;
  display: grid; place-items: center; width: 26px; height: 26px;
  background: var(--ink-0);
  font: 700 15px var(--f-display); color: var(--mist);
}
.acts__step--key .acts__n { color: var(--blood-2); }
.acts h3 { font: 600 clamp(19px, 1.6vw, 24px)/1.2 var(--f-display); color: var(--bone); margin-bottom: 6px; }
.acts p { font-size: 16.5px; max-width: 30ch; }
.acts__step--key h3 { color: #f1d6cf; }

.rise > .caveat { margin: clamp(36px, 6vh, 60px) var(--gutter) 0 calc(24% + 2vw); }

/* =====================================================================
   CENA 3 — VALLEY OF HALLOWEEN
   Panorama largo como protagonista; lanterna em primeiro plano;
   título ancorado na borda inferior; placa de entrada em pedra do MU.
   ===================================================================== */
.valley { position: relative; padding-bottom: clamp(80px, 13vh, 150px); }
.valley__panorama {
  position: relative;
  height: clamp(440px, 46vw, 860px);
  overflow: hidden;
}
.valley__img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 42%; }
.valley__panorama::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--ink-0) 0, rgba(6, 7, 10, 0) 22%, rgba(6, 7, 10, 0) 58%, rgba(6, 7, 10, .9) 88%, var(--ink-0) 100%),
    radial-gradient(ellipse 70% 80% at 60% 40%, rgba(0, 0, 0, 0) 40%, rgba(6, 7, 10, .55) 100%);
}
.valley__lantern {
  position: absolute; z-index: 1;
  left: clamp(-60px, -2vw, 0px); top: 0;
  width: clamp(150px, 17vw, 300px);
  filter: brightness(.62) contrast(1.05);
}
.valley__lantern img { width: 100%; height: auto; }
.valley__lantern-light {
  position: absolute; left: 25%; top: 58%;
  width: 300%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 183, 102, .38) 0, rgba(236, 138, 58, .12) 22%, rgba(236, 138, 58, 0) 50%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.valley__lantern-light::before {    /* o vidro aceso */
  content: ""; position: absolute; left: 50%; top: 50%; width: 9%; height: 13%;
  transform: translate(-50%, -50%); border-radius: 40%;
  background: radial-gradient(ellipse, rgba(255, 214, 150, .95), rgba(255, 170, 80, .3) 60%, transparent 75%);
}
.is-live .valley__lantern-light { animation: flicker 5.3s steps(1) infinite; }
@keyframes flicker {
  0% { opacity: 1; } 12% { opacity: .86; } 14% { opacity: 1; } 41% { opacity: .93; }
  43% { opacity: .78; } 45% { opacity: .98; } 70% { opacity: .9; } 72% { opacity: 1; } 88% { opacity: .84; } 90% { opacity: 1; }
}

.valley__head {
  position: relative; z-index: 2;
  margin: clamp(-150px, -9vw, -70px) var(--gutter) 0;
  display: grid; justify-items: end; text-align: right; gap: 10px;
}
.valley__head .kicker { flex-direction: row-reverse; }
.valley__head .kicker span { flex-direction: row-reverse; }
.valley__title {
  font: 600 clamp(46px, 7.6vw, 132px)/.92 var(--f-display);
  letter-spacing: -.005em;
  color: #f2e2c9;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 10px 40px rgba(0, 0, 0, .9);
}

.valley__body {
  margin: clamp(60px, 9vh, 100px) var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 110px); align-items: start;
}
.valley__story { order: 2; display: grid; gap: 18px; max-width: 640px; }

.regions { margin-top: 12px; border-top: 1px solid rgba(236, 229, 216, .1); }
.regions div {
  display: grid; grid-template-columns: minmax(150px, 13rem) 1fr; gap: 6px 22px;
  padding: 16px 0; border-bottom: 1px solid rgba(236, 229, 216, .1);
}
.regions dt { font: 600 18px/1.35 var(--f-display); color: var(--bone); }
.regions dd { font-size: 16.5px; }

/* placa de entrada: pedra e barra prateada da tela de login do MU */
.plate {
  position: relative; order: 1;
  padding: 30px clamp(22px, 2.4vw, 34px) 28px;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, .35), rgba(8, 8, 10, .75)),
    url(../img/mu-stone.webp) center / cover;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(200, 200, 210, .1);
}
.plate__title {
  font: 600 14px var(--f-display); letter-spacing: .2em; text-transform: uppercase;
  color: #d9dce2; margin-bottom: 14px;
}
.plate__list div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid rgba(220, 222, 230, .1);
}
.plate__list dt { font-size: 14.5px; color: #9ea4ad; }
.plate__list dd { font-size: 17.5px; color: #e6e4df; text-align: right; }
.plate__list dd strong { font-family: var(--f-display); font-weight: 700; font-size: 1.12em; color: #fff; }
.plate__note { margin-top: 18px; font-size: 15px; line-height: 1.55; color: #b9bcc3; }

/* =====================================================================
   CENA 4 — DOÇURAS OU TRAVESSURAS
   Cena íntima: a luz da abóbora revela a parede de pedra; olhos na escuridão.
   ===================================================================== */
.treat {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 70px);
  padding: clamp(60px, 10vh, 120px) var(--gutter) clamp(80px, 12vh, 140px) 0;
  background:
    linear-gradient(180deg, var(--ink-0) 0, rgba(6, 7, 10, 0) 14%, rgba(6, 7, 10, 0) 86%, var(--ink-0) 100%),
    radial-gradient(ellipse 60% 70% at 26% 60%, #1c120b 0, #0d0907 55%, var(--ink-0) 100%);
}
.treat__stage {
  position: relative;
  height: clamp(480px, 74vh, 760px);
  overflow: hidden;
}
.treat__wall {
  position: absolute; inset: 0;
  background: url(../img/mu-stone.webp) center / 520px auto repeat;
  -webkit-mask-image: radial-gradient(ellipse 52% 58% at 52% 66%, #000 0, rgba(0, 0, 0, .35) 45%, transparent 75%);
          mask-image: radial-gradient(ellipse 52% 58% at 52% 66%, #000 0, rgba(0, 0, 0, .35) 45%, transparent 75%);
  filter: sepia(1) saturate(2.6) hue-rotate(-16deg) brightness(1.55);   /* a pedra recebe a cor da chama */
  opacity: .7;
}
.treat__eyes {
  position: absolute; left: 6%; top: 0; width: 88%; height: 62%;
  object-fit: cover; object-position: 50% 30%;
  mix-blend-mode: screen; opacity: .3;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 45%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 45%, #000 30%, transparent 75%);
  pointer-events: none;
}
.treat__glow {
  position: absolute; left: 50%; top: 66%; width: 110%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 150, 60, .32) 0, rgba(236, 110, 40, .1) 30%, transparent 58%);
  mix-blend-mode: screen; pointer-events: none;
}
.is-live .treat__glow { animation: flicker 6.7s steps(1) infinite; }
.treat__lamp {
  position: absolute; right: 7%; bottom: 13%;
  width: clamp(110px, 17%, 190px); height: auto;
  filter: blur(.8px) brightness(.85) drop-shadow(0 0 22px rgba(255, 170, 80, .45));
}
.treat__jack {
  position: absolute; left: 50%; bottom: 3%;
  width: min(74%, 560px); height: auto;
  transform: translateX(-54%);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7));
}
.treat__floor {
  position: absolute; left: 10%; right: 4%; bottom: 0; height: 16%;
  background: radial-gradient(ellipse 50% 70% at 46% 30%, rgba(0, 0, 0, .75), transparent 70%);
}

.treat__copy { display: grid; gap: 18px; max-width: 780px; }
/* o card do Jack usa a largura toda da coluna; os parágrafos continuam na medida de leitura */
.treat__copy > p { max-width: 600px; }
.treat__title {
  font: 600 clamp(40px, 4.8vw, 78px)/1 var(--f-display);
  color: #f3dfc4;
  margin: 4px 0 4px;
}
.treat__title em { font: italic 500 .7em var(--f-voice); color: var(--bone-2); }

/* janela de diálogo de NPC — moldura da interface do MU */
.npc {
  position: relative;
  margin: 18px 0 12px;
  padding: 28px clamp(18px, 2.2vw, 30px) 26px;
  background:
    linear-gradient(180deg, rgba(14, 12, 11, .78), rgba(10, 9, 9, .92)),
    url(../img/mu-stone.webp) center / cover;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(220, 210, 195, .1);
}
.npc__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.npc__name { font: 600 21px var(--f-display); color: #f3dfc4; }
.npc__where { font-size: 15px; color: #a7a39b; }
.npc__where span { color: #8a867f; }
.npc__options > li + li { border-top: 1px solid rgba(220, 210, 195, .1); }
.npc__options a, .npc__row {
  position: relative; display: grid; gap: 2px;
  padding: 13px 12px 13px 26px; margin: 0 -12px;
  text-decoration: none; transition: background-color .2s;
}
.npc__options a::before, .npc__row::before {
  content: ""; position: absolute; left: 10px; top: 22px;
  border: 5px solid transparent; border-left: 6px solid currentColor;
  color: rgba(236, 229, 216, .35); transition: color .2s, transform .2s;
}
.npc__options a:hover { background: rgba(255, 240, 220, .045); }
.npc__options a:hover::before { color: var(--flame-2); transform: translateX(3px); }
.npc__opt { font: 600 18px var(--f-display); color: var(--bone); }
.npc__opt--luck { color: var(--gold); }
.npc__options span { font-size: 15.5px; color: #b9b2a5; }
/* prêmios dos Doces e da Travessura: um quadro com uma linha por prêmio (nome em cima, detalhes embaixo) */
.npc__prizes { display: grid; margin: 8px 0 4px; border: 1px solid rgba(214, 178, 106, .2); background: rgba(0, 0, 0, .28); }
.npc__prizes li { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1px 12px; padding: 9px 12px 10px 28px; }
.npc__prizes li + li { border-top: 1px solid rgba(220, 210, 195, .08); }
.npc__prizes li::before { content: ""; position: absolute; left: 12px; top: 17px; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
.npc__prizes strong { font-size: 16px; color: var(--bone); font-weight: 700; }
.npc__prizes span { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.45; }
.npc__options .npc__note { font-size: 13.5px; color: var(--bone-3); }
.npc__foot { margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(220, 210, 195, .1); font-size: 15px; color: #b9b2a5; }

/* =====================================================================
   CENA 5 — A COLHEITA DOS MORTOS
   O alvo no centro; à esquerda o relógio, à direita a lista de caça.
   ===================================================================== */
.harvest {
  position: relative; isolation: isolate;
  min-height: 100vh;
  padding: clamp(110px, 17vh, 190px) var(--gutter) clamp(90px, 14vh, 160px);
  overflow: hidden;
}
.harvest__scene { position: absolute; inset: 0; z-index: -1; }
.harvest__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 40%; filter: saturate(.85); }
.harvest__scene::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--ink-0) 0, rgba(6, 7, 10, 0) 18%, rgba(6, 7, 10, 0) 78%, var(--ink-0) 100%),
    linear-gradient(90deg, rgba(6, 7, 10, .94) 0, rgba(6, 7, 10, .72) 30%, rgba(6, 7, 10, .12) 46%, rgba(6, 7, 10, .12) 56%, rgba(6, 7, 10, .82) 68%, rgba(6, 7, 10, .94) 100%);
}
.harvest__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2.4fr) minmax(0, 4.6fr);
  align-items: start;
}
.harvest__brief { grid-column: 1; display: grid; gap: 18px; }
.harvest__title {
  font: 600 clamp(44px, 5.8vw, 98px)/.95 var(--f-display);
  color: var(--bone); margin: 4px 0 6px;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .8);
}
.harvest__brief > p:not(.kicker):not(.voice) { max-width: 44ch; }

.clock { display: flex; align-items: flex-end; gap: 16px; margin-top: 14px; }
.clock__v {
  font: 700 clamp(96px, 11vw, 176px)/.78 var(--f-display);
  color: var(--bone);
  letter-spacing: -.02em;
}
.clock__u {
  padding-bottom: 6px;
  font-size: 14px; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--mist);
}
.clock__tbc { display: inline-block; margin-top: 8px; padding: 2px 8px; border: 1px dashed var(--mist-2); font-size: 12.5px; letter-spacing: .1em; }

.hunt { grid-column: 3; display: grid; gap: 0; padding-top: clamp(0px, 4vh, 40px); }
.hunt__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(236, 229, 216, .2); }
.hunt__head h3 { font: 600 14px var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); }
.tag-provisional {
  padding: 3px 10px;
  border: 1px dashed var(--mist-2);
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist);
}
.hunt__list { counter-reset: hunt; }
.hunt__list li {
  counter-increment: hunt;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "qty verb" "qty who";
  column-gap: 20px; align-items: end;
  padding: 18px 0; border-bottom: 1px solid rgba(236, 229, 216, .12);
}
.hunt__qty { grid-area: qty; font: 600 clamp(44px, 4vw, 60px)/.85 var(--f-display); color: var(--bone); min-width: 2.1ch; }
.hunt__verb { grid-area: verb; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--flame); font-weight: 600; }
.hunt__verb::before { content: "0" counter(hunt) "  ·  "; color: var(--bone-3); white-space: pre; }
.hunt__who { grid-area: who; font-size: 21px; font-weight: 500; line-height: 1.2; color: var(--bone); }

.hunt__boss {
  position: relative; margin: 30px 0 30px;
  padding: 20px 22px 22px;
  border-left: 2px solid var(--blood);
  background: linear-gradient(90deg, rgba(184, 57, 46, .2), rgba(184, 57, 46, 0) 80%);
}
.hunt__opt { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--blood-2); margin-bottom: 4px; }
.hunt__boss-name { font: 600 clamp(26px, 2.4vw, 34px)/1.1 var(--f-display); color: #f4ddd6; margin-bottom: 6px; }
.hunt__boss-name span { font: italic 500 .8em var(--f-voice); color: #d9b5ad; }

/* =====================================================================
   CENA 6 — RECOMPENSAS
   ===================================================================== */
.spoils {
  position: relative;
  padding: clamp(80px, 13vh, 150px) var(--gutter) clamp(50px, 8vh, 90px);
  background:
    radial-gradient(ellipse 50% 60% at 12% 0%, rgba(214, 178, 106, .09), transparent 70%),
    linear-gradient(180deg, var(--ink-0), #0b0a08 40%, var(--ink-0));
}
.spoils__head { display: grid; gap: 14px; max-width: 760px; margin-left: clamp(0px, 8vw, 140px); }
.spoils__title { font: 600 clamp(36px, 4.4vw, 68px)/1.02 var(--f-display); color: #efdcae; }
.spoils__sub { font-size: 18px; max-width: 52ch; }
.spoils__list {
  margin: clamp(40px, 7vh, 70px) 0 0 clamp(0px, 8vw, 140px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1100px;
}
.spoil { display: grid; gap: 10px; align-content: start; padding: 6px clamp(20px, 4vw, 60px) 6px 0; }
.spoil + .spoil { padding-left: clamp(20px, 4vw, 60px); border-left: 1px solid rgba(214, 178, 106, .25); }
.spoil__icon:empty { display: none; }
.spoil__icon img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(214, 178, 106, .25)); }
.spoil__from { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.spoil__name { font: 600 clamp(26px, 2.6vw, 38px)/1.1 var(--f-display); color: var(--gold); }
.spoil > p:not([class]) { max-width: 40ch; }
.spoil__status { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.spoil__status::before { content: ""; width: 22px; height: 1px; background: var(--gold-2); }

/* =====================================================================
   CENA 7 — AGENDA
   ===================================================================== */
.almanac { padding: clamp(40px, 8vh, 100px) var(--gutter) clamp(70px, 12vh, 130px); }
.almanac__head { display: grid; gap: 12px; max-width: 760px; margin-left: clamp(0px, 8vw, 140px); }
.almanac__title { font: 600 clamp(34px, 4vw, 60px)/1.05 var(--f-display); color: var(--bone); }
.almanac__sub { font-size: 17px; }
.schedule {
  width: calc(100% - clamp(0px, 8vw, 140px)); max-width: 1100px;
  margin: clamp(30px, 5vh, 50px) 0 0 clamp(0px, 8vw, 140px);
  border-collapse: collapse;
}
.schedule thead th {
  padding: 0 16px 12px 0; text-align: left;
  font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mist-2);
  border-bottom: 1px solid rgba(236, 229, 216, .2);
}
.schedule tbody th, .schedule td { padding: 22px 16px 22px 0; border-bottom: 1px solid rgba(236, 229, 216, .1); text-align: left; vertical-align: baseline; }
.schedule tbody th { font-weight: 400; }
.schedule tbody th a { display: inline-flex; align-items: baseline; gap: 16px; font: 600 clamp(18px, 1.6vw, 23px)/1.25 var(--f-display); color: var(--bone); text-decoration: none; }
.schedule tbody th a:hover { text-decoration: underline; text-decoration-color: var(--mist-2); text-underline-offset: 6px; }
.schedule__n { min-width: 2.2em; font-size: max(13px, .62em); letter-spacing: .1em; color: var(--mist-2); }
.schedule td { font: italic 500 22px/1.3 var(--f-voice); color: var(--bone); }
.schedule td small { font: 400 15px var(--f-text); color: var(--bone-3); font-style: normal; }
.schedule td:last-child { text-align: right; padding-right: 0; }
.pending {
  display: inline-block; padding: 4px 11px;
  border: 1px dashed var(--mist-2);
  font: 400 13px var(--f-text); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--mist);
  white-space: nowrap;
}

/* =====================================================================
   ENCERRAMENTO
   ===================================================================== */
.finale {
  position: relative; isolation: isolate;
  min-height: max(1080px, 60vw);    /* alto o bastante para o texto ficar abaixo da placa "Halloween." da imagem */
  display: grid; align-items: end;
  padding: 0 var(--gutter) clamp(40px, 7vh, 70px);
  overflow: hidden;
}
.finale__scene { position: absolute; inset: 0; z-index: -1; }
.finale__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 22%; filter: saturate(.95) brightness(.95); }
.finale__scene::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--ink-0) 0, rgba(6, 7, 10, 0) 20%, rgba(6, 7, 10, 0) 48%, rgba(6, 7, 10, .88) 78%, var(--ink-0) 100%);
}
.finale__embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.finale__copy { display: grid; justify-items: start; gap: 14px; margin-left: calc(var(--axis) - var(--gutter)); max-width: 720px; }
.finale__title {
  font: 600 clamp(36px, 4.8vw, 80px)/1.02 var(--f-display);
  color: var(--bone);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .9);
}
.finale__line { font: italic 500 clamp(21px, 1.8vw, 27px)/1.35 var(--f-voice); color: var(--bone); }
.finale__back {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 0;
  font: 600 13px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--bone-2); text-decoration: none;
}
.finale__back::before { content: ""; width: 30px; height: 1px; background: currentColor; transition: width .3s; }
.finale__back:hover { color: var(--bone); }
.finale__back:hover::before { width: 50px; }
.finale__logo { width: 210px; height: auto; margin-top: clamp(30px, 6vh, 60px); opacity: .92; }
.finale__fine { font-size: 14px; line-height: 1.5; color: var(--bone-3); }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1180px) {
  :root { --axis: clamp(16px, 24vw, 400px); }
  .arrival__title { width: min(52vw, 700px); }
  .chapters { left: var(--gutter); }
  .rise__scene { left: 14%; }
  .acts { margin-left: calc(14% + 2vw); }
  .rise > .caveat { margin-left: calc(14% + 2vw); }
  .harvest__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr); }
}

@media (max-width: 900px) {
  /* abertura: logo ocupa o céu, capítulos empilhados sobre as rochas */
  .arrival { height: auto; min-height: 100svh; max-height: none; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--topbar) + 20px) var(--gutter) 28px; }
  .arrival__plate { object-position: 27% 50%; }
  .arrival__tree { display: none; }
  .arrival__veil {
    background:
      linear-gradient(180deg, rgba(6, 7, 10, .7) 0, rgba(6, 7, 10, .2) 30%, rgba(6, 7, 10, .1) 48%, rgba(6, 7, 10, .85) 72%, var(--ink-0) 100%);
  }
  .arrival__title, .chapters { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .arrival__title { max-width: 620px; }
  .chapters { margin-top: 40vh; }
  .chapters ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .chapters li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .prologue { margin-left: var(--gutter); }

  /* levantar: imagem no topo, texto embaixo */
  .rise { --scene-h: clamp(360px, 70vw, 560px); }
  .rise__scene { position: relative; left: auto; right: auto; height: var(--scene-h); }
  .rise__scene::after {
    background: linear-gradient(180deg, var(--ink-0) 0, rgba(6, 7, 10, 0) 22%, rgba(6, 7, 10, 0) 55%, var(--ink-0) 100%);
  }
  .rise__copy { width: auto; min-height: 0; padding-top: 0; margin: -90px var(--gutter) 0; }
  .acts { margin: 56px var(--gutter) 0; grid-template-columns: 1fr; gap: 34px; }
  .acts__step { padding: 0 0 0 28px; }
  .acts__step::before { left: 0; right: auto; top: 0; bottom: -34px; width: 2px; height: auto; background: linear-gradient(180deg, var(--c1), var(--c2)); }
  .acts__step:last-child::before { bottom: 0; }
  .acts__n { top: -2px; left: -12px; }
  .rise > .caveat { margin: 40px var(--gutter) 0; }

  .valley__panorama { height: clamp(320px, 72vw, 520px); }
  .valley__head { justify-items: start; text-align: left; margin-top: -60px; }
  .valley__head .kicker, .valley__head .kicker span { flex-direction: row; }
  .valley__body { grid-template-columns: 1fr; margin-top: 28px; gap: 44px; }
  .valley__story { order: 1; }
  .plate { order: 2; margin-top: 20px; }

  .treat { grid-template-columns: 1fr; padding: 40px var(--gutter) 90px; }
  .treat__stage { height: clamp(360px, 92vw, 560px); margin: 0 calc(var(--gutter) * -1); }
  .treat__copy { max-width: none; margin-top: -40px; position: relative; }

  .harvest { padding-top: 90px; }
  .harvest__scene img { object-position: 52% 30%; }
  .harvest__scene::after {
    background:
      linear-gradient(180deg, var(--ink-0) 0, rgba(6, 7, 10, .3) 10%, rgba(6, 7, 10, .55) 30%, rgba(6, 7, 10, .9) 52%, rgba(6, 7, 10, .95) 100%);
  }
  .harvest__grid { grid-template-columns: 1fr; gap: 50px; }
  .hunt { grid-column: 1; padding-top: 0; }

  .spoils__head, .spoils__list, .almanac__head { margin-left: 0; }
  .spoils__list { grid-template-columns: 1fr; gap: 34px; }
  .spoil + .spoil { padding-left: 0; padding-top: 34px; border-left: 0; border-top: 1px solid rgba(214, 178, 106, .25); }

  /* a cena fica no topo e o texto começa logo abaixo da placa "Halloween." */
  .finale { --fs: min(130vw, 700px); min-height: 0; padding-top: calc(var(--fs) * .54); }
  .finale__scene { bottom: auto; height: var(--fs); }
  .finale__scene img { object-position: 55% 0; }
  .finale__copy { margin-left: 0; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .chapters { margin-top: 34vh; }
  .chapters ol { grid-template-columns: 1fr; row-gap: 0; }
  .chapters a { grid-template-columns: 34px 1fr; padding: 12px 0; column-gap: 8px; }
  .chapters__n { grid-row: span 3; padding-top: 3px; }
  .regions div { grid-template-columns: 1fr; }
  .plate__list div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .plate__list dd { text-align: left; }

  /* agenda vira lista de blocos legíveis */
  .schedule { width: 100%; margin-left: 0; }
  .schedule thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .schedule tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px 0; border-bottom: 1px solid rgba(236, 229, 216, .1); }
  .schedule tbody th, .schedule td { padding: 0; border: 0; }
  .schedule tbody th { grid-column: 1 / -1; }
  .schedule td { font-size: 19px; }
  .schedule td:last-child { align-self: center; }
}

/* sem movimento: tudo estático */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   NÉVOA ENTRE AS CENAS
   Cada faixa fica sobre uma emenda. O JS escreve --p (posição da faixa na
   tela, 0→1) e --i (densidade, máxima com a emenda no meio da tela); as três
   camadas andam em sentidos e velocidades diferentes, o que dá a profundidade.
   Não há animação contínua: a névoa só se move com a rolagem.
   ===================================================================== */
.mist {
  --p: .5; --i: 0;
  --mist-h: clamp(220px, 34vh, 380px);
  --mist-c: #9fb0c4;
  position: relative; z-index: 6;
  height: var(--mist-h);
  margin: calc(var(--mist-h) / -2) 0;
  overflow: hidden; pointer-events: none;
  contain: layout paint style;
}
.mist--warm  { --mist-c: #c7b7a6; }
.mist--green { --mist-c: #93a89c; }
.mist--ember { --mist-c: #b9a1a0; }
.mist__l {
  position: absolute; top: 0; bottom: 0; left: -30%; width: 160%;
  background: var(--mist-c);
  -webkit-mask-image: url(../img/mist-a.webp); mask-image: url(../img/mist-a.webp);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%; mask-size: auto 100%;
  opacity: calc(var(--i) * var(--o));
  transform: translate3d(calc((var(--p) - .5) * var(--dx)), calc((var(--p) - .5) * var(--dy, 0px)), 0) scaleY(var(--sy, 1));
  visibility: hidden;
}
.mist[data-on] .mist__l { visibility: visible; }
.mist[data-on]:not(.is-static) .mist__l { will-change: transform, opacity; }   /* camada de GPU só enquanto a faixa está em vista */
.mist__l--far  { --o: .38; --dx: 12vw;  --dy: -18px; --sy: .8; top: 12%; }
.mist__l--mid  { --o: .5;  --dx: -26vw; --dy: 10px;
  -webkit-mask-image: url(../img/mist-b.webp); mask-image: url(../img/mist-b.webp);
  -webkit-mask-position: 40% 0; mask-position: 40% 0; }
.mist__l--near { --o: .6;  --dx: 52vw;  --dy: 30px; --sy: 1.25; top: -6%;
  -webkit-mask-position: 75% 0; mask-position: 75% 0; }

@media (max-width: 760px) {
  .mist { --mist-h: clamp(170px, 26vh, 260px); }
  .mist__l--far { display: none; }       /* menos camadas no celular */
  .mist__l--near { --dx: 36vw; }
}
@media (prefers-reduced-motion: reduce) {
  .mist { --i: .45; }                    /* névoa parada, sem depender da rolagem */
}

/* ---- névoa em tempo real: deriva horizontal contínua (sobrepõe o bloco anterior) ----
   Cada camada é mais larga que a faixa por exatamente uma largura de textura e desliza
   essa distância em laço, então a emenda nunca aparece. Só roda com a faixa em vista.
   A rolagem controla apenas a densidade (--i). */
.mist { --tile: calc(var(--mist-h) * 3.8095); }
.mist__l {
  top: 0; bottom: 0; left: -30%; width: calc(160% + var(--tile));
  opacity: calc((.18 + .82 * var(--i)) * var(--o));
  transform: translate3d(0, 0, 0);
  animation: mist-drift var(--t, 60s) linear infinite var(--dir, normal);
  animation-play-state: paused;
}
.mist[data-on] .mist__l { animation-play-state: running; }
.mist__l--far  { --o: .42; --t: 120s; --dir: reverse; top: 0; }
.mist__l--mid  { --o: .55; --t: 70s;  --dir: normal; }
.mist__l--near { --o: .62; --t: 42s;  --dir: reverse; top: 0; }
@keyframes mist-drift { to { transform: translate3d(calc(var(--tile) * -1), 0, 0); } }
@media (max-width: 760px) { .mist__l--near { --t: 50s; } }
@media (prefers-reduced-motion: reduce) { .mist__l { animation: none; } }

/* névoa em WebGL: um canvas fixo sobre o conteúdo (abaixo da barra superior) */
.mist-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 40; pointer-events: none; }
.mist-gl .mist__l { display: none; }

/* névoa desativada: sem espaço no layout e sem desenho. Para reativar, apague data-off da faixa no HTML. */
.mist[data-off] { display: none; }

/* =====================================================================
   ABERTURA CINEMATOGRÁFICA (js/intro.js)
   Só existe com <html class="intro-on">. A rede de segurança em CSS libera tudo após 22 s
   caso o JS falhe.
   ===================================================================== */
#intro { display: none; }
.intro-on { overflow: hidden; animation: intro-unlock 0s linear 22s forwards; }
.intro-on #intro {
  display: block; position: fixed; inset: 0; z-index: 200;
  background: #000; touch-action: manipulation;
  animation: intro-failsafe 0s linear 22s forwards;
}
.intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#intro.is-leaving { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
@keyframes intro-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
@keyframes intro-unlock { to { overflow: auto; } }

/* brasas que sobem sobre o logo (canvas 2D por cima da imagem; sobra espaço acima para elas subirem) */
.arrival__sparks {
  position: absolute; left: -4%; width: 108%; top: -46%; height: 150%;
  pointer-events: none; z-index: 1;
}

/* =====================================================================
   VIDA DE FUNDO (js/ambient.js): voos, aranhas e teias
   ===================================================================== */

.spider {
  position: absolute; top: 0; z-index: 4; width: var(--sw, 38px); margin-left: calc(var(--sw, 38px) / -2);
  display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 0; pointer-events: none;
  animation: spider-sway var(--sway-dur, 8s) ease-in-out var(--sway-delay, 0s) infinite alternate;
}
.spider__rig {
  display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0;
  animation: spider-sway2 var(--sway2-dur, 5s) ease-in-out var(--sway2-delay, 0s) infinite alternate;
}
.spider__thread {
  display: block; width: 1px; height: var(--len, 80px);
  background: linear-gradient(180deg, rgba(190, 205, 228, 0), rgba(190, 205, 228, .34) 25%, rgba(190, 205, 228, .5));
  transition: height .5s ease-out;
}
.spider__body { width: 100%; height: auto; aspect-ratio: 40 / 38; margin-top: -1px; }   /* sem brilho: o contorno claro do desenho basta */
@keyframes spider-sway { from { transform: rotate(calc(var(--sway-amp, 3deg) * -1)); } to { transform: rotate(var(--sway-amp, 3deg)); } }
@keyframes spider-sway2 { from { transform: rotate(-1.1deg); } to { transform: rotate(1.3deg); } }
@media (prefers-reduced-motion: reduce) { .spider, .spider__rig { animation: none; } .spider__thread { transition: none; } }
@media (max-width: 760px) { .spider { display: none; } }   /* no celular a cena é estreita: sem aranhas */

/* =====================================================================
   RECOMPENSAS: Pumpkin of Luck, anéis, buffs e experiência em dobro
   Mesma lógica das cenas de cima: de margem a margem, o texto alterna de lado e cada bloco tem o seu cenário.
   Dourado só aqui (recompensas).
   ===================================================================== */
.spoils { overflow: hidden; isolation: isolate; --block-gap: clamp(80px, 13vh, 150px); }
.spoils__head { margin-left: 0; max-width: 62ch; }
.spoils__sub { max-width: 60ch; }

/* cada bloco = uma faixa de largura total com cenário atrás (esmaecido para o preto nas bordas) */
.loot, .rings, .buffs, .xp {
  position: relative; isolation: isolate; margin: var(--block-gap) 0 0;
  display: grid; align-items: center; gap: clamp(28px, 4vw, 72px);
}
.loot::before, .rings::before, .buffs::before, .xp::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -64px calc(var(--gutter) * -1);
  background-repeat: no-repeat; background-size: cover; opacity: var(--bg-o, .55);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(var(--fade-dir, 90deg), transparent, #000 var(--fade-at, 45%));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(var(--fade-dir, 90deg), transparent, #000 var(--fade-at, 45%));
  mask-composite: intersect;
}

/* 1 · Pumpkin of Luck: texto à esquerda; o anel em quatro ângulos à direita, sobre o castelo sob a lua */
.loot { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); margin-top: clamp(48px, 8vh, 90px); }
.loot::before { --fade-dir: 90deg; --fade-at: 38%; --bg-o: .7; }
.loot__copy { display: grid; gap: 14px; max-width: 58ch; }
.loot__copy .spoil__name { font-size: clamp(32px, 3.4vw, 52px); }
.loot__lead { margin-top: 6px; color: var(--bone); }
.drops { border-top: 1px solid rgba(214, 178, 106, .22); }
.drops div { display: grid; grid-template-columns: minmax(104px, 8.5rem) 1fr; gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid rgba(214, 178, 106, .14); }
.drops dt { font: 600 13px/1.5 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding-top: 3px; }
.drops dd { font-size: 16.5px; }
.drops a { color: var(--gold); text-underline-offset: 4px; }
.loot__ring { position: relative; display: grid; justify-items: center; gap: 18px; padding: 12px 0 0; }
.loot__ring::before {      /* luz de abóbora no chão, sob os modelos */
  content: ""; position: absolute; left: 2%; right: 2%; bottom: 8%; height: 50%;
  background: radial-gradient(ellipse 50% 60% at 50% 72%, rgba(236, 138, 58, .30), transparent 72%); pointer-events: none;
}
.loot__views { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.loot__views img { height: clamp(210px, 23vw, 340px); width: auto; margin: 0 -8px; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .7)); }
.loot__views img:nth-child(2n) { transform: translateY(10px); }
.loot__ring figcaption { position: relative; font-size: 14.5px; color: var(--bone-3); text-align: center; }
.loot__ring figcaption strong { display: block; font: 600 18px var(--f-display); color: var(--gold); margin-bottom: 2px; }

/* 2 · Anéis de Transformação: a lista à esquerda (aberta já vem larga), o aviso de durabilidade à direita */
.rings { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
.rings::before { --fade-dir: 270deg; --fade-at: 40%; --bg-o: .5; }
.rings__copy { grid-column: 2; grid-row: 1; display: grid; gap: 14px; max-width: 50ch; }
.rings__list { grid-column: 1; grid-row: 1; border-top: 1px solid rgba(214, 178, 106, .22); }
.rings__copy .spoil__name, .buffs__copy .spoil__name, .xp .spoil__name { font-size: clamp(28px, 2.8vw, 42px); }
.rings__list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; cursor: pointer; list-style: none;
  font: 600 15px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
}
.rings__list summary::-webkit-details-marker { display: none; }
.rings__list summary i { width: 10px; height: 10px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); transition: transform .25s; margin-right: 4px; }
.rings__list[open] summary i { transform: rotate(-135deg); }
.rings__list ul { columns: 3; column-gap: 32px; padding: 4px 0 10px; border-top: 1px solid rgba(214, 178, 106, .14); }
.rings__list li { break-inside: avoid; padding: 7px 0; font-size: 16.5px; border-bottom: 1px solid rgba(236, 229, 216, .07); }

/* 3 · Buffs: o texto à esquerda, a tabela de efeitos na placa de pedra do MU à direita, sobre a vila */
.buffs { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.buffs::before { --fade-dir: 90deg; --fade-at: 30%; --bg-o: .6; }
.buffs__copy { display: grid; gap: 14px; max-width: 54ch; }
.buffs__rules { display: grid; gap: 8px; margin: 2px 0; }
.buffs__rules li { position: relative; padding-left: 20px; }
.buffs__rules li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; background: var(--gold-2); transform: rotate(45deg); }
.buffs__plate { margin-top: 0; width: 100%; max-width: 640px; justify-self: end; }
.ledger li { display: grid; grid-template-columns: 52px minmax(76px, 7rem) 1fr; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(220, 222, 230, .1); }
.ledger li:last-child { border-bottom: 0; }
.ledger img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)); }
.ledger__n { font: 600 18px var(--f-display); color: var(--gold); }
.ledger__e { font-size: 16.5px; color: #cfd2d8; line-height: 1.4; }
.ledger__e strong { color: #fff; font-family: var(--f-display); }

/* 4 · Experiência em dobro: o número grande à esquerda, o texto no meio, o toco com abóboras fechando à direita */
.xp { grid-template-columns: auto minmax(0, 1fr) minmax(0, 320px); gap: clamp(24px, 5vw, 80px); min-height: 360px; }
.xp::before { --fade-dir: 90deg; --fade-at: 20%; --bg-o: .5; }
.xp::after { content: ""; position: absolute; z-index: -1; inset: -64px calc(var(--gutter) * -1); background: radial-gradient(ellipse 60% 70% at 20% 55%, rgba(184, 57, 46, .16), transparent 70%); pointer-events: none; }
.xp__v { font: 700 clamp(84px, 11vw, 176px)/.8 var(--f-display); color: var(--gold); letter-spacing: -.02em; }
.xp__copy { display: grid; gap: 10px; max-width: 56ch; }
.xp__stump { align-self: end; justify-self: end; width: 100%; max-width: 320px; height: auto; margin: 0 0 -60px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .7)); }

.spoils__tip { margin: clamp(48px, 8vh, 80px) 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--bone); padding: 14px 18px; border-left: 3px solid var(--gold); background: linear-gradient(90deg, rgba(214, 178, 106, .14), rgba(214, 178, 106, .03)); }
.spoils__tip strong { color: var(--gold); letter-spacing: .02em; }
.spoils__list { margin: clamp(56px, 9vh, 100px) 0 0; grid-template-columns: minmax(0, 1fr); max-width: 62ch; }
.spoils__list .spoil { padding-right: 0; }

@media (max-width: 1100px) {
  .xp { grid-template-columns: auto minmax(0, 1fr); }
  .xp__stump { display: none; }
  .rings__list ul { columns: 2; }
}
@media (max-width: 900px) {
  .loot, .rings, .buffs { grid-template-columns: 1fr; }
  .rings__copy, .rings__list { grid-column: 1; grid-row: auto; }
  .loot::before, .rings::before, .buffs::before, .xp::before { --bg-o: .32; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
  .loot__ring { order: 2; }
  .drops div { grid-template-columns: 1fr; }
  .buffs__plate { justify-self: stretch; max-width: none; }
  .xp { grid-template-columns: 1fr; }
  .rings__list ul { columns: 1; }
}
@media (max-width: 520px) {
  .loot__views img { height: clamp(130px, 36vw, 180px); margin: 0 -8px; }
  .ledger li { grid-template-columns: 44px 1fr; row-gap: 2px; }
  .ledger__e { grid-column: 2; }
  .ledger img { grid-row: span 2; }
}

/* toco: esmaece a base para o corte do recorte não aparecer; o fundo o abraça */
.xp__stump { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%), linear-gradient(270deg, transparent 0, #000 12%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 70%, transparent 98%), linear-gradient(270deg, transparent 0, #000 12%); mask-composite: intersect; margin-bottom: -40px; }
/* a missão diária fecha a seção com o mesmo respiro e alinhamento dos blocos acima */
.spoils__list { max-width: none; }
.spoils__list .spoil { max-width: 62ch; padding-left: 16px; border-left: 2px solid var(--gold-2); }

/* fundos dos blocos de recompensas: canteiro de abóboras à noite (desfocado, só ambiente) */
.loot::before, .rings::before, .buffs::before, .xp::before {
  background-size: cover; background-position: 50% 100%; --bg-o: 1;
  inset: -64px calc(var(--gutter) * -1) -110px;     /* desce além do bloco para a base esmaecer sem corte */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.loot::before  { background-image: url(../img/legado/pbg-loot.webp); }
.rings::before { background-image: url(../img/legado/pbg-rings.webp); }
.buffs::before { background-image: url(../img/legado/pbg-buffs.webp); }
.xp::before    { background-image: url(../img/legado/pbg-xp.webp); }
.xp::after { display: none; }
/* Pumpkin of Luck no Blood Castle e na Devil Square */
.xp__drops-t { margin-top: 10px; font: 600 13px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.xp__drops-t a { color: inherit; text-underline-offset: 4px; }
.xp .where { max-width: 56ch; }
@media (max-width: 900px) { .loot::before, .rings::before, .buffs::before, .xp::before { opacity: .7; } }

/* =====================================================================
   PADRÃO ÚNICO DE LAYOUT (sobrepõe regras anteriores)
   - mesma margem lateral (--gutter) em todas as cenas, sem recuos próprios
   - mesmo tamanho de título nos quatro capítulos
   - narrativa à esquerda, painel de dados à direita (5 : 7), alinhados pelo topo
   - Doçuras alterna de propósito: arte à esquerda, texto e janela do NPC à direita
   ===================================================================== */
:root { --title: clamp(44px, 5.2vw, 88px); --split: minmax(0, 5fr) minmax(0, 7fr); --split-gap: clamp(32px, 5vw, 96px); }
.rise__title, .valley__title, .treat__title, .harvest__title { font-size: var(--title); line-height: .98; letter-spacing: 0; }
.rise__title, .valley__title, .treat__title, .harvest__title, .spoils__title, .almanac__title { text-wrap: balance; }

@media (min-width: 901px) {
  /* Vale: título à esquerda sobre o panorama; texto à esquerda, placa de entrada à direita */
  .valley__head { justify-items: start; text-align: left; margin: clamp(-150px, -9vw, -80px) var(--gutter) 0; }
  .valley__head .kicker, .valley__head .kicker span { flex-direction: row; }
  .valley__body { grid-template-columns: var(--split); gap: var(--split-gap); margin: clamp(48px, 8vh, 90px) var(--gutter) 0; align-items: start; }
  .valley__story { order: 1; max-width: 62ch; }
  .plate { order: 2; margin: 0; width: 100%; max-width: 600px; justify-self: end; }

  /* Anéis: narrativa à esquerda, lista à direita */
  .rings { grid-template-columns: var(--split); gap: var(--split-gap); }
  .rings__copy { grid-column: 1; }
  .rings__list { grid-column: 2; }

  /* Pumpkin of Luck e Buffs no mesmo 5 : 7 */
  .loot, .buffs { grid-template-columns: var(--split); gap: var(--split-gap); }
  .buffs__plate { max-width: 640px; }

  /* Agenda: cabeçalho à esquerda, tabela à direita (mesma divisão) */
  .almanac { display: grid; grid-template-columns: var(--split); gap: var(--split-gap); align-items: start; }
  .almanac__head { margin: 0; }
  .schedule { width: 100%; max-width: none; margin: 0; }
}
/* recuos próprios da fase anterior saem: tudo respeita a mesma margem lateral */
.spoils__head, .almanac__head { margin-left: 0; }
.spoils__title, .almanac__title { font-size: clamp(36px, 4.2vw, 66px); }

/* ícone oficial do item, no seu "slot" escuro de inventário */
.item { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); }
.item__icon { flex: none; width: clamp(84px, 7vw, 108px); height: auto; border: 1px solid rgba(214, 178, 106, .35); box-shadow: 0 0 0 3px rgba(0, 0, 0, .55), 0 10px 26px rgba(0, 0, 0, .6); }
.item .spoil__name { margin-top: 2px; }

/* ---- ajustes: brilho do anel, Vale mais compacto, prólogo em largura total ---- */
/* o brilho não é mais cortado pela caixa: o gradiente cabe inteiro dentro dela */
.loot__ring::before {
  left: -6%; right: -6%; bottom: -4%; height: 62%;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(236, 138, 58, .30), rgba(236, 138, 58, .10) 55%, transparent 100%);
}
/* Vale: dois blocos de larguras parecidas e mais próximos, como em Doçuras */
@media (min-width: 901px) {
  .valley__body { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1180px; gap: clamp(40px, 6vw, 96px); }
  .valley__story { max-width: none; }
  .plate { justify-self: stretch; max-width: none; }
}
/* prólogo: ocupa a largura, com filete e névoa quente atrás, sem as laterais vazias */
.prologue {
  position: relative; max-width: none; text-align: center;
  margin: clamp(56px, 9vh, 110px) 0 clamp(30px, 6vh, 70px); padding: clamp(46px, 7vh, 86px) max(var(--gutter), calc((100% - 1120px) / 2)); text-wrap: balance;
  font-size: clamp(26px, 2.7vw, 42px); line-height: 1.38; color: var(--bone);
  background: radial-gradient(ellipse 60% 90% at 50% 50%, rgba(236, 138, 58, .08), transparent 70%);
}
.prologue::before, .prologue::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 229, 216, .24) 20%, rgba(236, 229, 216, .24) 80%, transparent);
}
.prologue::before { top: 0; } .prologue::after { bottom: 0; }

/* =====================================================================
   EFEITOS DE ROLAGEM (js/scroll-fx.js)
   As classes .rv* só existem enquanto o elemento ainda não apareceu; depois são removidas.
   ===================================================================== */
.rv { opacity: 0; transition: opacity 1s ease var(--d, 0s), transform 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), filter 1s ease var(--d, 0s), -webkit-mask-size 1.15s cubic-bezier(.3, .6, .2, 1) var(--d, 0s), mask-size 1.15s cubic-bezier(.3, .6, .2, 1) var(--d, 0s); will-change: opacity, transform; }
.rv-text { transform: translateY(24px); }      /* sem desfoque: dezenas de blocos com filter viravam camadas de GPU */
.rv-title { transform: translateY(16px) scale(1.035); transform-origin: 0 60%; }
.rv-panel {   /* desenrola de cima para baixo (máscara, não clip-path: o observador ignora máscaras) */
  transform: translateY(14px);
  -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 0%; mask-size: 100% 0%;
}
.rv.rv-in { opacity: 1; transform: none; filter: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* o fundo anda mais devagar que o texto: a imagem é ampliada para as bordas nunca aparecerem */
.par { will-change: transform; transform: scale(1.14); }

/* brasa de progresso no fio inferior da barra */
.topbar__ember {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #6e2a12, var(--flame) 60%, #ffe0a8); box-shadow: 0 0 10px rgba(236, 138, 58, .75);
  pointer-events: none;
}

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

/* =====================================================================
   CONTINUIDADE DOS FUNDOS E VALE EM TRÊS COLUNAS
   ===================================================================== */
/* Doçuras: a cena do Jack esmaece na base, sem faixa cortada */
.treat__stage {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
}

/* Recompensas: o topo nasce do preto da seção anterior e o fundo é contínuo de ponta a ponta,
   com manchas muito suaves (dourado, azul, verde, brasa) que costuram os blocos entre si */
.spoils {
  background:
    linear-gradient(180deg, var(--ink-0) 0, rgba(6, 7, 10, 0) 260px),
    radial-gradient(ellipse 55% 7% at 14% 4%, rgba(214, 178, 106, .09), transparent 100%),
    radial-gradient(ellipse 50% 9% at 88% 22%, rgba(60, 84, 140, .10), transparent 100%),
    radial-gradient(ellipse 55% 9% at 12% 47%, rgba(40, 96, 78, .09), transparent 100%),
    radial-gradient(ellipse 55% 9% at 86% 70%, rgba(214, 120, 50, .09), transparent 100%),
    radial-gradient(ellipse 60% 8% at 30% 90%, rgba(70, 70, 130, .08), transparent 100%),
    linear-gradient(180deg, var(--ink-0), #0a0a0c 50%, var(--ink-0));
}

/* Vale: usa a largura inteira, em três colunas alinhadas pelo topo (apresentação, lugares, entrada) */
@media (min-width: 1200px) {
  .valley__body {
    max-width: none; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr);
    column-gap: clamp(36px, 4.4vw, 84px); row-gap: 18px; align-items: start;
  }
  .valley__story { display: contents; }
  .valley__story > .voice { grid-column: 1; grid-row: 1; }
  .valley__story > p:not(.voice) { grid-column: 1; grid-row: 2; }
  .valley__story > p:not(.voice) + p:not(.voice) { grid-row: 3; }   /* o 2º parágrafo (chegada pelo Jack) vai embaixo do 1º, não por cima */
  .valley__story > .regions { grid-column: 2; grid-row: 1 / span 2; margin-top: 4px; align-self: start; }
  .regions div { grid-template-columns: 1fr; gap: 2px; }
  .plate { grid-column: 3; grid-row: 1 / span 2; justify-self: stretch; max-width: none; }
}
@media (min-width: 1200px) {
  .valley__body { grid-template-rows: auto auto 1fr; }
  .valley__story > .regions, .plate { grid-row: 1 / span 3; }
}

/* miniaturas dos monstros (trocar o arquivo em img/monstros/ é suficiente) */
.hunt__list li { grid-template-columns: auto 1fr auto; grid-template-areas: "qty verb img" "qty who img"; align-items: center; }
.hunt__img { grid-area: img; justify-self: end; height: 84px; width: auto; max-width: 96px; object-fit: contain; margin-left: 12px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7)); }
.hunt__img--boss { float: right; width: 250px; height: auto; max-width: 45%; margin: -30px -8px -20px 14px; }
.hunt__boss::after { content: ""; display: block; clear: both; }
@media (max-width: 520px) {
  .hunt__img { height: 64px; max-width: 72px; }
  /* no celular o chefe vai inteiro em cima do texto, centralizado */
  .hunt__img--boss { float: none; display: block; width: 210px; height: auto; max-width: 75%; margin: -6px auto 8px; transform-origin: 50% 50%; }
}

/* ao passar o mouse a miniatura cresce para a esquerda, como um tooltip */
.hunt__img {
  position: relative; z-index: 1; cursor: zoom-in;
  transform-origin: 100% 50%;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), filter .28s;
}
.hunt__img:hover {
  z-index: 20; transform: scale(2.5);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .9)) drop-shadow(0 0 22px rgba(255, 98, 20, .25));
}
.hunt__img--boss:hover { transform: scale(1.25); }
@media (hover: none), (prefers-reduced-motion: reduce) { .hunt__img:hover { transform: none; } }

/* Buffs: as duas colunas dividem a largura por igual (sem o vão grande no meio) */
@media (min-width: 901px) {
  .buffs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 72px); }
  .buffs__copy { max-width: 62ch; }
  .buffs__plate { max-width: none; justify-self: stretch; }
}
@media (min-width: 901px) { .buffs__plate { grid-column: 2; grid-row: 1; } .buffs__copy { grid-column: 1; grid-row: 1; } }

/* rodapé: o título desce um pouco para não encostar na placa "Halloween." da imagem */
.finale { padding-bottom: clamp(24px, 4vh, 44px); }
.finale__logo { margin-top: clamp(20px, 3.5vh, 36px); }
/* no celular o botão de som fixo no canto não cobre o copyright */
@media (max-width: 900px) { .finale { padding-bottom: 76px; } }

/* retorno dos eventos do ano passado */
.spoils__head { gap: 16px; max-width: 74ch; }
.spoils__voice { color: #efdcae; max-width: 30ch; }
.back { display: inline-block; margin-right: 10px; padding: 2px 9px 1px; border: 1px solid var(--gold-2); color: var(--gold); font: 600 11.5px var(--f-display); letter-spacing: .16em; text-transform: uppercase; vertical-align: 1px; }
@media (min-width: 1100px) {
  .spoils__head { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--split-gap); row-gap: 14px; align-items: end; }
  .spoils__head .kicker { grid-column: 1 / -1; }
  .spoils__title { grid-column: 1; }
  .spoils__voice { grid-column: 1; grid-row: 3; max-width: 34ch; }
  .spoils__sub { grid-column: 2; grid-row: 2 / span 2; align-self: end; max-width: 56ch; padding-left: 18px; border-left: 2px solid var(--gold-2); }
}

/* sequência da invasão: azul-frio -> violeta -> laranja, com nós luminosos nos números */
.acts__step:nth-child(1) { --c1: rgba(120, 150, 205, .30); --c2: rgba(130, 130, 215, .75); --nc: 120, 150, 215; }
.acts__step:nth-child(2) { --c1: rgba(130, 130, 215, .75); --c2: rgba(190, 110, 170, .85); --nc: 150, 120, 215; }
.acts__step:nth-child(3) { --c1: rgba(200, 105, 120, .85); --c2: rgba(236, 138, 58, 1); --nc: 236, 138, 58; }
.acts__step::before { height: 2px; box-shadow: 0 0 12px rgba(var(--nc), .35); }
.acts__n {
  top: -15px; left: 0; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(var(--nc), .42), rgba(8, 9, 14, .96) 70%);
  border: 1px solid rgba(var(--nc), .85);
  box-shadow: 0 0 0 4px rgba(6, 7, 10, .9), 0 0 18px rgba(var(--nc), .55);
  color: #fff; font-size: 14px;
}
.acts__step--key .acts__n { color: #fff; box-shadow: 0 0 0 4px rgba(6, 7, 10, .9), 0 0 24px rgba(var(--nc), .8); }
.acts__step--key h3 { color: #ffe3c4; }
@media (max-width: 900px) { .acts__n { top: -3px; left: -15px; } }
@media (max-width: 900px) { .acts__step::before { height: auto; width: 2px; } }

/* janela do Jack: a escolha entre doçura e travessura */
.npc__ask { margin: 2px 0 6px; font: italic 500 19px/1.3 var(--f-voice); color: var(--bone); }
.npc__opt i { margin-left: 8px; font: 500 13px var(--f-text); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-3); }
.npc__opt--trick { color: #f0b48a; }
.npc__options span strong { color: var(--bone); font-weight: 700; }

/* números da sequência: círculo liso, fundo laranja contido e número em creme (sem anel nem brilho) */
.acts__n, .acts__step--key .acts__n {
  background: #9a5226; border: 0; box-shadow: none; color: #fff0dc;
  width: 28px; height: 28px; top: -14px; font-size: 14px;
}
.acts__step::before { box-shadow: none; }
@media (max-width: 900px) { .acts__n, .acts__step--key .acts__n { top: -2px; left: -14px; } }

/* sequência: algarismos gravados (só contorno) atrás do título + ponto de brasa na linha */
.acts__step { padding-top: 40px; }
.acts__step > h3, .acts__step > p { position: relative; z-index: 1; }
.acts__n, .acts__step--key .acts__n {
  position: absolute; top: 2px; left: -2px; z-index: 0; width: auto; height: auto; border-radius: 0; display: block;
  background: none; box-shadow: none; border: 0;
  font: 600 clamp(84px, 7.4vw, 120px)/.9 var(--f-display); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--nc), .42); pointer-events: none;
}
.acts__step--key .acts__n { -webkit-text-stroke-color: rgba(var(--nc), .62); }
.acts__step::after {
  content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%;
  background: rgb(var(--nc)); box-shadow: 0 0 0 3px rgba(6, 7, 10, .85);
}
.acts__step > h3 { margin-top: 18px; }
@media (max-width: 900px) {
  .acts__step { padding-top: 0; }
  .acts__n, .acts__step--key .acts__n { top: -6px; left: 14px; font-size: 64px; }
  .acts__step::after { left: -4px; top: 6px; }
  .acts__step > h3 { margin-top: 0; }
}
.acts__n, .acts__step--key .acts__n { -webkit-text-stroke: 1.6px rgba(var(--nc), .62); background: linear-gradient(180deg, rgba(var(--nc), .10), transparent 80%); -webkit-background-clip: text; background-clip: text; font-size: clamp(96px, 8.4vw, 136px); }
.acts__step--key .acts__n { -webkit-text-stroke-color: rgba(var(--nc), .85); }
@media (max-width: 900px) {
  .acts__n, .acts__step--key .acts__n { left: auto; right: 4px; top: -10px; font-size: 76px; }
}

/* o Jack O'Lantern de frente (animado) ao lado da abóbora, no lugar da lamparina */
.treat__npc {
  position: absolute; right: 5%; bottom: 7%; z-index: 2;
  height: clamp(250px, 44%, 360px); width: auto;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .75)) drop-shadow(0 0 28px rgba(236, 138, 58, .22));
}
@media (max-width: 900px) { .treat__npc { height: clamp(190px, 46%, 260px); right: 4%; bottom: 5%; } }

/* sequência (versão final): algarismo sólido ao lado do título e do texto, sem sobreposição */
.acts__step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; padding-top: 30px; }
.acts__n, .acts__step--key .acts__n {
  position: static; grid-row: 1 / span 2; width: auto; height: auto; margin-top: -4px;
  font: 600 clamp(56px, 4.8vw, 76px)/.9 var(--f-display); letter-spacing: 0;
  color: rgb(var(--nc)); opacity: .9; -webkit-text-stroke: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}
.acts__step > h3 { grid-column: 2; margin-top: 0; }
.acts__step > p { grid-column: 2; }
@media (max-width: 900px) {
  .acts__step { padding-top: 0; column-gap: 14px; }
  .acts__n, .acts__step--key .acts__n { font-size: 46px; margin-top: -2px; right: auto; left: auto; top: auto; }
}
.acts__step { grid-template-columns: clamp(38px, 3.4vw, 52px) minmax(0, 1fr); column-gap: 14px; }
@media (max-width: 900px) { .acts__step { grid-template-columns: 38px minmax(0, 1fr); } }

/* sequência animada: passos apagados que acendem em ordem; só existe com JS e sem "reduzir movimento" */
.is-seq .acts__step > * { transition: opacity .9s ease, filter .9s ease; }
.is-seq .acts__step:not(.is-lit) > * { opacity: .22; filter: saturate(.4); }
.is-seq .acts__step::after { transition: transform .6s ease, opacity .6s ease, box-shadow .6s ease; }
.is-seq .acts__step:not(.is-lit)::after { transform: scale(.65); opacity: .5; }
.is-seq .acts__step.is-lit::after { box-shadow: 0 0 0 3px rgba(6, 7, 10, .85), 0 0 14px rgba(var(--nc), .9); }
.is-seq .acts__step::before { transform-origin: 0 50%; transition: transform 1.3s cubic-bezier(.45, 0, .25, 1); }
.is-seq .acts__step:not(.is-drawn)::before { transform: scaleX(0); opacity: .35; }
.is-seq .acts__step.is-drawn::before { transform: scaleX(1); opacity: 1; }
@media (max-width: 900px) {
  .is-seq .acts__step::before { transform-origin: 50% 0; }
  .is-seq .acts__step:not(.is-drawn)::before { transform: scaleY(0); }
  .is-seq .acts__step.is-drawn::before { transform: scaleY(1); }
}
.acts__runner {
  position: absolute; left: 0; top: 0; z-index: 3; width: 12px; height: 12px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff3d6 0, #ffbf6a 45%, #ec8a3a 100%);
  box-shadow: 0 0 10px 3px rgba(255, 170, 80, .75), 0 0 26px 8px rgba(236, 138, 58, .35);
}

/* =====================================================================
   FONTE DOS TÍTULOS (teste): Mantra. Para voltar à anterior, remova este bloco.
   ===================================================================== */
/* a versão gratuita da Mantra troca dígitos, % . , & por um selo de aviso: esses caracteres ficam de fora (caem na Cinzel) */
@font-face { font-family: 'Mantra'; src: url(../fonts/mantra.ttf) format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0020-0024, U+0027-002B, U+002D, U+002F, U+003A-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2022; }
:root { --f-title: 'Mantra', var(--f-display); }
.rise__title, .valley__title, .treat__title, .harvest__title, .spoils__title, .almanac__title, .finale__title { font-family: var(--f-title); font-weight: 400; letter-spacing: .01em; }
/* a Mantra fica só nos títulos de capítulo (grandes); nomes de bloco, rótulos e números continuam em Cinzel */

/* tamanhos: os títulos de seção (Recompensas/Clássicos e Agenda) passam a ter o mesmo peso dos capítulos */
.spoils__title, .almanac__title { font-size: clamp(46px, 5vw, 84px); line-height: 1; }
.rise__title, .valley__title, .treat__title, .harvest__title, .finale__title { font-size: clamp(46px, 5vw, 84px); }

/* agenda: sem a coluna de status repetida; "Quando" ocupa o espaço e a sigla não quebra */
.schedule td:last-child { text-align: left; padding-right: 0; }
.nb { white-space: nowrap; }
@media (max-width: 640px) { .schedule tr { grid-template-columns: 1fr; } }

/* botão da música (canto inferior esquerdo, acima da abertura) */
.music-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 200;
  width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
  color: var(--bone-3); background: rgba(6, 7, 10, .7); border: 1px solid var(--gold-2); border-radius: 50%;
  cursor: pointer; backdrop-filter: blur(4px); transition: color .2s, border-color .2s;
}
.music-toggle:hover, .music-toggle:focus-visible { color: var(--gold); border-color: var(--gold); }
.music-toggle.is-on { color: var(--flame-2); }

/* =====================================================================
   REGRAS E DETALHES DOS EVENTOS
   Listas curtas, tabelas de atributos e armadilhas, no tom das placas.
   ===================================================================== */
/* horários do Levantar dos Mortos */
.times { display: grid; gap: 10px; margin-top: 4px; }
.times__t { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mist-2); }
.times__t span { margin-left: 8px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--bone-3); }
.times__t strong { color: var(--bone-2); font-weight: 600; }
/* uma linha por dupla de salas: o evento roda de hora em hora, em duas salas por vez */
.times__grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.times__grid th { padding: 7px 22px 7px 0; text-align: left; font: 500 14px var(--f-text); color: var(--bone-3); white-space: nowrap; }
.times__grid td { padding: 7px 20px 7px 0; font: 700 20px/1 var(--f-text); letter-spacing: .02em; color: #fff; }
.times__grid td:last-child { padding-right: 0; }
.times__grid tr + tr > * { border-top: 1px solid rgba(236, 229, 216, .08); }
@media (max-width: 520px) {
  .times__grid th { padding-right: 12px; font-size: 13px; }
  .times__grid td { padding-right: 11px; font-size: 17px; }
}

/* onde a Pumpkin of Luck cai: lista curta com o mesmo losango das listas de regras */
.where { display: grid; max-width: 40ch; border-top: 1px solid rgba(236, 229, 216, .08); }
.where li { position: relative; padding: 8px 0 8px 18px; border-bottom: 1px solid rgba(236, 229, 216, .08); }
.where li::before { content: ""; position: absolute; left: 2px; top: calc(8px + .75em); width: 5px; height: 5px; margin-top: -3px; background: var(--flame); transform: rotate(45deg); }
.where strong { color: var(--bone); }
.where a { color: var(--flame-2); text-underline-offset: 3px; }

/* sequência da invasão com 4 passos */
.acts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-left: calc(14% + 2vw); }
.acts__step:nth-child(4) { --c1: rgba(236, 138, 58, 1); --c2: rgba(224, 103, 90, 1); --nc: 224, 103, 90; }
.acts--4 p { max-width: 32ch; }
@media (max-width: 1180px) { .acts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; margin-left: var(--gutter); } }
@media (max-width: 900px) { .acts--4 { grid-template-columns: 1fr; } }

/* bloco de regras + recompensas */
.brief {
  position: relative; z-index: 1;
  margin: clamp(48px, 8vh, 80px) var(--gutter) 0 calc(14% + 2vw);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px);
}
@media (max-width: 1180px) { .brief { margin-left: var(--gutter); } }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; } }

.info { display: grid; gap: 10px; align-content: start; }
.info__t {
  padding-bottom: 12px; border-bottom: 1px solid rgba(236, 229, 216, .2);
  font: 600 14px var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--bone);
}
.info ul li {
  position: relative; padding: 10px 0 10px 18px;
  font-size: 16px; line-height: 1.5; border-bottom: 1px solid rgba(236, 229, 216, .08);
}
.info ul li::before {
  content: ""; position: absolute; left: 2px; top: 19px; width: 5px; height: 5px;
  background: var(--flame); transform: rotate(45deg);
}
.info li strong, .info__lead strong { color: var(--bone); }
.info a { color: var(--flame-2); text-underline-offset: 3px; }
.info__lead { font-size: 16px; line-height: 1.55; }

/* tabela de atributos */
.stats { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.stats caption {
  text-align: left; padding-bottom: 8px;
  font: 600 13px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--mist);
}
.stats th, .stats td { padding: 9px 12px 9px 0; border-bottom: 1px solid rgba(236, 229, 216, .1); text-align: right; }
.stats th:first-child { text-align: left; }
.stats thead th { font: 600 12px var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--mist-2); }
.stats tbody th { font-weight: 600; color: var(--bone); }
.stats td { font-variant-numeric: tabular-nums; color: var(--bone-2); }
.stats tr > :last-child { padding-right: 0; }
.stats__boss th, .stats__boss td { color: #f4ddd6; }
.info .stats { margin-top: 10px; }

/* armadilhas do Valley: nome + dano em duas colunas */
.traps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.info .traps li { padding-left: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.info .traps li::before { display: none; }
.traps b { margin-left: auto; font: 700 15px var(--f-display); color: var(--blood-2); }
.traps i { order: 3; width: 100%; font-size: 13.5px; font-style: normal; color: var(--bone-3); }
@media (max-width: 520px) { .traps { grid-template-columns: 1fr; } }

/* recompensa da Colheita */
.payout { margin-top: 6px; border-top: 1px solid rgba(214, 178, 106, .22); }
.payout div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(214, 178, 106, .14); }
.payout dt { font: 600 13px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.payout dd { font-size: 16.5px; color: var(--bone); text-align: right; }
.payout dd small { display: block; margin-top: 2px; font-size: 14px; color: var(--bone-3); }
.payout__note { margin-top: 12px; font-size: 15px; color: var(--bone-3); }
.payout__note strong { color: var(--bone); }

/* percentuais da Pumpkin e marca de novidade */
.drops dt b { display: block; font: 700 15px var(--f-display); letter-spacing: 0; color: var(--bone); }
.new {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  font: 700 10.5px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--flame);
}
.drops dt .new { margin-left: 0; display: block; margin-top: 4px; }

/* anéis novos: nome em laranja sublinhado; ao passar o mouse, aparece o monstro */
.ring-new__name {
  position: relative; cursor: help;
  color: var(--flame-2); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--flame); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.ring-new__pic {
  position: absolute; left: calc(100% + 14px); top: 50%; z-index: 30;
  height: 210px; width: auto; min-width: 150px; max-width: none; object-fit: contain;
  padding: 10px 14px;
  background: radial-gradient(ellipse at 50% 85%, rgba(236, 138, 58, .22), rgba(10, 9, 9, .96) 70%);
  border: 1px solid rgba(236, 138, 58, .35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translate(-6px, -50%);
  transition: opacity .2s, transform .2s, visibility .2s;
  pointer-events: none;
}
.ring-new__name:hover .ring-new__pic, .ring-new__name:focus .ring-new__pic { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.ring-new__name:focus { outline: none; }
.ring-new__name:focus-visible { outline: 2px solid var(--flame-2); outline-offset: 3px; }

/* agenda: detalhe embaixo do "quando" */
.schedule td small { display: block; margin-top: 4px; }

/* Vale (tela larga): monstros e armadilhas numa faixa abaixo das três colunas */
@media (min-width: 1200px) {
  .valley__story > .stats { grid-column: 1; grid-row: 4; margin-top: 36px; }
  .valley__story > .info { grid-column: 2 / span 2; grid-row: 4; margin-top: 36px; }
  .valley__story > .info .traps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.harvest__brief > .info { margin-top: 18px; }

/* "Como entrar" do Valley: dois passos + três requisitos lado a lado */
.plate__steps { counter-reset: step; display: grid; }
.plate__steps li {
  counter-increment: step; position: relative; display: grid; gap: 3px;
  padding: 14px 0 14px 40px; border-bottom: 1px solid rgba(220, 222, 230, .1);
}
.plate__steps li::before {
  content: counter(step); position: absolute; left: 0; top: 13px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid rgba(220, 222, 230, .35); border-radius: 50%;
  font: 600 14px var(--f-display); color: #e6e4df;
}
.plate__steps b { font: 600 18px/1.3 var(--f-display); color: #fff; }
.plate__steps span { font-size: 15px; color: #9ea4ad; }
.plate__req { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.plate__req div { display: grid; gap: 4px; padding: 4px 12px; border-left: 1px solid rgba(220, 222, 230, .12); }
.plate__req div:first-child { padding-left: 0; border-left: 0; }
.plate__req dt { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #9ea4ad; }
.plate__req dd { font: 700 24px/1.1 var(--f-display); color: #fff; }
.plate__req small { font: 500 14px var(--f-text); color: #c9ccd2; }

/* Pumpkin of Luck: o Jack O'Lantern Ring ao lado dos dois anéis novos */
.loot__trio { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(18px, 3vw, 48px); width: 100%; }
.loot__trio figure { display: grid; justify-items: center; gap: 14px; }
.loot__trio img { height: clamp(200px, 21vw, 310px); width: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .7)); }
.loot__trio figcaption { display: grid; justify-items: center; gap: 4px; text-align: center; }
.loot__trio figcaption strong { font: 600 17px var(--f-display); color: var(--gold); }
.loot__trio .is-new figcaption strong { color: var(--flame-2); }
.loot__trio figcaption .new { margin-left: 0; }
.loot__trio-cap { position: relative; font-size: 14.5px; color: var(--bone-3); text-align: center; }
@media (max-width: 900px) { .loot__trio img { height: clamp(120px, 30vw, 170px); } .loot__trio figcaption strong { font-size: 14px; } }
.loot__trio { align-items: stretch; }
.loot__trio figure { grid-template-rows: 1fr auto; }
.loot__trio img { align-self: end; }
.new--back { color: var(--gold); }


/* primeira tela: fade leve, um item depois do outro, enquanto a névoa da abertura se abre */
.hero-wait .arrival__mark img, .hero-wait .arrival__year, .hero-wait .arrival__lead, .hero-wait .arrival__status, .hero-wait .chapters { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-in .arrival__mark img, .hero-in .arrival__year, .hero-in .arrival__lead, .hero-in .arrival__status, .hero-in .chapters { animation: hero-in .8s ease-out both; }
  .hero-in .arrival__year { animation-delay: .2s; }
  .hero-in .arrival__lead { animation-delay: .4s; }
  .hero-in .arrival__status { animation-delay: .55s; }
  .hero-in .chapters { animation-delay: .7s; }
}
@keyframes hero-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* brilho laranja e faíscas da logo acompanham a entrada da logo (não aparecem antes dela) */
.hero-wait .arrival__mark::before, .hero-wait .arrival__sparks { opacity: 0; animation: none; }   /* animation: none, senão a cintilação do brilho sobrepõe o opacity e ele aparece antes da logo */
@media (prefers-reduced-motion: no-preference) {
  .hero-in.is-live-hero .arrival__mark::before { animation: hero-glow .8s ease-out both, flicker 7.1s steps(1) .8s infinite; }
}
@keyframes hero-glow { from { opacity: 0; } to { opacity: 1; } }


/* a faixa da barra de rolagem fica reservada o tempo todo: durante a abertura ela não aparece, e quando a rolagem é liberada a página não "pula" de largura */
html { scrollbar-gutter: stable; }

/* =====================================================================
   BARRA DE ROLAGEM
   Fina e escura, na cor do cenário; o "polegar" é quase invisível e ganha um toque de brasa ao passar o mouse.
   - Chrome, Edge, Opera e Safari: ::-webkit-scrollbar (cantos arredondados, hover)
   - Firefox: scrollbar-width / scrollbar-color (só aceita cor lisa e largura fina)
   O Chrome recente ignora o ::-webkit-scrollbar quando scrollbar-color está definido, por isso o padrão só vale no Firefox.
   ===================================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-0); }
::-webkit-scrollbar-thumb {
  background: rgba(236, 229, 216, .16);
  border: 2px solid var(--ink-0); border-radius: 8px;           /* a borda da cor do fundo deixa o polegar mais fino que a faixa */
  transition: background-color .2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(236, 138, 58, .6); }
::-webkit-scrollbar-thumb:active { background: rgba(255, 183, 102, .75); }
::-webkit-scrollbar-corner { background: var(--ink-0); }
@supports (-moz-appearance: none) {
  html, * { scrollbar-width: thin; scrollbar-color: rgba(236, 229, 216, .22) var(--ink-0); }
}

/* aranhas: já estão penduradas na teia, então ao entrar elas DESCEM pelo fio (o fio cresce de zero até o comprimento normal, com um leve balanço no fim).
   Ficam invisíveis até a logo entrar. Usa animation, e não transition, para funcionar mesmo se a aranha for inserida depois do fade da primeira tela.
   Sem fill-mode "forwards" no fio: ao terminar, o comprimento volta a ser controlado pela rolagem (--len, em js/ambient.js). */
.spider { opacity: 0; }
.hero-in .spider {
  animation:
    spider-sway var(--sway-dur, 8s) ease-in-out var(--sway-delay, 0s) infinite alternate,
    spider-in .7s ease-out .9s both;
}
.hero-in .spider__thread { animation: spider-drop 3.6s cubic-bezier(.45, .1, .3, 1.06) .9s backwards; }
@keyframes spider-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spider-drop { from { height: 0; } }
@media (prefers-reduced-motion: reduce) { .spider { opacity: 1; } .hero-in .spider, .hero-in .spider__thread { animation: none; } }

/* =====================================================================
   ABERTURA — uma coluna só (desktop): logo, ano, frase, data e capítulos
   dividem o mesmo eixo central e a mesma largura da logo
   ===================================================================== */
@media (min-width: 901px) {
  .arrival { --hero-w: min(40vw, 760px); --chap-w: min(56vw, 1000px); }
  .arrival__title { width: var(--hero-w); }
  .chapters { width: var(--chap-w); left: calc(var(--axis) + (var(--hero-w) - var(--chap-w)) / 2); right: auto; }   /* mesma linha central da logo */
  .arrival__lead { margin-inline: auto; text-align: center; }
  .arrival__status { text-align: center; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .arrival { --hero-w: min(52vw, 700px); }
  .chapters { left: calc(var(--gutter) + 56px); right: calc(var(--gutter) + 56px); width: auto; }     /* coluna da logo é estreita para 3 capítulos; faixa simétrica e longe do botão de som */
}

/* =====================================================================
   BANDO DE CORVOS NA ABERTURA (js/hero-flock.js) — vídeo real por cima da logo
   O brilho e o esmaecimento de cima e de baixo já vêm "assados" no vídeo (céu quase branco).
   darken (e não multiply): fica sempre o mais escuro dos dois. O "branco" do vídeo sai da compressão
   ~92%, e no multiply isso escurecia a caixa inteira (aparecia uma faixa); no darken ele nunca ganha da cena.
   (filtro + máscara + mistura em CSS sobre um vídeo tocando custava caro para o navegador compor)
   ===================================================================== */
.arrival__flock {
  position: absolute; z-index: 3; left: 0; width: 100%; top: 5%; height: clamp(300px, 50%, 620px);
  object-fit: cover; pointer-events: none;
  mix-blend-mode: darken;
  opacity: 0; transition: opacity .7s ease;
}
.arrival__flock.is-alpha { mix-blend-mode: normal; }   /* WebM com transparência: não precisa misturar */
.arrival__flock.is-on { opacity: 1; }
@media (max-width: 900px) { .arrival__flock { top: 3%; height: 40vh; } }