:root {
  /* compliance text: IBM Plex Sans Condensed** Condensed* Condense* navigation labels perimeter */
  --abyss: #071826;
  --kelp: #0D3B3E;
  --fog: #D7E3DF;
  --mint: #63F2B7;
  --violet: #6A5CFF;
  --coral: #FF7A6B;
  --gold: #B9A35F;
  --serif: "Cormorant Garamond", Cormorant, Georgia, serif;
  --display: "Fraunces", Lora, Georgia, serif;
  --condensed: "IBM Plex Sans Condensed", "Arial Narrow", Inter, sans-serif;
  --sans: Inter, "IBM Plex Sans Condensed", sans-serif;
}

* { box-sizing: border-box; }

html {
  background: var(--abyss);
  color: var(--fog);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  font-family: var(--sans);
  background:
    radial-gradient(circle at 8% 18%, rgba(99, 242, 183, .08), transparent 24rem),
    radial-gradient(circle at 91% 64%, rgba(106, 92, 255, .08), transparent 30rem),
    linear-gradient(180deg, #071826 0%, #0D3B3E 55%, #071826 100%);
}

.grain, .fog-veil, .aurora-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.grain {
  z-index: 12;
  opacity: .22;
  background-image:
    repeating-linear-gradient(88deg, rgba(215, 227, 223, .04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(177deg, rgba(185, 163, 95, .035) 0 1px, transparent 1px 11px);
  mix-blend-mode: screen;
}

.fog-veil {
  z-index: 10;
  opacity: var(--fog-opacity, .74);
  background:
    radial-gradient(ellipse at 18% 31%, rgba(215, 227, 223, .24), transparent 27rem),
    radial-gradient(ellipse at 62% 42%, rgba(215, 227, 223, .17), transparent 34rem),
    linear-gradient(112deg, rgba(215, 227, 223, .16), transparent 35%, rgba(215, 227, 223, .10) 62%, transparent);
  filter: blur(14px);
  transform: translate3d(var(--fog-x, 0), var(--fog-y, 0), 0);
  transition: opacity .7s ease;
}

.aurora-field {
  z-index: 0;
  opacity: var(--aurora, .13);
  background:
    linear-gradient(118deg, transparent 18%, rgba(99, 242, 183, .55) 34%, transparent 47%),
    linear-gradient(132deg, transparent 36%, rgba(106, 92, 255, .48) 51%, transparent 68%),
    radial-gradient(ellipse at 71% 19%, rgba(99, 242, 183, .28), transparent 25rem);
  filter: blur(34px) saturate(1.25);
  transform: translateY(var(--aurora-shift, 0));
}

.foghorn-nav {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: clamp(.72rem, 1vw, .92rem);
}

.nav-mark {
  position: absolute;
  color: var(--fog);
  text-decoration: none;
  pointer-events: auto;
  opacity: .72;
  padding: .5rem .75rem;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, 1.4, .5, 1), color .25s ease;
}

.nav-mark::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: .24rem;
  background: var(--gold);
  transition: width .35s ease;
}

.nav-mark:hover, .nav-mark.active {
  opacity: 1;
  color: var(--mint);
  transform: rotate(0deg) translateY(-3px);
}

.nav-mark:hover::after, .nav-mark.active::after { width: 4.7rem; }
.nav-haze { left: 2vw; top: 9vh; transform: rotate(-8deg); }
.nav-kelp { right: 3vw; top: 25vh; transform: rotate(6deg); }
.nav-drizzle { left: 5vw; bottom: 18vh; transform: rotate(11deg); }
.nav-glow { right: 8vw; bottom: 7vh; transform: rotate(-13deg); }

.weather-story { position: relative; z-index: 2; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 6vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 9% 12% 8% 10%;
  border: 1px solid rgba(185, 163, 95, .28);
  transform: rotate(var(--frame-tilt, -2deg));
  opacity: .45;
  z-index: -1;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 82%, transparent);
}

.scene-haze { --frame-tilt: 1.5deg; }
.scene-kelp { --frame-tilt: -4deg; background: linear-gradient(180deg, rgba(13, 59, 62, .18), transparent); }
.scene-drizzle { --frame-tilt: 3deg; }
.scene-glow { --frame-tilt: -1deg; }

.wordmark {
  position: absolute;
  left: -8vw;
  top: 16vh;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.07em;
  font-size: clamp(6rem, 22vw, 20rem);
  line-height: .72;
  color: var(--fog);
  text-shadow: -9px 7px 0 rgba(106, 92, 255, .23), 8px -4px 0 rgba(99, 242, 183, .12);
  opacity: .92;
  transform: translateX(var(--word-drift, 0)) rotate(-3deg);
}

.mist-panel {
  position: absolute;
  right: 12vw;
  bottom: 19vh;
  width: min(38rem, 68vw);
  min-height: 11rem;
  padding: 1.5rem 1.75rem;
  background: rgba(215, 227, 223, .11);
  border: 1px solid rgba(215, 227, 223, .28);
  backdrop-filter: blur(9px);
  transform: rotate(4deg);
  clip-path: polygon(3% 0, 100% 8%, 94% 100%, 0 88%);
}

.mist-panel span, .scene-title {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(2.7rem, 7vw, 7.7rem);
  line-height: .84;
  color: var(--fog);
}

.scene-title {
  position: relative;
  z-index: 4;
  max-width: 13ch;
  text-shadow: 5px 4px 0 rgba(255, 122, 107, .22);
}

.tilted { margin-left: 18vw; transform: rotate(-5deg); }
.cramped { letter-spacing: -.09em; margin: 9vh 0 0 4vw; transform: rotate(2deg); }
.finale { margin: 10vh 0 0 8vw; max-width: 9ch; color: #D7E3DF; text-shadow: -8px 8px 0 rgba(106, 92, 255, .24), 5px -5px 0 rgba(99, 242, 183, .22); }

.stem {
  position: absolute;
  bottom: -8vh;
  width: 2px;
  height: 60vh;
  background: linear-gradient(#D7E3DF, #0D3B3E);
  opacity: .22;
  transform-origin: bottom;
}

.stem::before, .stem::after {
  content: "";
  position: absolute;
  width: 5rem;
  height: 1px;
  background: #D7E3DF;
  opacity: .55;
  top: 30%;
}

.stem::before { right: 0; transform: rotate(-28deg); }
.stem::after { left: 0; top: 49%; transform: rotate(31deg); }
.stem-one { left: 62vw; transform: rotate(-8deg); }
.stem-two { left: 77vw; height: 47vh; transform: rotate(12deg); }

.paper-scrap, .label-strip, .inventory-board, .field-note, .closing-line, .marginalia, .flower-label {
  font-family: var(--condensed);
  letter-spacing: .08em;
}

.paper-scrap {
  position: absolute;
  color: var(--abyss);
  background: rgba(215, 227, 223, .88);
  border-left: 4px solid var(--coral);
  padding: .85rem 1rem;
  transform: rotate(-7deg);
  box-shadow: 10px 13px 0 rgba(13, 59, 62, .42);
}

.scrap-one { right: 8vw; top: 13vh; }
.scrap-two { left: 9vw; bottom: 17vh; transform: rotate(7deg); border-color: var(--mint); }

.marginalia {
  position: absolute;
  color: var(--coral);
  font-size: .92rem;
  text-transform: uppercase;
}
.note-left { left: 3vw; bottom: 10vh; transform: rotate(-14deg); }
.note-right { right: 6vw; top: 17vh; transform: rotate(9deg); color: var(--gold); }

.specimen-tag {
  position: absolute;
  left: 43vw;
  bottom: 10vh;
  border: 1px solid var(--gold);
  background: rgba(215, 227, 223, .09);
  color: var(--fog);
  font: 600 .88rem var(--condensed);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .85rem 1.1rem;
  cursor: pointer;
  transform: rotate(5deg);
  text-decoration: none;
}

.specimen-tag:hover { background: rgba(99, 242, 183, .18); color: var(--mint); }

.botanical-plate {
  position: absolute;
  right: 13vw;
  top: 14vh;
  width: min(29rem, 43vw);
  height: 68vh;
  border: 1px solid rgba(185, 163, 95, .48);
  transform: rotate(5deg);
  background: rgba(215, 227, 223, .045);
}

.botanical-plate::after {
  content: "";
  position: absolute;
  inset: 2rem;
  border: 1px dashed rgba(215, 227, 223, .22);
  transform: translate(var(--ink-offset, -16px), var(--ink-offset-y, 13px));
  transition: transform .8s ease, border-color .8s ease;
}

.scene.visible .botanical-plate::after { --ink-offset: 10px; --ink-offset-y: -7px; border-color: rgba(99, 242, 183, .55); }

.kelp-frond {
  position: absolute;
  bottom: 8%;
  left: 48%;
  width: 3px;
  height: 76%;
  background: var(--fog);
  opacity: .72;
  transform-origin: bottom;
}
.kelp-frond::before {
  content: "";
  position: absolute;
  inset: 7% -2.2rem 16% -2.2rem;
  border-left: 1px solid var(--mint);
  border-right: 1px solid var(--violet);
  border-radius: 50%;
  opacity: .62;
}
.frond-a { transform: rotate(-16deg); }
.frond-b { height: 62%; transform: rotate(18deg); }
.frond-c { height: 52%; transform: translateX(2.4rem) rotate(6deg); }

.label-strip {
  position: absolute;
  right: 32vw;
  bottom: 15vh;
  color: var(--gold);
  border-top: 1px solid var(--gold);
  padding-top: .5rem;
  transform: rotate(-8deg);
}
.wrong-arrow { position: absolute; right: 46vw; top: 43vh; color: var(--coral); font-size: 6rem; transform: rotate(-33deg); }
.field-note { position: absolute; left: 12vw; top: 49vh; width: min(27rem, 46vw); color: rgba(215, 227, 223, .82); font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.25; transform: rotate(2deg); }

.inventory-board {
  position: absolute;
  left: 14vw;
  top: 37vh;
  display: grid;
  gap: .7rem;
  color: var(--abyss);
  background: rgba(215, 227, 223, .84);
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--gold);
  transform: rotate(-3deg);
}
.inventory-board span:nth-child(even) { color: var(--coral); transform: translateX(1.4rem); }

.droplet-field { position: absolute; inset: 0; overflow: hidden; }
.drop {
  position: absolute;
  width: .44rem;
  height: .7rem;
  border-radius: 50% 50% 55% 45%;
  border: 1px solid rgba(215, 227, 223, .55);
  background: rgba(99, 242, 183, .08);
  transform: rotate(18deg);
  animation: drip 6s linear infinite;
}
@keyframes drip { from { translate: 0 -12vh; opacity: 0; } 15% { opacity: .8; } to { translate: 0 110vh; opacity: 0; } }

.fog-creature { position: absolute; right: 23vw; bottom: 28vh; color: var(--mint); font: italic 4rem var(--serif); filter: blur(.4px); animation: creature 4s ease-in-out infinite; }
@keyframes creature { 50% { transform: translate(1.2rem, -.8rem) rotate(9deg); color: var(--coral); } }
.tide-ruler { position: absolute; right: 10vw; top: 34vh; width: 2px; height: 44vh; background: var(--gold); transform: rotate(8deg); }
.tide-ruler i { display: block; width: 4rem; height: 1px; margin-top: 3.8rem; background: var(--gold); }

.aurora-curtain { position: absolute; inset: 0; filter: blur(24px); mix-blend-mode: screen; }
.curtain-one { background: linear-gradient(101deg, transparent 12%, rgba(99, 242, 183, .52) 35%, transparent 54%); animation: curtain 8s ease-in-out infinite; }
.curtain-two { background: linear-gradient(126deg, transparent 33%, rgba(106, 92, 255, .58) 53%, rgba(255, 122, 107, .16) 68%, transparent 78%); animation: curtain 11s ease-in-out infinite reverse; }
@keyframes curtain { 50% { transform: translateX(4vw) skewX(-8deg); opacity: .74; } }

.glow-specimen { position: absolute; right: 14vw; top: 26vh; width: 24rem; height: 24rem; transform: rotate(8deg); }
.impossible-flower { position: absolute; inset: 25%; border-radius: 52% 48% 61% 39%; border: 2px solid var(--mint); box-shadow: 0 0 4rem rgba(99, 242, 183, .7); }
.impossible-flower::before, .impossible-flower::after { content: ""; position: absolute; inset: -40%; border: 1px solid var(--violet); border-radius: 50% 10% 50% 10%; transform: rotate(45deg); }
.impossible-flower::after { border-color: var(--coral); transform: rotate(-25deg); inset: -26%; }
.flower-label { position: absolute; left: -4rem; bottom: 1rem; color: var(--abyss); background: var(--fog); padding: .55rem .8rem; transform: rotate(-12deg); }
.closing-line { position: absolute; left: 13vw; bottom: 14vh; width: min(35rem, 58vw); font-family: var(--display); font-size: clamp(1.35rem, 2.5vw, 2.3rem); line-height: 1.08; }
.final-tag { left: auto; right: 9vw; bottom: 8vh; }

.scene:not(.visible) .scene-title, .scene:not(.visible) .field-note, .scene:not(.visible) .inventory-board, .scene:not(.visible) .glow-specimen, .scene:not(.visible) .closing-line { opacity: .34; filter: blur(5px); }
.scene.visible .scene-title, .scene.visible .field-note, .scene.visible .inventory-board, .scene.visible .glow-specimen, .scene.visible .closing-line { opacity: 1; filter: blur(0); transition: opacity .8s ease, filter .8s ease, transform .8s ease; }

@media (max-width: 760px) {
  .scene { padding: 5rem 1.25rem; }
  .wordmark { left: -18vw; top: 22vh; font-size: 7rem; }
  .mist-panel { right: 5vw; width: 84vw; }
  .botanical-plate { right: 2vw; width: 72vw; opacity: .8; }
  .tilted, .cramped, .finale { margin-left: 0; }
  .field-note, .closing-line { left: 7vw; width: 80vw; }
  .inventory-board { left: 8vw; }
  .glow-specimen { right: -10vw; width: 18rem; height: 18rem; }
}