:root {
  --kiln-black: #15120F;
  --bone-porcelain: #E7DDC8;
  --kintsugi-gold: #C89B3C;
  --oxide-clay: #9D4F36;
  --lichen-green: #6F7D58;
  --mist-blue: #AAB8BD;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Alegreya Sans', sans-serif;
  --mono: 'Space Mono', monospace;
  --hand: 'Nanum Pen Script', cursive;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #15120F;
}

body {
  margin: 0;
  color: #E7DDC8;
  font-family: var(--body);
  background:
    radial-gradient(circle at 18% 8%, rgba(170, 184, 189, .16), transparent 24rem),
    radial-gradient(circle at 84% 32%, rgba(111, 125, 88, .14), transparent 30rem),
    radial-gradient(circle at 24% 72%, rgba(157, 79, 54, .16), transparent 28rem),
    linear-gradient(180deg, #15120F 0%, #15120F 100%);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .25;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 13% 17%, rgba(231, 221, 200, .7) 0 1px, transparent 1.4px),
    radial-gradient(circle at 77% 31%, rgba(200, 155, 60, .42) 0 1px, transparent 1.2px),
    radial-gradient(circle at 48% 89%, rgba(170, 184, 189, .46) 0 1px, transparent 1.5px);
  background-size: 43px 47px, 61px 59px, 37px 41px;
}

.fog-wash {
  position: fixed;
  width: 72vmax;
  height: 40vmax;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  filter: blur(46px);
  opacity: .2;
  animation: fogDrift 25s ease-in-out infinite alternate;
}

.fog-a { left: -20vw; top: 5vh; background: #AAB8BD; }
.fog-b { right: -24vw; bottom: 5vh; background: #6F7D58; animation-duration: 33s; }
.fog-c { left: 12vw; bottom: -18vh; background: #9D4F36; animation-duration: 39s; opacity: .12; }

.trail-nav {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.trail-knot {
  position: relative;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(200, 155, 60, .5);
  border-radius: 48% 52% 43% 57% / 55% 41% 59% 45%;
  color: #C89B3C;
  display: grid;
  place-items: center;
  text-decoration: none;
  font: 11px/1 var(--mono);
  background: rgba(21, 18, 15, .68);
  box-shadow: 0 0 0 3px rgba(21, 18, 15, .35), inset 0 0 18px rgba(200, 155, 60, .1);
  transition: transform .45s ease, background .45s ease, color .45s ease, box-shadow .45s ease;
}

.trail-knot::after {
  content: attr(data-note);
  position: absolute;
  right: 46px;
  top: 50%;
  width: max-content;
  max-width: 190px;
  padding: 8px 10px;
  color: #E7DDC8;
  background: rgba(21, 18, 15, .78);
  border: 1px solid rgba(200, 155, 60, .28);
  opacity: 0;
  transform: translateY(-50%) rotate(-2deg) translateX(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.trail-knot:hover::after { opacity: 1; transform: translateY(-50%) rotate(-2deg); }

.trail-knot:hover,
.trail-knot.active {
  transform: rotate(18deg) scale(1.12);
  background: #C89B3C;
  color: #15120F;
  box-shadow: 0 0 22px rgba(200, 155, 60, .45);
}

.nav-whisper {
  position: absolute;
  right: 48px;
  top: 50%;
  width: 155px;
  padding: 10px 12px;
  color: #E7DDC8;
  background: rgba(21, 18, 15, .72);
  border: 1px solid rgba(200, 155, 60, .32);
  font: 12px var(--mono);
  opacity: 0;
  transform: translateY(-50%) rotate(-3deg);
  transition: opacity .35s ease;
}

.trail-nav:hover .nav-whisper { opacity: 1; }

.route-map {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 640vh;
  z-index: 4;
  pointer-events: none;
}

.route-shadow,
.golden-seam {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-shadow {
  stroke: rgba(21, 18, 15, .95);
  stroke-width: 18;
  filter: blur(5px);
}

.golden-seam {
  stroke: #C89B3C;
  stroke-width: 6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 9px rgba(200, 155, 60, .62));
}

.continuous-path { position: relative; z-index: 5; }

.scene {
  min-height: 108vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 9vh 9vw;
  isolation: isolate;
}

.scene:nth-child(even) { justify-content: flex-end; }

.scene::before {
  content: attr(data-scene);
  position: absolute;
  left: 5vw;
  top: 8vh;
  color: rgba(170, 184, 189, .22);
  font: 800 12vw/.78 var(--display);
  letter-spacing: -.06em;
  z-index: -1;
  white-space: nowrap;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 15vh 7vw;
  z-index: -2;
  background: radial-gradient(ellipse at center, rgba(231, 221, 200, .05), transparent 58%);
  transform: rotate(var(--scene-turn, -1deg));
}

.scene-two { --scene-turn: 2deg; }
.scene-three { --scene-turn: -2deg; }
.scene-four { --scene-turn: 1deg; }

.scene-drift,
.coordinate,
.coordinates {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
}

.scene-drift {
  position: absolute;
  top: 34px;
  left: 9vw;
  color: rgba(231, 221, 200, .5);
}

.ceramic-shard {
  position: relative;
  width: min(700px, 82vw);
  min-height: 440px;
  padding: clamp(34px, 5vw, 68px);
  color: #15120F;
  background:
    radial-gradient(circle at 25% 18%, rgba(231, 221, 200, .88), transparent 11rem),
    radial-gradient(circle at 80% 90%, rgba(157, 79, 54, .12), transparent 16rem),
    linear-gradient(135deg, rgba(231, 221, 200, .96), #E7DDC8 54%, rgba(170, 184, 189, .34));
  border: 1px solid rgba(231, 221, 200, .72);
  border-radius: 34% 66% 58% 42% / 44% 31% 69% 56%;
  box-shadow: 0 34px 82px rgba(0,0,0,.5), inset 0 0 46px rgba(21, 18, 15, .1);
  transform: rotate(var(--tilt, -2deg));
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
  overflow: hidden;
}

.ceramic-shard::before,
.ceramic-shard::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ceramic-shard::before {
  inset: 16px;
  border: 1px solid rgba(21, 18, 15, .1);
  border-radius: inherit;
}

.ceramic-shard::after {
  left: 16%;
  top: -8%;
  width: 4px;
  height: 124%;
  background: linear-gradient(180deg, transparent, rgba(200, 155, 60, .88), transparent);
  transform: rotate(23deg);
  box-shadow: 55px 200px 0 -1px rgba(200, 155, 60, .55), 155px 64px 0 -2px rgba(21,18,15,.22), 230px 330px 0 -1px rgba(200,155,60,.42);
}

.ceramic-shard.awake,
.ceramic-shard:hover {
  transform: rotate(calc(var(--tilt, -2deg) * -1)) translateY(-8px);
  filter: saturate(1.08);
}

.hero-shard { --tilt: -2deg; margin-left: 4vw; }
.valley-shard { --tilt: 2deg; }
.memory-shard { --tilt: -1.5deg; margin-left: 6vw; }
.bridge-shard { --tilt: 2.5deg; }
.horizon-shard { --tilt: -2deg; margin: auto; }

h1, h2 {
  margin: 14px 0 18px;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.055em;
  color: #15120F;
}

h1 { font-size: clamp(58px, 10vw, 138px); line-height: .82; }
h2 { font-size: clamp(44px, 7vw, 94px); line-height: .9; }

.dot {
  color: #C89B3C;
  text-shadow: 0 0 16px rgba(200, 155, 60, .85);
}

p {
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.34;
}

.inscription { max-width: 530px; }

.field-note {
  color: #15120F;
  background: rgba(231, 221, 200, .92);
  border: 1px solid rgba(157, 79, 54, .28);
  box-shadow: 0 16px 36px rgba(0,0,0,.3);
  padding: 18px 22px;
  font: 22px/1.1 var(--hand);
}

.note-awake {
  position: absolute;
  right: -42px;
  bottom: 46px;
  width: 250px;
  transform: rotate(5deg);
}

.tilted-note {
  position: absolute;
  left: 13vw;
  bottom: 16vh;
  width: 288px;
  transform: rotate(-6deg);
}

.seal-note {
  position: absolute;
  right: 10vw;
  top: 18vh;
  width: 260px;
  transform: rotate(4deg);
}

.contour-ink {
  position: absolute;
  inset: 0;
  opacity: .3;
  background: repeating-radial-gradient(ellipse at 68% 42%, transparent 0 18px, rgba(21, 18, 15, .32) 19px 20px, transparent 21px 43px);
  mix-blend-mode: multiply;
}

.rings-b { background-position: 80px -30px; }
.rings-c { background-position: -110px 40px; opacity: .22; }

.crack-origin {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 2px;
  height: 270px;
  background: #C89B3C;
  transform: rotate(61deg) scaleY(0);
  transform-origin: top;
  box-shadow: 0 0 12px #C89B3C;
  animation: firstCrack 2.6s .6s ease forwards;
}

.compass-rose {
  position: absolute;
  right: 10%;
  top: 12%;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(21, 18, 15, .22);
  border-radius: 50%;
  opacity: .44;
}

.compass-rose::before,
.compass-rose::after,
.compass-rose span {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 76px;
  background: #15120F;
  transform-origin: center;
}

.compass-rose::before { transform: translate(-50%, -50%); }
.compass-rose::after { transform: translate(-50%, -50%) rotate(90deg); height: 54px; }
.compass-rose span { transform: translate(-50%, -50%) rotate(45deg); height: 62px; background: #C89B3C; }

.wax-seal,
.final-seal {
  border: 0;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(231, 221, 200, .2), #9D4F36 60%, #15120F 120%);
  color: #E7DDC8;
  box-shadow: 0 18px 35px rgba(0,0,0,.4), inset 0 0 0 5px rgba(21,18,15,.14);
  font: 17px/1 var(--hand);
  cursor: pointer;
  transform: rotate(-12deg);
  transition: transform .45s ease, box-shadow .45s ease;
}

.wax-seal {
  position: absolute;
  right: 18vw;
  bottom: 17vh;
}

.memory-seal { right: 14vw; top: 17vh; bottom: auto; }
.wax-seal:hover { transform: rotate(16deg) scale(1.06); box-shadow: 0 18px 44px rgba(200, 155, 60, .28); }

.stitched-edge {
  position: absolute;
  inset: 20px;
  border: 2px dashed rgba(111, 125, 88, .5);
  border-radius: inherit;
}

.folded-corner {
  position: absolute;
  right: 0;
  top: 0;
  border-style: solid;
  border-width: 0 96px 96px 0;
  border-color: transparent rgba(200, 155, 60, .26) transparent transparent;
}

.marginalia {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.marginalia li { margin: 9px 0; color: #9D4F36; }

.hidden-coordinate {
  position: absolute;
  left: 19vw;
  bottom: 20vh;
  color: #C89B3C;
  font: 14px var(--mono);
  opacity: 0;
  transform: translateY(18px) rotate(-2deg);
  transition: opacity .6s ease, transform .6s ease;
  letter-spacing: .12em;
}

.hidden-coordinate.visible { opacity: 1; transform: rotate(-2deg); }

.bridge-lines,
.horizon-arcs {
  position: absolute;
  inset: 0;
  opacity: .34;
  background:
    linear-gradient(165deg, transparent 44%, rgba(200, 155, 60, .82) 44.5% 45.2%, transparent 45.7%),
    linear-gradient(12deg, transparent 54%, rgba(111, 125, 88, .45) 54.4% 55%, transparent 55.4%);
}

.horizon-arcs {
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 34px, rgba(170, 184, 189, .62) 35px 38px, transparent 39px 62px);
}

.knot-diagram {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.knot-diagram i {
  width: 34px;
  height: 18px;
  border: 2px solid #6F7D58;
  border-radius: 50%;
  transform: rotate(var(--knot-turn, -10deg));
}

.knot-diagram i:nth-child(2) { --knot-turn: 14deg; border-color: #C89B3C; }
.knot-diagram i:nth-child(3) { --knot-turn: -18deg; border-color: #9D4F36; }
.knot-diagram i:nth-child(4) { --knot-turn: 8deg; }

.relic-row {
  display: flex;
  gap: 24px;
  margin-top: 34px;
  color: #C89B3C;
  font: 32px var(--display);
}

.hand-note {
  color: #9D4F36;
  font-family: var(--hand);
  transform: rotate(-3deg);
  font-size: 34px;
}

.return-mark,
.return-cluster,
.cairn,
.final-seal {
  position: absolute;
  color: #C89B3C;
}

.mark-one { left: 17vw; bottom: 12vh; font-size: 70px; opacity: .42; }
.return-cluster { left: 11vw; top: 25vh; display: flex; gap: 22px; font-size: 38px; opacity: .56; }
.return-cluster i { font-style: normal; animation: tremor 4s ease-in-out infinite; }
.return-cluster i:nth-child(2) { animation-delay: .5s; }
.return-cluster i:nth-child(3) { animation-delay: 1s; }

.cairn-a { right: 14vw; bottom: 17vh; width: 110px; height: 100px; }
.cairn span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  background: #6F7D58;
  border-radius: 50% 43% 57% 45%;
  box-shadow: 0 12px 25px rgba(0,0,0,.32);
}
.cairn span:nth-child(1) { bottom: 0; width: 100px; height: 42px; }
.cairn span:nth-child(2) { bottom: 33px; width: 74px; height: 34px; background: #9D4F36; }
.cairn span:nth-child(3) { bottom: 62px; width: 43px; height: 29px; background: #C89B3C; }

.final-seal {
  right: 19vw;
  bottom: 14vh;
  display: grid;
  place-items: center;
}

.scene.visible .ceramic-shard { animation: shardFloat 7s ease-in-out infinite alternate; }
.scene.visible .relic-row span { animation: markerGlow 2.8s ease-in-out infinite alternate; }
.scene.visible .relic-row span:nth-child(2) { animation-delay: .4s; }
.scene.visible .relic-row span:nth-child(3) { animation-delay: .8s; }

@keyframes firstCrack { to { transform: rotate(61deg) scaleY(1); } }
@keyframes fogDrift { to { transform: translate(12vw, -8vh) rotate(9deg); } }
@keyframes shardFloat { to { translate: 0 -12px; } }
@keyframes tremor { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-5px); } }
@keyframes markerGlow { to { text-shadow: 0 0 22px rgba(200, 155, 60, .85); transform: translateY(-4px); } }

@media (max-width: 780px) {
  .scene { min-height: 104vh; padding: 10vh 7vw; align-items: center; }
  .scene::before { font-size: 18vw; white-space: normal; }
  .trail-nav { right: 8px; gap: 9px; }
  .trail-knot { width: 28px; height: 28px; }
  .trail-knot::after, .nav-whisper { display: none; }
  .note-awake, .tilted-note, .seal-note { position: relative; right: auto; left: auto; bottom: auto; top: auto; margin-top: 22px; width: auto; }
  .wax-seal { right: 10vw; bottom: 7vh; width: 78px; height: 78px; }
  .ceramic-shard { min-height: 0; padding: 34px 28px; }
  .route-map { height: 610vh; }
}