@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  color-scheme: dark;
  --black: #030305;
  --text: #ded9e5;
  --ghost: #bba2da;
  --dim: #a89ab6;
  --poem: 'Spectral', Georgia, serif;
  --title: 'Pirata One', Georgia, serif;
  background: var(--black);
  color: var(--text);
  font-family: var(--poem);
  font-synthesis: none;
}
* { box-sizing: border-box }
h1,h2 { overflow-wrap: anywhere }
html { scroll-behavior: auto }
body { margin: 0; background: var(--black); overflow-x: clip }
::selection { background: #6d4c94; color: #fff }
main { position: relative; z-index: 2 }
article { overflow: clip }
.world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--black); isolation: isolate }
.apparition {
  position: absolute; right: -4vw; top: -13vh; width: 66vw; height: 130vh;
  opacity: .72;
  transform: translate3d(0,var(--relic-y,0px),0) scale(var(--relic-scale,1));
  will-change: transform,opacity;
  mask-image: linear-gradient(90deg,transparent,black 12%,black 85%,transparent);
}
.apparition img { width: 100%; height: 100%; object-fit: contain; filter: saturate(.9); display: block }
.afterimage {
  position: absolute; inset: -12vh -6vw; opacity: 0;
  transform: translate3d(0,var(--shore-y,0px),0) scale(1.08);
  will-change: transform,opacity;
  mask-image: linear-gradient(0deg,transparent,black 18%,black 86%,transparent);
}
.afterimage img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; display: block }
.world-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,#030305c9 0%,#03030591 30%,#0303051a 62%,#03030517),
              linear-gradient(0deg,#030305 0%,transparent 28%,transparent 80%,#03030540);
}
.signal-bloom {
  position: absolute; width: 65vw; height: 65vw; right: -8vw; top: 5%;
  background: radial-gradient(ellipse,#7952b514,transparent 65%);
  transform: translate3d(0,var(--bloom-y,0px),0);
}
.film-grain {
  position: fixed; z-index: 5; inset: 0; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.film-grain::after { content: ''; position: absolute; inset: 0; opacity: .25; background: repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#110b20 4px) }

.opening { min-height: 96svh; max-width: 1600px; margin: 0 auto; padding: 11vh 9vw 4.5rem; position: relative }
.opening h1 {
  font: 400 clamp(4.2rem,8vw,8.7rem)/1.03 var(--title);
  letter-spacing: 0; margin: 0 0 2rem; max-width: 960px;
  color: #e9e1f0; text-shadow: 0 2px 32px #000b;
  font-optical-sizing: auto;
}
.opening h1 span { display: block }
.opening h1 .title-prelude { font: 400 .23em/1.5 var(--poem); letter-spacing: .015em; margin-bottom: .7em; color: #c9becf }
.opening h1 span:last-child { font-style: normal; margin-left: .35em }
.subtitle { font: 400 italic 1.05rem/1.6 var(--poem); color: var(--dim); margin: 0 0 0 .2rem }
.opening .verse { margin: 5rem 0 0; max-width: 480px }
.verse { max-width: 580px; text-shadow: 0 1px 14px #000,0 1px 32px #0008 }
.story-p { font-size: clamp(1.2rem,1.58vw,1.5rem); line-height: 1.82; font-weight: 400; margin: 0 0 2.7rem; overflow-wrap: break-word }
.story-p:last-child { margin-bottom: 0 }
.invitation { font-size: clamp(1.35rem,1.8vw,1.8rem); line-height: 1.7; color: #e3dbe9 }
.dialogue { color: #bcabd3; font-style: italic; padding-left: 1.2rem; border-left: 1px solid #b89bce50; margin: 3.3rem 0 }
.movement { position: relative; max-width: 1600px; margin: 0 auto; padding: 6rem 9vw 8rem; --focus: .6 }
.chapter-heading { position: relative; margin: 0 0 4rem; padding: 0 0 1.4rem }
.chapter-number { display: block; font: 400 1.1rem/1 var(--title); color: #b59aca; margin-bottom: .8rem }
.chapter-heading h2 {
  font: 400 clamp(2.6rem,5.2vw,5.4rem)/1.12 var(--title);
  letter-spacing: 0; margin: 0; color: #ded0ee;
  text-shadow: 0 0 calc(16px + 24px * var(--focus)) #a177cc25;
}
.chapter-stroke {
  display: block; width: 90px; height: 1px; margin-top: 1.9rem;
  background: linear-gradient(90deg,#dfc3ff,#8d69b599,transparent);
  box-shadow: 0 0 12px #c498ef65; transform-origin: left;
}
.has-motion .chapter-stroke { transform: scaleX(.2); opacity: .5; transition: transform 1.6s cubic-bezier(.2,.7,.2,1),opacity 1.6s }
.has-motion .is-entered .chapter-stroke { transform: scaleX(1); opacity: 1 }
.highlight { color: #ebd9ff; font-weight: 500; background: linear-gradient(#9b70c323,#9b70c323) 0 90% / calc(var(--ink,1) * 100%) 28% no-repeat; text-shadow: 0 0 20px #9b70c340 }
.litany { display: block; font: 400 clamp(1.7rem,2.6vw,2.5rem)/1.45 var(--title); color: #cebcdf; margin: 0 0 1.1rem; letter-spacing: 0 }
.slogan {
  display: block; position: relative; font: 400 clamp(2.6rem,4.6vw,4.7rem)/1.14 var(--title);
  letter-spacing: 0; color: #f0e7f8; padding: 1.6rem 0 2rem; margin-top: 1rem;
}
.slogan::after { content: ''; display: block; margin-top: 1.5rem; height: 1px; width: 100%; background: linear-gradient(90deg,#cbaff6,transparent); transform: scaleX(var(--ink,1)); transform-origin: left; box-shadow: 0 0 20px #b58fe855 }
.resonance { font: 400 clamp(2.2rem,3.3vw,3.4rem)/1.28 var(--title); letter-spacing: 0; margin: 4.2rem 0; color: #e9dfef; max-width: 620px }
.cold-light { color: #e6dcff; text-shadow: 0 0 calc(12px + 15px * var(--focus)) #ad90ed55 }
.incantation { display: block; font: 400 clamp(2.7rem,4.2vw,4.2rem)/1.2 var(--title); letter-spacing: 0; color: #cdb4e7; margin-top: 1.5rem; text-shadow: 0 0 32px #ad82d038 }
.afterthought { font-style: italic; color: #c5b2d7 }
.memory-trace { text-shadow: 1px 0 #9a76c859,-1px 0 #6378b642 }
.movement-misteria { padding-top: 2rem; padding-bottom: 6rem }
.movement-kreska { padding-top: 7rem }
.movement-kreska .verse { margin-left: 9vw; max-width: 660px }
.movement-kreska .story-p { max-width: 580px }
.movement-kreska .resonance { font-size: clamp(2.6rem,4.2vw,4.5rem); font-style: normal; margin-top: 4rem; max-width: 620px }
.movement-towarnakulum { padding-top: 9rem; padding-bottom: 9rem }
.movement-towarnakulum .resonance { margin: 5rem 0; padding-left: 1.1rem; border-left: 1px solid #a58abd65 }
.movement-powolanie .verse { margin-left: auto; margin-right: 5vw }
.movement-powolanie { padding-top: 8rem; padding-bottom: 8rem }
.movement-walhalla { padding-top: 8rem; padding-bottom: 8rem }
.movement-walhalla .verse { margin-left: 8vw }
.movement-walhalla .resonance { font-style: normal; max-width: 460px }
.movement-apokryf { padding-top: 7rem; padding-bottom: 16vh; background: linear-gradient(0deg,#030305 0%,#030305d9 40%,transparent) }
.movement-apokryf .verse { margin: 0 auto; max-width: 600px }
.movement-apokryf .resonance { font-size: clamp(1.7rem,2.4vw,2.5rem); margin-top: 0; margin-bottom: 4rem; color: #b9a8ca; font-style: normal }
.coda { font-size: clamp(2.25rem,3.5vw,3.6rem); margin: 2.5rem 0; color: #e2d6ed }
.amen { font: 400 clamp(6rem,14vw,12rem)/1.2 var(--title); letter-spacing: 0; color: #c7b0df; margin: 14vh 0 3rem; text-align: center; text-shadow: 0 0 80px #a276d84d }
.last-line { font: 400 italic clamp(1.25rem,1.7vw,1.5rem)/1.8 var(--poem); text-align: center; color: #c7bfd2; max-width: 430px; margin: 0 auto }

@media(min-width:1800px) {
  .opening,.movement { padding-left: 140px; padding-right: 140px }
  .apparition { right: 3vw; width: 64vw }
  .movement-kreska .verse { margin-left: 160px }
}
@media(max-width:900px) {
  .opening { padding-left: 8vw; padding-right: 8vw; padding-top: 10vh }
  .opening h1 { font-size: clamp(3.5rem,9.6vw,7rem) }
  .movement { padding-left: 8vw; padding-right: 8vw }
  .movement-kreska .verse,.movement-walhalla .verse { margin-left: 4vw }
  .movement-powolanie .verse { margin-right: 0 }
  .apparition { width: 85vw; right: -22vw; opacity: .53 }
  .world-shade { background: linear-gradient(90deg,#030305ad 0%,#03030580 50%,#03030550),linear-gradient(0deg,#030305 0%,transparent 26%,transparent 82%,#03030544) }
}
@media(max-width:600px) {
  .opening { padding: 10vh 8vw 4rem; min-height: 88svh }
  .opening h1 { font-size: clamp(2.7rem,12.2vw,5rem); line-height: 1.08; letter-spacing: 0; margin-bottom: 1.5rem }
  .opening h1 .title-prelude { font-size: .35em; margin-bottom: .7em }
  .opening h1 span:last-child { margin-left: .15em }
  .subtitle { font-size: 1rem; line-height: 1.65; max-width: 250px }
  .opening .verse { margin-top: 4.5rem; max-width: 100% }
  .story-p { font-size: 1.1875rem; line-height: 1.82; margin-bottom: 2.4rem }
  .invitation { font-size: 1.3rem; line-height: 1.75 }
  .movement { padding: 3.5rem 8vw 5.5rem }
  .movement-misteria { padding-top: 1rem }
  .movement-kreska .verse,.movement-walhalla .verse,.movement-powolanie .verse { margin-left: 0; margin-right: 0 }
  .chapter-heading { margin-bottom: 3.3rem; padding-bottom: .5rem }
  .chapter-heading h2 { font-size: clamp(1.8rem,8.5vw,3.25rem) }
  .chapter-stroke { margin-top: 1.3rem; width: 65px }
  .dialogue { padding-left: .8rem; margin-top: 2.7rem; margin-bottom: 2.7rem }
  .litany { font-size: 1.8rem }
  .slogan { font-size: clamp(2rem,10vw,3rem); line-height: 1.18; padding: 1.2rem 0 }
  .resonance { font-size: 2rem; line-height: 1.3; margin: 3.5rem 0 }
  .movement-kreska .resonance { font-size: 2.25rem; margin-top: 3rem }
  .movement-towarnakulum { padding-top: 5rem }
  .movement-towarnakulum .resonance { margin: 4rem 0; padding-left: .8rem }
  .incantation { font-size: clamp(2.1rem,9.6vw,3.25rem); line-height: 1.25 }
  .movement-powolanie,.movement-walhalla { padding-top: 4.5rem }
  .movement-apokryf { padding-top: 4rem; padding-bottom: 13vh }
  .movement-apokryf .resonance { font-size: 1.8rem }
  .coda { font-size: 2rem }
  .amen { font-size: 5.8rem; margin-top: 12vh; margin-bottom: 2.5rem }
  .last-line { font-size: 1.25rem; line-height: 1.9 }
  .apparition { width: 145vw; height: 112vh; right: -49vw; top: -3vh; opacity: .5; mask-image: linear-gradient(90deg,transparent,black 20%,black 85%,transparent) }
  .afterimage { inset: -6vh -45vw; width: 190vw }
  .afterimage img { object-position: 65% center }
  .world-shade { background: linear-gradient(90deg,#030305c9,#03030585 72%,#03030560),linear-gradient(0deg,#030305 0%,transparent 38%,#03030522) }
  .signal-bloom { width: 120vw; height: 120vw }
}
@media(prefers-reduced-motion:reduce) {
  .apparition,.afterimage,.signal-bloom { transform: none!important; will-change: auto }
  .afterimage { display: none }
  .apparition { opacity: .35!important }
  .chapter-stroke { transform: none!important; opacity: 1!important; transition: none!important }
  .highlight { background-size: 100% 28% }
  .slogan::after { transform: none }
}
@media print {
  body { color: #111; background: white }
  .world,.film-grain,.chapter-stroke { display: none }
  .opening,.movement { min-height: 0; max-width: none; padding: 1rem 0!important; background: none }
  .verse,.opening .verse { max-width: none!important; margin: 1rem 0!important; text-shadow: none }
  .opening h1 { font-size: 3rem; color: #111; text-shadow: none }
  .opening h1 span,.chapter-heading h2,.chapter-number,.subtitle,.story-p,.story-p span { color: #111; text-shadow: none; background: none }
  .chapter-heading { break-after: avoid; margin-bottom: 1rem }
  .chapter-heading h2 { font-size: 2rem }
  .story-p { font-size: 11pt; line-height: 1.65 }
  .resonance,.movement-kreska .resonance,.slogan,.incantation { font-size: 17pt; margin: 2rem 0 }
  .amen { font-size: 4rem; margin: 2rem 0; text-shadow: none }
  .last-line { max-width: none }
}