:root {
  --charred: #2A1A12;
  --clay: #A94F2B;
  --ochre: #D89A3D;
  --parchment: #F3E2BF;
  --sage: #7C8A5A;
  --green: #65D6A6;
  --rose: #E88AAE;
  --indigo: #1B2038;
  --rust: #6B321F;
  --display: "Caveat", cursive;
  --hand: "Patrick Hand", cursive;
  --body: "Nunito Sans", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment);
  background: linear-gradient(180deg, #1B2038 0%, #2A1A12 48%, #6B321F 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .22;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(243,226,191,.24) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 10%, rgba(216,154,61,.17) 0 1px, transparent 1.7px),
    radial-gradient(circle at 40% 70%, rgba(124,138,90,.15) 0 1px, transparent 1.4px);
  background-size: 37px 43px, 59px 47px, 29px 31px;
  mix-blend-mode: screen;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(42,26,18,.54) 100%);
}

.aurora-field {
  position: fixed;
  inset: -12vh -18vw;
  z-index: 0;
  pointer-events: none;
  filter: blur(22px) saturate(1.18);
  transform: translate3d(var(--glitch-x, 0px), 0, 0);
}

.aurora-field span {
  position: absolute;
  width: 80vw;
  height: 28vh;
  border-radius: 50%;
  opacity: .35;
  mix-blend-mode: screen;
  animation: auroraDrift 18s ease-in-out infinite alternate;
}

.aurora-field span:nth-child(1) {
  top: 10vh;
  left: 8vw;
  background: radial-gradient(ellipse, rgba(101,214,166,.75), rgba(101,214,166,0) 68%);
  transform: rotate(-14deg);
}

.aurora-field span:nth-child(2) {
  top: 28vh;
  right: -4vw;
  background: radial-gradient(ellipse, rgba(232,138,174,.65), rgba(232,138,174,0) 70%);
  animation-delay: -7s;
  transform: rotate(18deg);
}

.aurora-field span:nth-child(3) {
  bottom: 12vh;
  left: 18vw;
  background: radial-gradient(ellipse, rgba(216,154,61,.62), rgba(216,154,61,0) 66%);
  animation-delay: -3s;
  transform: rotate(7deg);
}

.trail-axis {
  position: fixed;
  top: 0;
  left: 50%;
  height: 100vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  transform: translateX(-50%);
  opacity: .44;
  pointer-events: none;
}

.trail-axis i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ochre);
  box-shadow: 0 0 14px rgba(216,154,61,.7);
}

.trail-axis .mark {
  width: auto;
  height: auto;
  color: var(--sage);
  background: transparent;
  font-family: var(--hand);
  font-style: normal;
  font-size: 1.2rem;
}

.waypoint {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 7rem clamp(1rem, 4vw, 4rem);
  isolation: isolate;
  overflow: hidden;
}

.waypoint::before {
  content: attr(data-chapter);
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--hand);
  color: rgba(243,226,191,.4);
  letter-spacing: .25em;
  font-size: 1.1rem;
}

.waypoint::after {
  content: "";
  position: absolute;
  inset: 9vh 8vw;
  border: 1px solid rgba(243,226,191,.08);
  border-radius: 48% 52% 45% 55%;
  box-shadow: inset 0 0 80px rgba(216,154,61,.05);
  z-index: -1;
}

.center-column {
  position: relative;
  z-index: 5;
  width: min(760px, 92vw);
  text-align: center;
  text-wrap: balance;
}

.slim { width: min(650px, 90vw); }
.wide { width: min(940px, 94vw); }
.compact { width: min(560px, 90vw); }

.label,
.marginalia,
.annotation {
  font-family: var(--hand);
  letter-spacing: .09em;
  text-transform: lowercase;
  color: var(--sage);
}

.label {
  margin: 0 0 .8rem;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

h1,
h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: .92;
  color: var(--parchment);
}

h1 {
  font-size: clamp(3.8rem, 11vw, 9rem);
  text-shadow: 3px 2px 0 rgba(101,214,166,.34), -3px -1px 0 rgba(232,138,174,.3), 0 0 48px rgba(216,154,61,.3);
}

h2 {
  font-size: clamp(2rem, 6vw, 4.8rem);
  text-shadow: 2px 2px 0 rgba(101,214,166,.22), -2px -1px 0 rgba(232,138,174,.2);
}

.glitch-title {
  position: relative;
  transition: text-shadow .25s ease, transform .25s ease;
}

.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.glitch-title::before { color: var(--green); transform: translate(7px, -2px); }
.glitch-title::after { color: var(--rose); transform: translate(-6px, 3px); }
.glitch-title:hover::before,
.glitch-title:hover::after { opacity: .55; }

.body-copy {
  width: min(560px, 88vw);
  margin: 1.3rem auto 0;
  color: rgba(243,226,191,.82);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.75;
}

.underline {
  width: min(340px, 62vw);
  height: 24px;
  margin: .6rem auto 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 23 C72 4 127 32 192 17 S314 7 392 21' fill='none' stroke='%23D89A3D' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 27 C105 18 158 26 236 16 S322 19 374 13' fill='none' stroke='%23A94F2B' stroke-width='3' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  filter: drop-shadow(0 0 8px rgba(216,154,61,.45));
}

.wide-line { width: min(650px, 82vw); }

.waypoint.in-view .underline,
.waypoint.active .underline { animation: drawLine 1.25s cubic-bezier(.2,.9,.2,1) forwards; }

.halo {
  position: absolute;
  width: min(62vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,79,43,.45), rgba(216,154,61,.14) 42%, transparent 70%);
  box-shadow: 0 0 120px rgba(216,154,61,.25), inset 0 0 80px rgba(243,226,191,.05);
  animation: breathe 7s ease-in-out infinite;
  z-index: 1;
}

.marginalia,
.annotation {
  position: absolute;
  z-index: 6;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  opacity: .75;
  transform: rotate(var(--rot, -5deg));
}

.marginalia.left { left: clamp(1rem, 7vw, 8rem); }
.marginalia.right { right: clamp(1rem, 7vw, 8rem); }
.marginalia.high { top: 19vh; --rot: -8deg; }
.marginalia.low { bottom: 17vh; --rot: 7deg; }
.annotation.north { top: 18vh; left: 14vw; --rot: -9deg; color: var(--ochre); }
.annotation.south { bottom: 16vh; right: 13vw; --rot: 6deg; color: var(--rose); }

.icon {
  position: absolute;
  width: clamp(48px, 7vw, 88px);
  overflow: visible;
  fill: none;
  stroke: var(--parchment);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(4px 1px 0 rgba(101,214,166,.23)) drop-shadow(-3px -1px 0 rgba(232,138,174,.2));
  opacity: .82;
  animation: talismanFloat 8s ease-in-out infinite alternate;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}

.icon:hover {
  opacity: 1;
  filter: drop-shadow(9px 0 0 rgba(101,214,166,.5)) drop-shadow(-8px 2px 0 rgba(232,138,174,.42)) drop-shadow(0 0 18px rgba(216,154,61,.35));
}

.i1 { left: 16vw; top: 22vh; stroke: var(--ochre); transform: rotate(-12deg); }
.i2 { right: 14vw; top: 24vh; stroke: var(--green); animation-delay: -2s; }
.i3 { right: 18vw; bottom: 17vh; stroke: var(--rose); animation-delay: -5s; }

.ghost-board .icon { opacity: .35; }
.ghost-board .icon::after { content: ""; }
.g1 { left: 13vw; top: 24vh; stroke: var(--sage); }
.g2 { right: 15vw; top: 20vh; stroke: var(--ochre); animation-delay: -1s; }
.g3 { left: 19vw; bottom: 18vh; stroke: var(--clay); animation-delay: -4s; }
.g4 { right: 20vw; bottom: 15vh; stroke: var(--green); animation-delay: -6s; }
.fades.in-view .ghost-board .icon { animation-name: ghostFade; animation-duration: 6s; }

.mark { background: radial-gradient(circle at center, rgba(216,154,61,.1), transparent 45%); }

.companions::before,
.signal::before {
  color: rgba(101,214,166,.34);
}

.constellation {
  position: absolute;
  inset: 9vh 8vw;
  z-index: 4;
}

.c1 { left: 4%; top: 10%; stroke: var(--parchment); }
.c2 { left: 16%; bottom: 13%; stroke: var(--ochre); animation-delay: -2s; }
.c3 { right: 12%; top: 9%; stroke: var(--green); animation-delay: -1s; }
.c4 { right: 4%; bottom: 24%; stroke: var(--clay); animation-delay: -4s; }
.c5 { left: 35%; top: 2%; stroke: var(--rose); animation-delay: -3s; }
.c6 { right: 32%; bottom: 3%; stroke: var(--sage); animation-delay: -6s; }
.c7 { left: 2%; bottom: 39%; stroke: var(--green); animation-delay: -5s; }
.c8 { right: 22%; top: 47%; stroke: var(--parchment); animation-delay: -7s; }

.seal {
  position: absolute;
  width: min(74vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 3;
  border: 2px solid rgba(216,154,61,.34);
  box-shadow: 0 0 55px rgba(101,214,166,.16), inset 0 0 90px rgba(232,138,174,.08);
  animation: sealPulse 9s ease-in-out infinite;
}

.seal::before,
.seal::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px dashed rgba(243,226,191,.34);
  border-radius: 48% 52% 51% 49%;
}

.seal::after {
  inset: 18%;
  border-color: rgba(101,214,166,.24);
  animation: spinSeal 40s linear infinite reverse;
}

.seal span {
  --angle: calc(var(--n) * 30deg);
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--hand);
  font-size: clamp(1.4rem, 4vw, 2.8rem);
  color: var(--parchment);
  transform: rotate(var(--angle)) translateY(-47vw) rotate(calc(-1 * var(--angle)));
  transform-origin: center;
  text-shadow: 2px 1px 0 var(--green), -2px -1px 0 var(--rose);
}

.seal span:nth-child(1) { --n: 0; }
.seal span:nth-child(2) { --n: 1; }
.seal span:nth-child(3) { --n: 2; }
.seal span:nth-child(4) { --n: 3; }
.seal span:nth-child(5) { --n: 4; }
.seal span:nth-child(6) { --n: 5; }
.seal span:nth-child(7) { --n: 6; }
.seal span:nth-child(8) { --n: 7; }
.seal span:nth-child(9) { --n: 8; }
.seal span:nth-child(10) { --n: 9; }
.seal span:nth-child(11) { --n: 10; }
.seal span:nth-child(12) { --n: 11; }

.signal .center-column {
  padding: 2rem;
  background: radial-gradient(circle, rgba(42,26,18,.56), rgba(42,26,18,.14) 70%, transparent);
  border-radius: 50%;
}

@keyframes auroraDrift {
  from { transform: translate3d(-4vw, -2vh, 0) rotate(-10deg) scale(1); }
  to { transform: translate3d(5vw, 4vh, 0) rotate(13deg) scale(1.12); }
}

@keyframes breathe {
  0%, 100% { transform: scale(.95); opacity: .72; }
  50% { transform: scale(1.04); opacity: .95; }
}

@keyframes drawLine { to { clip-path: inset(0 0 0 0); } }

@keyframes talismanFloat {
  from { translate: 0 0; rotate: -3deg; }
  to { translate: 0 18px; rotate: 5deg; }
}

@keyframes ghostFade {
  0%, 100% { opacity: .38; transform: translateX(0); }
  45% { opacity: .12; transform: translateX(18px); }
  55% { opacity: .18; transform: translateX(-14px); }
}

@keyframes sealPulse {
  0%, 100% { transform: scale(.96) rotate(-2deg); opacity: .76; }
  50% { transform: scale(1.04) rotate(2deg); opacity: 1; }
}

@keyframes spinSeal { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .marginalia,
  .annotation { display: none; }
  .waypoint { padding-inline: 1rem; }
  .icon { width: 46px; }
  .seal span { transform: rotate(var(--angle)) translateY(-38vw) rotate(calc(-1 * var(--angle))); }
  .constellation { inset: 4vh 1rem; }
}