:root {
  /* Interface sans: **Noto Sans JP** for small stamps; JPP* */
  --fog-ink: #26313D;
  --horizon-blue: #BFD8EE;
  --sea-glass: #A7E2D8;
  --blush: #F7B6A6;
  --pearl: #FFF4E3;
  --lavender: #D8D0F2;
  --brass: #B98B45;
  --display: "Libre Baskerville", Baskerville, Georgia, serif;
  --body: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: "Noto Sans JP", Inter, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fog-ink);
  background: var(--horizon-blue);
  font-family: var(--body);
  overflow-x: hidden;
}

.dawn-field {
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    radial-gradient(circle at 78% 12%, rgba(216, 208, 242, .62), transparent 30vw),
    radial-gradient(circle at 14% 74%, rgba(167, 226, 216, .46), transparent 34vw),
    linear-gradient(180deg, #BFD8EE 0%, #FFF4E3 42%, #F7B6A6 100%);
  filter: saturate(.9);
  transition: filter .6s ease;
}

.dawn-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(38, 49, 61, .025) 0 1px, transparent 1px 72px),
    radial-gradient(circle at 50% 50%, rgba(255, 244, 227, .38), transparent 55%);
  opacity: .9;
}

.monster-shadow {
  position: fixed;
  left: 17%;
  top: 46%;
  width: min(68vw, 980px);
  height: 22vw;
  border-radius: 52% 48% 42% 58%;
  background:
    radial-gradient(ellipse at 72% 48%, rgba(255, 244, 227, .55) 0 2%, transparent 3%),
    radial-gradient(ellipse at 69% 47%, rgba(255, 244, 227, .55) 0 2%, transparent 3%),
    linear-gradient(90deg, rgba(38, 49, 61, 0), rgba(38, 49, 61, .13), rgba(38, 49, 61, 0));
  filter: blur(12px);
  opacity: 0;
  transform: translate3d(-14vw, 8vh, 0) rotate(-3deg);
  pointer-events: none;
  z-index: -2;
}

.story {
  position: relative;
}

.act {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 8vh clamp(1.5rem, 6vw, 7rem);
}

.hero {
  place-items: center;
  text-align: center;
  min-height: 112vh;
}

.eyebrow,
.stamp,
.postmark,
.hero-note,
.tide-reading,
.tick,
.domain-stamp {
  font-family: var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow {
  font-size: .72rem;
  color: var(--brass);
  margin: 0 0 1.2rem;
}

h1,
h2,
.chapter,
.final-title {
  font-family: var(--display);
  font-weight: 400;
}

h1 {
  margin: 0;
  font-size: clamp(3.1rem, 8vw, 8.8rem);
  letter-spacing: .025em;
  line-height: 1.04;
  text-shadow: 0 16px 42px rgba(38, 49, 61, .1);
}

.intro {
  max-width: 620px;
  margin: 2rem auto 0;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.35;
  color: rgba(38, 49, 61, .76);
}

.hero-note {
  margin-top: 2.8rem;
  padding: .8rem 1.2rem;
  border: 1px solid rgba(185, 139, 69, .38);
  border-radius: 999px;
  background: rgba(255, 244, 227, .36);
  color: rgba(38, 49, 61, .62);
  font-size: .68rem;
}

.tide-spine {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 42vw;
  width: 82px;
  z-index: 4;
  pointer-events: none;
}

.spine-line,
.spine-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  width: 1px;
}

.spine-line {
  background: linear-gradient(180deg, rgba(38, 49, 61, .26), rgba(185, 139, 69, .7), rgba(255, 244, 227, .18));
  box-shadow: 0 0 18px rgba(255, 244, 227, .72);
}

.spine-glow {
  height: 0;
  bottom: auto;
  background: linear-gradient(180deg, var(--pearl), var(--sea-glass), var(--brass));
  box-shadow: 0 0 22px rgba(167, 226, 216, .95);
}

.tide-dot {
  position: absolute;
  left: 33px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--brass);
  border: 3px solid var(--pearl);
  box-shadow: 0 0 0 1px rgba(185, 139, 69, .35), 0 0 22px rgba(255, 244, 227, .76);
  transition: transform .5s ease, box-shadow .5s ease;
}

.tide-dot.lit {
  transform: scale(1.55);
  box-shadow: 0 0 0 8px rgba(167, 226, 216, .28), 0 0 28px rgba(185, 139, 69, .8);
}

.dot-one { top: 18vh; }
.dot-two { top: 36vh; }
.dot-three { top: 54vh; }
.dot-four { top: 72vh; }
.dot-five { top: 90vh; }

.tick {
  position: absolute;
  left: 52px;
  color: rgba(38, 49, 61, .48);
  font-size: .62rem;
  writing-mode: vertical-rl;
}

.tick-one { top: 24vh; }
.tick-two { top: 49vh; }
.tick-three { top: 78vh; }

.moon {
  position: absolute;
  left: 26px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(185, 139, 69, .42);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 45%, rgba(255, 244, 227, .78) 46%);
}

.moon-one { top: 10vh; }
.moon-two { top: 62vh; transform: rotate(180deg); }
.moon-three { top: 84vh; background: rgba(255, 244, 227, .5); }

.tide-reading {
  position: fixed;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 8;
  padding: .75rem .95rem;
  border: 1px solid rgba(185, 139, 69, .34);
  border-radius: 999px;
  background: rgba(255, 244, 227, .62);
  backdrop-filter: blur(10px);
  font-size: .66rem;
  color: rgba(38, 49, 61, .68);
}

.design-key {
  display: none;
}

.observation {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px) minmax(0, 1fr);
  gap: 3vw;
}

.observation.left .artifact { grid-column: 1 / 2; justify-self: end; }
.observation.right .artifact { grid-column: 3 / 4; justify-self: start; }
.observation.left .chapter { grid-column: 3 / 4; }
.observation.right .chapter { grid-column: 1 / 2; justify-self: end; text-align: right; }

.chapter {
  max-width: 390px;
  color: rgba(38, 49, 61, .4);
  font-size: clamp(2.1rem, 5vw, 6.8rem);
  line-height: .95;
  opacity: .45;
  transform: translateY(28px);
  transition: opacity 1s ease, color 1s ease, transform 1s ease;
}

.chapter span {
  display: block;
  color: inherit;
  font-style: italic;
}

.act.in-view .chapter {
  opacity: 1;
  color: var(--fog-ink);
  transform: translateY(0);
}

.flip-card {
  width: min(78vw, 390px);
  height: 520px;
  perspective: 1200px;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.25s cubic-bezier(.2, .72, .18, 1);
}

.flip-card:hover .card-inner,
.flip-card.flipped .card-inner {
  transform: rotateY(180deg) rotateZ(.8deg);
}

.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  border: 1px solid rgba(185, 139, 69, .5);
  border-radius: 4px 18px 18px 4px;
  background: var(--pearl);
  color: var(--fog-ink);
  backface-visibility: hidden;
  box-shadow: 0 24px 60px rgba(38, 49, 61, .14);
  overflow: hidden;
}

.card-face::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(185, 139, 69, .34);
  pointer-events: none;
}

.card-face::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 226, 216, .64), rgba(191, 216, 238, .18) 45%, transparent 68%);
}

.card-front h2 {
  margin: auto 0;
  font-size: clamp(2rem, 3.2vw, 3.3rem);
  line-height: 1.05;
}

.card-front p {
  margin: 0;
  font-family: var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  font-size: .75rem;
}

.stamp {
  align-self: flex-start;
  padding: .55rem .72rem;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: var(--brass);
  font-size: .7rem;
  transform: rotate(-7deg);
  transition: transform .45s ease, background .45s ease;
}

.flip-card:hover .stamp,
.flip-card.flipped .stamp {
  transform: rotate(-2deg) scale(1.08);
  background: rgba(247, 182, 166, .18);
}

.card-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(135deg, rgba(255, 244, 227, .92), rgba(216, 208, 242, .34)),
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(185, 139, 69, .06) 22px 23px);
}

.card-back p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.28;
}

.postmark {
  width: max-content;
  padding: .8rem 1rem;
  border: 2px solid rgba(185, 139, 69, .62);
  border-radius: 50%;
  color: var(--brass);
  font-size: .7rem;
  transform: rotate(8deg);
}

.ferry-ticket { background: linear-gradient(160deg, #FFF4E3, rgba(191, 216, 238, .42)); }
.porthole { background: radial-gradient(circle at 72% 24%, rgba(167, 226, 216, .58), transparent 22%), #FFF4E3; }
.tide-marker { background: linear-gradient(145deg, #FFF4E3, rgba(216, 208, 242, .5)); }
.postcard { background: linear-gradient(155deg, #FFF4E3, rgba(247, 182, 166, .42)); }

.bubble {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 244, 227, .85);
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 244, 227, .9) 0 8%, transparent 9%),
    radial-gradient(circle at 62% 68%, rgba(216, 208, 242, .3), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(167, 226, 216, .24), rgba(191, 216, 238, .18) 55%, rgba(255, 244, 227, .08));
  box-shadow: inset 8px 8px 30px rgba(255, 244, 227, .34), 0 18px 45px rgba(38, 49, 61, .08);
  backdrop-filter: blur(2px);
}

.memory-bubble {
  width: clamp(180px, 24vw, 330px);
  height: clamp(180px, 24vw, 330px);
  top: 20vh;
  left: 53vw;
  z-index: -1;
  animation: rise 9s ease-in-out infinite alternate;
}

.node-bubble {
  width: 118px;
  height: 118px;
  left: calc(42vw - 18px);
}

.node-one { top: 18vh; }
.node-two { top: 64vh; }
.node-three { top: 30vh; }
.node-four { top: 56vh; }

.bubble-silhouette {
  position: absolute;
  inset: 28%;
  opacity: .42;
  filter: blur(.2px);
}

.gull::before,
.lantern::before,
.ridge::before,
.rope::before,
.eyes::before,
.wave::before,
.stamp-ring::before {
  content: "";
  position: absolute;
  inset: 0;
}

.gull::before {
  border-top: 3px solid var(--fog-ink);
  border-radius: 50%;
  transform: rotate(14deg) skewX(-24deg);
}

.lantern::before {
  border: 2px solid var(--fog-ink);
  border-radius: 45% 45% 28% 28%;
  box-shadow: inset 0 -16px 0 rgba(185, 139, 69, .35);
}

.ridge::before {
  border-top: 12px solid rgba(38, 49, 61, .46);
  border-radius: 50% 50% 0 0;
}

.tiny-illustration {
  position: relative;
  width: 98px;
  height: 64px;
  display: block;
  opacity: .72;
}

.rope::before {
  border: 3px solid var(--brass);
  border-left-color: transparent;
  border-radius: 50%;
}

.eyes::before {
  width: 62px;
  height: 22px;
  background: radial-gradient(circle at 25% 50%, var(--pearl) 0 10%, var(--fog-ink) 11% 18%, transparent 19%), radial-gradient(circle at 70% 50%, var(--pearl) 0 10%, var(--fog-ink) 11% 18%, transparent 19%);
}

.wave::before {
  border-top: 5px double var(--sea-glass);
  border-radius: 50%;
}

.stamp-ring::before {
  border: 3px double var(--brass);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.middle-act::before {
  content: "";
  position: absolute;
  left: 6vw;
  right: 8vw;
  top: 52%;
  height: 18vh;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(38, 49, 61, .1), transparent);
  filter: blur(16px);
  opacity: .7;
}

.finale {
  min-height: 115vh;
  place-items: center;
  text-align: center;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 244, 227, .72), transparent 40%);
}

.final-title {
  position: absolute;
  top: 12vh;
  left: clamp(1.5rem, 8vw, 8rem);
  text-align: left;
}

.horizon-card {
  width: min(88vw, 760px);
  padding: clamp(2rem, 5vw, 4.8rem);
  background: rgba(255, 244, 227, .56);
  border: 1px solid rgba(185, 139, 69, .32);
  box-shadow: 0 28px 90px rgba(247, 182, 166, .3);
}

.horizon-card h2 {
  margin: 0 0 1.4rem;
  font-size: clamp(2.35rem, 6vw, 6.2rem);
  line-height: 1;
}

.horizon-card p:not(.eyebrow) {
  margin: 0 auto;
  max-width: 520px;
  font-size: 1.55rem;
  line-height: 1.32;
}

.domain-stamp {
  width: max-content;
  margin: 3rem 0 0 auto;
  padding: .8rem 1rem;
  border: 1px solid var(--brass);
  color: var(--brass);
  font-size: .7rem;
  transform: rotate(-4deg);
}

.final-bubbles .bubble {
  animation: rise 8s ease-in-out infinite alternate;
}

.final-one { width: 72px; height: 72px; left: 38vw; top: 26vh; }
.final-two { width: 128px; height: 128px; left: 55vw; top: 20vh; animation-delay: -2s; }
.final-three { width: 96px; height: 96px; left: 47vw; top: 68vh; animation-delay: -4s; }
.final-four { width: 46px; height: 46px; left: 63vw; top: 54vh; animation-delay: -1s; }

@keyframes rise {
  from { transform: translate3d(0, 18px, 0) scale(.98); }
  to { transform: translate3d(0, -34px, 0) scale(1.03); }
}

@media (max-width: 820px) {
  .tide-spine { left: 1rem; }
  .tide-reading { right: .8rem; top: .8rem; }
  .act { padding: 8vh 1.3rem 8vh 4.6rem; }
  .observation { grid-template-columns: 1fr; }
  .observation.left .artifact,
  .observation.right .artifact,
  .observation.left .chapter,
  .observation.right .chapter {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
  .flip-card { height: 470px; }
  .node-bubble { left: .45rem; width: 84px; height: 84px; }
  .memory-bubble { left: 38vw; top: 14vh; }
}