/* Motion layer on top of the original design (site.css).
   Everything here is entrance/ambient animation; site.css's reduced-motion rule
   switches all of it off, and every element's resting state is fully visible. */

/* ---------- world: slow breathing drift (extra blur is baked into background.webp) ---------- */
body::before {
  transform-origin: 50% 40%;
  animation: world-drift 70s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes world-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.1) translate3d(-1.2%, -1%, 0); }
}
#fireflies { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- masthead entrance ---------- */
.stars span { display: inline-block; animation: star-in .9s ease-out both, twinkle 3.8s ease-in-out infinite; }
.stars span:nth-child(1) { animation-delay: .05s, 1.1s; }
.stars span:nth-child(2) { animation-delay: .15s, 2.0s; }
.stars span:nth-child(3) { animation-delay: .25s, 1.5s; }
.stars span:nth-child(4) { animation-delay: .35s, 2.6s; }
.stars span:nth-child(5) { animation-delay: .45s, 3.1s; }
@keyframes star-in { from { opacity: 0; transform: translateY(-8px) scale(.4); } }
@keyframes twinkle {
  0%, 100% { opacity: 1; text-shadow: 0 0 18px #e5be63; }
  50% { opacity: .55; text-shadow: 0 0 6px #e5be6355; }
}
.stars span:nth-child(3) { animation: star-in .9s .25s ease-out both, star-pulse 4.2s 1.2s ease-in-out infinite; }
@keyframes star-pulse {
  0%, 100% { transform: scale(1) rotate(0); text-shadow: 0 0 14px #e5be63; }
  50% { transform: scale(1.35) rotate(45deg); text-shadow: 0 0 22px #ffe3a0, 0 0 40px #e5be6388; }
}
.campaign-label { animation: fade-up 1s .3s ease-out both; }

/* Title: a slow float + breathing gold glow on the crest, glints popping on the letters (site.js). */
.crest { display: block; position: relative; animation: crest-float 8s 2.4s ease-in-out infinite; }
@keyframes crest-float { 50% { transform: translateY(-4px); } }
.masthead h1 { animation: crest-glow 5s 2.4s ease-in-out infinite; }
@keyframes crest-glow {
  0%, 100% { filter: drop-shadow(0 3px 2px #000) drop-shadow(0 0 0 #f0c76a00); }
  50% { filter: drop-shadow(0 3px 2px #000) drop-shadow(0 0 16px #f0c76a59); }
}
.glint {
  position: absolute; pointer-events: none; z-index: 2;
  font-size: var(--s, 14px); line-height: 1; color: #fffbe8;
  text-shadow: 0 0 6px #fff3c4, 0 0 14px #e8bf62;
  transform: translate(-50%, -50%) scale(0);
  animation: glint-pop 1.3s ease-out forwards;
}
@keyframes glint-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(90deg); }
}
.masthead h1 span { animation: fade-up 1.1s .45s cubic-bezier(.2,.7,.2,1) both; }
.masthead h1 strong {
  /* Gold gradient from the design + a light sweep that passes every few seconds. */
  background:
    linear-gradient(105deg, transparent 40%, #fffdf2f0 50%, transparent 60%) no-repeat,
    linear-gradient(#fff0c4 10%, #d4af68 55%, #fff0c4 61%, #a57d42);
  background-size: 250% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  animation: title-in 1.6s .6s cubic-bezier(.2,.7,.2,1) both, shimmer 6s 2.4s ease-in-out infinite;
}
@keyframes title-in {
  from { opacity: 0; filter: blur(8px); letter-spacing: 12px; }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes shimmer {
  0%, 45% { background-position: 160% 0, 0 0; }
  80%, 100% { background-position: -60% 0, 0 0; }
}
.title-rule { animation: fade-up .8s 1.1s ease-out both; }
/* Clip reveal from the centre outward; ::after is rotated 180deg in site.css so the same inset mirrors. */
.title-rule::before, .title-rule::after {
  /* Design's gold line + a bright glint that runs from the centre outward. */
  background: linear-gradient(90deg, transparent, #fff3cf, transparent) no-repeat, linear-gradient(90deg, transparent, #a78a53);
  background-size: 22% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  animation: rule-draw 1.2s 1.1s cubic-bezier(.2,.7,.2,1) both, rule-glint 6s 2.6s ease-in-out infinite;
}
@keyframes rule-draw { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes rule-glint {
  0%, 50% { background-position: 130% 0, 0 0; }
  85%, 100% { background-position: -30% 0, 0 0; }
}
.rule-gem { display: inline-block; animation: gem-spin 16s linear infinite, twinkle 3.4s ease-in-out infinite; }
@keyframes gem-spin { to { transform: rotate(360deg); } }
.navigation { animation: fade-up .9s 1.3s ease-out both; }
.navigation a { transition: color .3s, box-shadow .35s, background .35s, transform .25s; }
.navigation a:hover { color: #ffe4a8; box-shadow: inset 0 0 14px #c79d5933, 0 0 24px #caa57233; transform: translateY(-1px); }
.navigation a[aria-current=page]::after { animation: twinkle 3s ease-in-out infinite; }

@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- banner: settle in, flickering campfire, rising embers ---------- */
.banner { animation: banner-in 1.8s .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes banner-in { from { opacity: 0; transform: scale(1.03); filter: blur(4px); } }
.banner-caption { animation: fade-in 1.4s 1.8s ease-out both; }
.fire-glow {
  position: absolute; left: 57.5%; top: 88%; width: 34%; aspect-ratio: 1.6;
  transform: translate(-50%, -55%);
  background: radial-gradient(ellipse at center, #ffb35a55 0%, #ff8a3a22 35%, transparent 68%);
  mix-blend-mode: screen; pointer-events: none;
  animation: fire-flicker 2.3s ease-in-out infinite;
}
@keyframes fire-flicker {
  0%, 100% { opacity: .85; transform: translate(-50%, -55%) scale(1); }
  20% { opacity: 1; transform: translate(-50%, -56%) scale(1.04); }
  45% { opacity: .7; transform: translate(-50%, -54%) scale(.97); }
  70% { opacity: .95; transform: translate(-50%, -55.5%) scale(1.02); }
}
.embers { position: absolute; left: 57.5%; top: 87%; width: 0; height: 0; pointer-events: none; }
.embers i {
  position: absolute; left: var(--x); bottom: 0; width: 3px; height: 3px; border-radius: 50%;
  background: #ffd38a; box-shadow: 0 0 6px 2px #ff9a3c99;
  opacity: 0; animation: ember var(--dur) var(--delay) linear infinite;
}
@keyframes ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -140px) scale(.3); }
}

/* ---------- reader ---------- */
.reading-area { position: relative; }
.book-aura {
  position: absolute; left: 50%; top: 120px; width: 120%; height: 80%;
  translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, #d6b8781c 0%, #7c5ca014 40%, transparent 70%);
  animation: aura 6s ease-in-out infinite;
}
@keyframes aura { 0%, 100% { opacity: .6; scale: 1; } 50% { opacity: 1; scale: 1.04; } }
.chapter-heading { animation: fade-up 1s 1.5s ease-out both; }
.book-cover { animation: book-in 1.3s 1.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes book-in { from { opacity: 0; transform: translateY(30px) rotateX(6deg); } }
.book-caption, .reader-controls, .reader-meta, .under-book, .source-note { animation: fade-in 1s 2s ease-out both; }
.comic-img { transition: opacity .5s ease; }
.page-stage:not(.loaded) #comic-image { opacity: 0; }
.swap { animation: swap-in .6s ease-out both; }
@keyframes swap-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.reader-controls button, .reader-controls select, .archive-btn { transition: color .25s, border-color .25s, box-shadow .3s; }
.reader-controls button:hover:not(:disabled), .reader-controls select:hover:not(:disabled) { border-color: #e3c080; box-shadow: inset 0 0 0 2px #181023, 0 0 14px #d6b87833; }
.archive-btn:hover:not(:disabled) { border-color: #e3c080; }

/* ---------- views + group page ---------- */
.view-enter { animation: view-in .6s ease-out both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }
.group-intro h2 { animation: title-glow 5s ease-in-out infinite; }
@keyframes title-glow { 50% { text-shadow: 0 3px 13px #000, 0 0 30px #d6b87844; } }
.group-jumps a { transition: color .25s, text-shadow .25s; }
.group-jumps a:hover { text-shadow: 0 0 12px #f8e4ad88; }

.reveal { opacity: 0; transition: opacity 1s ease-out; }
.reveal.revealed { opacity: 1; }
.reveal .character-portrait { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.reveal .character-copy { transition: transform 1.1s .15s cubic-bezier(.2,.7,.2,1), opacity 1.1s .15s; }
.reveal:not(.revealed) .character-portrait { transform: translateX(-40px) rotate(-5deg); }
.reveal:not(.revealed):nth-child(even) .character-portrait { transform: translateX(40px) rotate(5deg); }
.reveal:not(.revealed) .character-copy { transform: translateY(24px); opacity: 0; }
.character-story.revealed .character-portrait:hover { transform: rotate(0) scale(1.025); box-shadow: 0 18px 44px #000a, 0 0 34px #d6b87833; }
.character-portrait img { transition: filter .4s; }
.character-portrait:hover img { filter: brightness(1.06) saturate(1.05); }

/* ---------- dialogs ---------- */
dialog[open] { animation: dialog-in .35s cubic-bezier(.2,.7,.2,1) both; }
dialog[open]::backdrop { animation: fade-in .35s ease-out both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.archive-grid button { transition: border-color .25s, transform .25s, box-shadow .25s; }
.archive-grid button:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #0008, 0 0 18px #e3c08022; }

/* ---------- misc ---------- */
/* The phone banner (-8px margins) and the book aura bleed past the viewport; clip, don't scroll. */
html, body { overflow-x: clip; }
.footer-fine { font-size: 8px; opacity: .7; margin-top: 16px !important; }
.noscript { text-align: center; padding: 30px; }
.empty-chronicle { padding: 40px 0 60px; }

@media (max-width: 650px) {
  .fire-glow { width: 40%; }
  .embers i:nth-child(n+8) { display: none; }
}
/* Reduced motion: keep the gentle ambient life (twinkle, shimmer, glow, glints, campfire flicker,
   slow fireflies) but drop entrances, drift, floating and anything that travels across the page. */
@media (prefers-reduced-motion: reduce) {
  body::before, .campaign-label, .masthead h1 span, .title-rule, .navigation, .crest,
  .banner, .banner-caption, .chapter-heading, .book-cover, .book-caption, .reader-controls,
  .reader-meta, .under-book, .source-note, .book-aura, .view-enter, .swap,
  dialog[open], dialog[open]::backdrop { animation: none; }
  .stars span { animation: twinkle 3.8s ease-in-out infinite; }
  .stars span:nth-child(3) { animation: star-pulse 4.2s ease-in-out infinite; }
  .masthead h1 strong { animation: shimmer 6s 1s ease-in-out infinite; }
  .title-rule::before, .title-rule::after { animation: rule-glint 6s 1s ease-in-out infinite; }
  .reveal, .reveal .character-copy { opacity: 1 !important; transform: none !important; }
  .page-stage:not(.loaded) #comic-image { opacity: 1; }
}

/* ---------- background music panel ---------- */
.music-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 12px; border-radius: 22px;
  background: linear-gradient(#302333ee, #181422f2); border: 1px solid #887045;
  color: #dac6a1; font: 12px Georgia, serif; letter-spacing: .4px;
  box-shadow: inset 0 0 0 2px #08081255, 0 6px 18px #000a;
  animation: fade-up .8s 2.2s ease-out both;
  transition: border-color .25s, box-shadow .3s, color .25s;
}
.music-toggle { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
.music-toggle:focus-visible { outline-offset: 6px; }
.music-volume {
  --fill: 40%;
  -webkit-appearance: none; appearance: none; width: 84px; height: 16px; margin: 0 0 0 2px;
  padding-left: 12px; border-left: 1px solid #887045; background: none; cursor: pointer;
  box-sizing: content-box;
}
.music-volume::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) var(--fill), #4a3c56 var(--fill)); }
.music-volume::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) var(--fill), #4a3c56 var(--fill)); }
.music-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3cf, #d6b878 60%, #a57d42); border: 0; box-shadow: 0 0 6px #e8bf6299; transition: transform .15s; }
.music-volume::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3cf, #d6b878 60%, #a57d42); border: 0; box-shadow: 0 0 6px #e8bf6299; }
.music-volume:hover::-webkit-slider-thumb, .music-volume:focus-visible::-webkit-slider-thumb { transform: scale(1.2); }
.music-volume:focus-visible { outline: 2px solid #dbbafd; outline-offset: 3px; }
.music-panel.no-volume .music-volume { display: none; }
.music-panel.muted .music-volume { opacity: .5; }
.music-panel:hover { border-color: #e3c080; color: #ffe4a8; box-shadow: inset 0 0 0 2px #08081255, 0 6px 18px #000a, 0 0 18px #d6b87833; }
.music-icon { width: 16px; height: 16px; color: var(--gold); }
.music-icon .cross { display: none; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 30%; background: var(--gold); border-radius: 1px; transition: height .3s; }
.music-panel.playing .eq i { animation: eq 1s ease-in-out infinite; }
.music-panel.playing .eq i:nth-child(2) { animation-delay: -.4s; animation-duration: .8s; }
.music-panel.playing .eq i:nth-child(3) { animation-delay: -.2s; animation-duration: 1.2s; }
.music-panel.playing .eq i:nth-child(4) { animation-delay: -.6s; animation-duration: .9s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.music-panel.waiting { animation: fade-up .8s 2.2s ease-out both, music-call 2.4s 3s ease-in-out infinite; }
@keyframes music-call { 50% { border-color: #e3c080; box-shadow: inset 0 0 0 2px #08081255, 0 6px 18px #000a, 0 0 22px #d6b87855; } }
.music-panel.muted { color: #9a8f9c; }
.music-panel.muted .music-icon, .music-panel.silent .music-icon { color: #9a8f9c; }
.music-panel.muted .music-icon .waves, .music-panel.silent .music-icon .waves { display: none; }
.music-panel.muted .music-icon .cross, .music-panel.silent .music-icon .cross { display: inline; }
@media (max-width: 650px) {
  .music-panel { right: 12px; bottom: 12px; padding: 10px 12px; gap: 0; }
  .music-volume { width: 72px; margin-left: 10px; padding-left: 10px; }
  .music-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .music-icon { display: none; }
  .eq { height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .music-panel, .music-panel.waiting { animation: none; }
  .music-panel.playing .eq i { animation: none; height: 70%; }
}