/* ═══════════════════════════════════════════════════════
   ALL ROADS LEAD TO SOLANA — style · pass 2
   muted storybook · film grain · museum of memes
   ═══════════════════════════════════════════════════════ */

:root {
  --ink: #131520;
  --ink-2: #1b1e2c;
  --parchment: #f0e9da;
  --slate: #8a93b0;
  --moss: #9db98a;
  --gold: #d9b36c;
  --rose: #c9909a;
  --sol-grad: linear-gradient(93deg, #00ffa3 0%, #6fe3c1 40%, #9945ff 100%);
  --frame-edge: #6b5636;
  --frame-face: linear-gradient(135deg, #8a6f43 0%, #c8a86a 22%, #7a6039 50%, #bfa063 78%, #8a6f43 100%);
  --serif: "Marcellus", serif;
  --sans: "Inter", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--ink); }
body { font-family: var(--sans); color: var(--parchment); overflow-x: hidden; cursor: none; }
@media (hover: none), (pointer: coarse) { body { cursor: auto; } #cursor { display: none; } }

img { display: block; user-select: none; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
@media (hover: none) { button { cursor: pointer; } }

/* every generated backdrop passes through the same grade */
.plate { filter: saturate(0.82) contrast(0.97) brightness(0.97); }

/* ═════════ GRADE + GRAIN — glue the world together ═════════ */
#grade {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  background:
    radial-gradient(115% 95% at 50% 45%, transparent 55%, rgba(15, 14, 24, 0.42) 100%),
    linear-gradient(165deg, rgba(38, 44, 76, 0.10) 0%, transparent 45%, rgba(216, 178, 120, 0.08) 100%);
}
#grain {
  position: fixed; inset: -60%; width: 220%; height: 220%; z-index: 71; pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(9) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 11% { transform: translate(-3%,2%); }
  22% { transform: translate(2%,-3%); } 33% { transform: translate(-2%,-2%); }
  44% { transform: translate(3%,2%); } 55% { transform: translate(-3%,-1%); }
  66% { transform: translate(2%,3%); } 77% { transform: translate(-1%,2%); } 88% { transform: translate(3%,-2%); }
}
@media (prefers-reduced-motion: reduce) { #grain { animation: none; } }

/* ═════════ PRELOADER ═════════ */
#loader {
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(120% 100% at 50% 110%, #232637 0%, var(--ink) 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; transition: opacity 1.1s ease, visibility 1.1s;
}
#loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-pill { width: 46px; height: 74px; position: relative; animation: pill-breathe 2.2s ease-in-out infinite; }
.loader-pill-top, .loader-pill-bottom { position: absolute; left: 0; width: 100%; height: 50%; }
.loader-pill-top { top: 0; background: #ece4d3; border-radius: 23px 23px 0 0; }
.loader-pill-bottom { bottom: 0; background: #4f9c58; border-radius: 0 0 23px 23px; }
@keyframes pill-breathe { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.06) translateY(-6px); } }
.loader-line { font-family: var(--serif); letter-spacing: .35em; font-size: 12px; text-transform: uppercase; color: var(--slate); }
.loader-bar { width: 180px; height: 2px; background: rgba(240,233,218,.12); border-radius: 2px; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0%; background: var(--gold); transition: width .35s ease; }

/* ═════════ CURSOR ═════════ */
#cursor { position: fixed; left: 0; top: 0; z-index: 190; pointer-events: none; }
.cursor-core {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--parchment); box-shadow: 0 0 10px 2px rgba(217,179,108,.7);
  transform: translate(-50%,-50%);
}
.cursor-halo {
  position: absolute; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(138,147,176,.5);
  transform: translate(-50%,-50%) scale(1);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
#cursor.on .cursor-halo { transform: translate(-50%,-50%) scale(1.8); border-color: rgba(217,179,108,.85); background: rgba(217,179,108,.07); }

/* ═════════ CANVASES ═════════ */
#fx-back, #fx-front { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#fx-back { z-index: 1; }
#fx-front { z-index: 60; }

/* ═════════ HUD ═════════ */
#hud {
  position: fixed; z-index: 100; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px;
  opacity: 0; transform: translateY(-12px);
  transition: opacity 1s ease .2s, transform 1s ease .2s;
}
#hud.in { opacity: 1; transform: none; }
.hud-brand { display: flex; align-items: center; gap: 10px; }
.hud-pill { width: 16px; height: 26px; position: relative; display: inline-block; }
.hud-pill::before, .hud-pill i { content: ""; position: absolute; left: 0; width: 100%; height: 50%; }
.hud-pill::before { top: 0; background: #ece4d3; border-radius: 8px 8px 0 0; }
.hud-pill i { bottom: 0; background: #4f9c58; border-radius: 0 0 8px 8px; }
.hud-name { font-family: var(--serif); letter-spacing: .18em; font-size: 15px; }
.hud-progress { position: relative; width: 44px; height: 44px; }
.hud-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hp-track, .hp-fill { fill: none; stroke-width: 2; }
.hp-track { stroke: rgba(240,233,218,.14); }
.hp-fill { stroke: var(--gold); stroke-dasharray: 100.5; stroke-dashoffset: 100.5; transition: stroke-dashoffset .2s linear; }
.hp-label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 13px; color: var(--slate); }
.hud-links { display: flex; align-items: center; gap: 18px; }
.hud-links a { font-size: 13px; letter-spacing: .12em; opacity: .85; transition: opacity .25s; }
.hud-links a:hover { opacity: 1; }
.hud-buy {
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(217,179,108,.5);
  background: rgba(217,179,108,.08);
  font-family: var(--serif); letter-spacing: .2em; text-transform: uppercase; font-size: 11px;
  transition: box-shadow .3s, background .3s;
}
.hud-buy:hover { background: rgba(217,179,108,.16); box-shadow: 0 0 26px rgba(217,179,108,.22); }

/* ═════════ ACT SCAFFOLD ═════════ */
main { position: relative; z-index: 10; }
.act { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#act-dawn     { height: 250vh; }
#act-new      { height: 460vh; }
#act-fade     { height: 300vh; }
#act-graveyard{ height: 460vh; }
#act-hall     { height: 560vh; }
#act-return   { height: 420vh; }
#act-arrival  { height: 480vh; }
.act-epilogue { height: auto; }
.act-epilogue .stage { position: relative; height: auto; min-height: 100vh; overflow: visible; }

.layer { position: absolute; inset: 0; }
.layer img { width: 100%; height: 100%; object-fit: cover; }

.inter {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 0 8vw; opacity: 0; pointer-events: none; z-index: 8;
}
.inter p {
  font-family: var(--serif); font-size: clamp(24px, 4vw, 52px);
  line-height: 1.3; color: var(--parchment);
  text-shadow: 0 2px 34px rgba(10,10,18,.95), 0 0 80px rgba(10,10,18,.6);
}

/* ═════════ ACT I — DAWN ═════════ */
.layer-vista img { transform: scale(1.06); }
.layer-vignette {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 48%, rgba(15,14,24,.5) 100%),
    linear-gradient(to bottom, rgba(15,14,24,.3), transparent 24%, transparent 70%, rgba(15,14,24,.75));
}
.hero-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 6vw; z-index: 6;
}
.hero-kicker { font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: var(--slate); margin-bottom: 3vh; }
.hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 9vw, 124px); line-height: .98; letter-spacing: .02em;
  text-shadow: 0 4px 46px rgba(10,10,18,.85);
}
.ht-line { display: block; overflow: hidden; }
.ht-w { display: inline-block; transform: translateY(110%); }
.ht-sol .ht-w {
  background: var(--sol-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: saturate(.75) drop-shadow(0 0 26px rgba(111,227,193,.25));
}
.hero-sub { margin-top: 3.4vh; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: rgba(240,233,218,.8); }
.tkr { color: var(--gold); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 6;
}
.scroll-cue p { font-size: 11px; letter-spacing: .5em; text-transform: uppercase; color: var(--slate); }
.sc-ring { width: 26px; height: 42px; border: 1.5px solid rgba(138,147,176,.7); border-radius: 15px; position: relative; }
.sc-ring::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px;
  background: var(--gold); border-radius: 3px; transform: translateX(-50%);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { top: 8px; opacity: 1; } 70% { top: 24px; opacity: 0; } 100% { top: 8px; opacity: 0; } }

/* ═════════ CHAIN LOGOS (crisp SVG, injected by JS) ═════════ */
.chain-logo { display: inline-grid; place-items: center; }
.chain-logo svg { width: 100%; height: 100%; display: block; }

/* glowing mark hovering inside an arch in the scene */
.arch-logo {
  position: absolute; z-index: 5; opacity: 0;
  width: clamp(46px, 6.5vw, 92px); height: clamp(46px, 6.5vw, 92px);
  left: var(--ax, 50%); top: var(--ay, 40%); transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px rgba(240,233,218,.35));
}
.arch-logo svg { width: 100%; height: 100%; }
.arch-logo::after {
  content: ""; position: absolute; inset: -55%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(240,233,218,.22), transparent 70%);
  z-index: -1; animation: arch-breathe 4s ease-in-out infinite;
}
@keyframes arch-breathe { 50% { opacity: .5; transform: scale(1.06); } }
.arch-logo-hood { --ax: 55%; --ay: 26%; }
.arch-logo-sol { --ax: 62.5%; --ay: 42%; }

/* ═════════ ACT II — NEW WORLD ═════════ */
.island-tag {
  position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; border-radius: 999px;
  background: rgba(19,21,32,.68); border: 1px solid rgba(138,147,176,.32);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  white-space: nowrap; z-index: 7; opacity: 0;
}
.it-live { width: 8px; height: 8px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 10px var(--moss); animation: live 1.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: .35; } }
.it-logo { width: 20px; height: 20px; display: inline-grid; place-items: center; }
.it-logo svg { width: 100%; height: 100%; }
.it-name { font-family: var(--serif); letter-spacing: .22em; font-size: 14px; }
.it-note { font-size: 11px; letter-spacing: .1em; color: var(--slate); font-style: italic; }

.hype-words { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hype-words span {
  position: absolute; font-family: var(--serif); letter-spacing: .25em;
  color: rgba(240,233,218,.75); text-shadow: 0 0 18px rgba(19,21,32,.9);
  font-size: clamp(11px, 1.4vw, 18px); opacity: 0; white-space: nowrap;
}
.hype-words span:nth-child(1){ left: 8%;  top: 22%; }
.hype-words span:nth-child(2){ left: 78%; top: 18%; font-size: clamp(16px,2.2vw,30px); color: var(--gold); }
.hype-words span:nth-child(3){ left: 6%;  top: 66%; }
.hype-words span:nth-child(4){ left: 76%; top: 62%; }
.hype-words span:nth-child(5){ left: 14%; top: 44%; }
.hype-words span:nth-child(6){ left: 82%; top: 40%; }
.hype-words span:nth-child(7){ left: 10%; top: 84%; }
.hype-words span:nth-child(8){ left: 68%; top: 82%; }

/* ── composited artifacts: the real memes, framed in-world ── */
.artifact { position: absolute; z-index: 6; opacity: 0; }
.artifact img { width: 100%; height: auto; display: block; }
.artifact figcaption {
  margin-top: 8px; text-align: center;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(240,233,218,.75);
  text-shadow: 0 1px 10px rgba(10,10,18,.9);
}

/* postcard — a photo of the migration, pinned mid-air */
.postcard {
  left: 18%; top: 46%; width: clamp(200px, 24vw, 360px);
  transform: translate(-50%,-50%) rotate(-4deg);
}
.postcard img {
  border: 10px solid #efe7d6; border-bottom-width: 34px; border-radius: 3px;
  box-shadow: 0 22px 60px rgba(8,8,14,.65);
  filter: saturate(.92);
}
.postcard figcaption { color: rgba(240,233,218,.85); }

/* billboard — Pump Fun Trenches VI, proudly weathered */
.billboard {
  right: 6%; top: 40%; width: clamp(170px, 19vw, 300px);
  transform: rotate(3deg);
}
.billboard img {
  border: 7px solid #3a3327; outline: 2px solid #171512; border-radius: 3px;
  box-shadow: 0 24px 70px rgba(8,8,14,.7);
  filter: saturate(.9) brightness(.96);
}

/* ═════════ ACT III — FADE ═════════ */
.fade-dusk {
  background:
    linear-gradient(to bottom, rgba(19,22,38,.55), rgba(19,22,38,.25) 40%, rgba(15,14,24,.6)),
    radial-gradient(120% 80% at 50% 30%, rgba(30,34,58,.35), transparent 70%);
  opacity: 0;
}
.bg-fade img { filter: saturate(.55) brightness(.72) contrast(.96); }
.island-tag-fade { bottom: 8vh; }
.island-tag-fade .it-name { color: rgba(240,233,218,.7); }
.island-tag-fade .it-logo { opacity: .55; filter: grayscale(.5); }

/* walking traveler crossing acts II–III */
.traveler-walk {
  position: absolute; bottom: 4vh; left: 0; width: clamp(76px, 11vh, 130px); z-index: 6;
  filter: drop-shadow(0 12px 26px rgba(8,8,14,.65));
  opacity: 0; will-change: transform;
}
.traveler-walk img { width: 100%; animation: walk-bob 0.55s ease-in-out infinite alternate; }
@keyframes walk-bob { from { transform: translateY(0) rotate(-1.6deg); } to { transform: translateY(-7px) rotate(1.6deg); } }
.traveler-leave img { animation-duration: 0.8s; filter: saturate(.8) brightness(.9); }

/* ═════════ ACT IV — GRAVEYARD ═════════ */
.bg-gy img { transform: scale(1.04); }
.inter-gy p { font-size: clamp(22px, 3.2vw, 42px); }
.graves { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.grave {
  position: absolute; transform: translate(-50%, 0);
  left: var(--gx, 50%); top: var(--gy, 50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; pointer-events: auto;
}
.grave .g-logo {
  width: clamp(34px, 4.6vw, 64px); height: clamp(34px, 4.6vw, 64px);
  opacity: .85; filter: grayscale(.45) brightness(1.05) drop-shadow(0 0 14px rgba(240,233,218,.25));
  transition: filter .4s, opacity .4s, transform .4s;
}
.grave:hover .g-logo { opacity: 1; filter: grayscale(0) drop-shadow(0 0 22px rgba(240,233,218,.5)); transform: translateY(-4px); }
.grave .g-card {
  padding: 9px 14px; border-radius: 12px; text-align: center;
  background: rgba(17,15,26,.74); border: 1px solid rgba(138,147,176,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s;
}
.grave:hover .g-card { border-color: rgba(217,179,108,.55); }
.grave .e-name { font-family: var(--serif); letter-spacing: .2em; font-size: 12.5px; display: block; }
.grave .e-years { font-size: 9.5px; letter-spacing: .18em; color: var(--slate); display: block; margin-top: 3px; }
.grave .e-line { font-size: 10.5px; font-style: italic; color: rgba(240,233,218,.66); display: block; margin-top: 5px; max-width: 190px; }
.gy-hint {
  position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .4em; text-transform: uppercase;
  color: rgba(138,147,176,.8); z-index: 7; opacity: 0; white-space: nowrap;
}

/* ═════════ ACT V — HALL OF MEMORIES ═════════ */
.bg-hall img { transform: scale(1.05); }
.inter-hall p { font-size: clamp(22px, 3.2vw, 42px); }
.gallery {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  display: flex; align-items: center; gap: clamp(40px, 6vw, 110px);
  padding: 0 12vw; z-index: 6; will-change: transform;
}
.piece { flex: none; width: clamp(220px, 30vh, 380px); position: relative; }
.piece-frame {
  padding: clamp(10px, 1.4vh, 18px);
  background: var(--frame-face);
  border: 3px solid var(--frame-edge);
  box-shadow:
    inset 0 0 0 2px rgba(20,16,8,.55),
    0 30px 70px rgba(8,8,14,.75),
    0 6px 18px rgba(8,8,14,.5);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .45s cubic-bezier(.2,.9,.3,1.2);
}
.piece:hover .piece-frame { transform: rotate(0deg) scale(1.05); }
.piece-frame img { width: 100%; height: auto; filter: saturate(.94); }
.piece-plaque {
  margin: 14px auto 0; width: fit-content; max-width: 92%;
  padding: 7px 16px; border-radius: 4px; text-align: center;
  background: linear-gradient(135deg, #2c2a22, #1d1b15);
  border: 1px solid rgba(217,179,108,.4);
  box-shadow: 0 8px 22px rgba(8,8,14,.6);
}
.piece-plaque b { display: block; font-family: var(--serif); font-weight: 400; letter-spacing: .16em; font-size: 12px; color: var(--gold); text-transform: uppercase; }
.piece-plaque i { display: block; font-size: 10px; letter-spacing: .08em; color: rgba(240,233,218,.6); margin-top: 3px; }
.hall-hint {
  position: absolute; left: 50%; bottom: 4.5vh; transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(138,147,176,.7); z-index: 7; opacity: 0; white-space: nowrap;
}

/* ═════════ ACT VI — RETURN ═════════ */
.bg-return img { transform: scale(1.08); transform-origin: 50% 42%; }
.arch-logo-sol { width: clamp(40px, 5vw, 74px); height: clamp(40px, 5vw, 74px); }
.cameo-jesus {
  position: absolute; right: 9%; top: 13%; width: clamp(110px, 13vw, 200px); z-index: 4;
  opacity: 0; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 60px 24px rgba(240,233,218,.12);
}
.cameo-jesus img {
  width: 100%; filter: saturate(.85) brightness(1.02);
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 55%, transparent 72%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 55%, transparent 72%);
}
.traveler-return {
  position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%);
  width: clamp(90px, 13vh, 150px); z-index: 5;
  filter: drop-shadow(0 14px 30px rgba(8,8,14,.7)) drop-shadow(0 0 22px rgba(217,179,108,.22));
}
.traveler-return img { width: 100%; animation: traveler-bob 3.2s ease-in-out infinite; }
@keyframes traveler-bob { 50% { transform: translateY(-7px); } }

/* ═════════ ACT VII — ARRIVAL ═════════ */
#act-arrival .stage { background: #0c0d16; }
.portal-heart { position: absolute; inset: 0; display: grid; place-items: center; }
.portal-heart img {
  width: min(92vh, 92vw); height: min(92vh, 92vw); object-fit: cover; border-radius: 50%;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 60%, transparent 74%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 60%, transparent 74%);
}
.white-veil { position: absolute; inset: 0; background: #f4eee0; opacity: 0; z-index: 6; }
.finale-vista { position: absolute; inset: 0; opacity: 0; z-index: 4; }
.inter-fin { z-index: 7; }
.inter-fin p { font-size: clamp(20px, 3vw, 38px); color: rgba(240,233,218,.92); }

/* ═════════ EPILOGUE ═════════ */
.act-epilogue { background: radial-gradient(120% 90% at 50% 0%, #1c1f30 0%, var(--ink) 60%); }
.epi-inner {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12vh 6vw 8vh; gap: 22px; position: relative; z-index: 5;
}
.epi-traveler { width: clamp(130px, 20vh, 210px); position: relative; }
.epi-traveler img { width: 100%; filter: drop-shadow(0 18px 40px rgba(8,8,14,.6)) drop-shadow(0 0 30px rgba(217,179,108,.2)); transition: transform .2s; }
.epi-traveler:hover img { transform: scale(1.04) rotate(-2deg); }
.epi-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 6.5vw, 84px); line-height: 1.04;
  background: var(--sol-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: saturate(.75) drop-shadow(0 0 30px rgba(111,227,193,.2));
}
.epi-tkr { font-size: 14px; letter-spacing: .55em; text-transform: uppercase; color: var(--slate); }
.ca-chip {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border-radius: 999px;
  background: rgba(19,21,32,.7); border: 1px solid rgba(138,147,176,.34);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color .3s, box-shadow .3s;
  max-width: 92vw;
}
.ca-chip:hover { border-color: rgba(217,179,108,.6); box-shadow: 0 0 30px rgba(217,179,108,.12); }
.ca-text { font-size: 13px; letter-spacing: .04em; color: rgba(240,233,218,.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-copy { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); flex: none; }
.epi-links { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.epi-links a {
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--slate);
  padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s;
}
.epi-links a:hover { color: var(--gold); border-color: rgba(217,179,108,.5); }

/* the prophecy relic */
.relic { margin-top: 4vh; width: clamp(260px, 40vw, 470px); }
.relic img {
  width: 100%;
  padding: clamp(10px, 1.4vh, 16px);
  background: var(--frame-face);
  border: 3px solid var(--frame-edge);
  box-shadow: inset 0 0 0 2px rgba(20,16,8,.55), 0 30px 70px rgba(8,8,14,.75);
  filter: saturate(.94);
  transition: transform .5s cubic-bezier(.2,.9,.3,1.2);
}
.relic:hover img { transform: scale(1.03) rotate(-1deg); }
.relic figcaption { margin-top: 12px; font-size: 10.5px; letter-spacing: .16em; color: rgba(240,233,218,.6); }
.relic figcaption span { display: block; font-family: var(--serif); letter-spacing: .3em; font-size: 12px; color: var(--gold); margin-bottom: 4px; }

.replay { margin-top: 8px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: rgba(240,233,218,.6); transition: color .3s; }
.replay:hover { color: var(--gold); }
.epi-fine { margin-top: 14px; font-size: 10.5px; letter-spacing: .14em; color: rgba(240,233,218,.34); }

/* ═════════ RESPONSIVE ═════════ */
@media (max-width: 720px) {
  #hud { padding: 14px 16px; }
  .hud-progress { display: none; }
  .island-tag { padding: 8px 14px; gap: 8px; }
  .it-note { display: none; }
  .postcard { left: 30%; width: clamp(170px, 52vw, 240px); }
  .billboard { right: 3%; width: clamp(130px, 38vw, 190px); }
  .hype-words span:nth-child(odd) { left: 4%; }
  .hype-words span:nth-child(even) { left: auto; right: 3%; }
  .grave .e-line { max-width: 140px; }
  .piece { width: clamp(190px, 62vw, 260px); }
  .traveler-return { bottom: 4vh; }
  .relic { width: min(86vw, 420px); }

  /* shorter pilgrimage on small screens — same beats, fewer swipes */
  #act-dawn      { height: 200vh; }
  #act-new       { height: 320vh; }
  #act-fade      { height: 220vh; }
  #act-graveyard { height: 340vh; }
  #act-hall      { height: 420vh; }
  #act-return    { height: 300vh; }
  #act-arrival   { height: 340vh; }

  /* blur is expensive on mid-range phones — keep it cheap */
  .island-tag, .grave .g-card, .ca-chip { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

  #grain { opacity: 0.04; }
}

/* very small phones — trim further */
@media (max-width: 420px) {
  #act-hall { height: 380vh; }
  #act-graveyard { height: 300vh; }
}

/* ═════════ REDUCED MOTION ═════════ */
@media (prefers-reduced-motion: reduce) {
  .loader-pill, .sc-ring::after, .traveler-return img, .traveler-walk img, .arch-logo::after { animation: none !important; }
}