/* karenpearson.live — the island and the sea
   Visual system dictated by Nicole 2026-07-24, revised same night:
   real photography only. The photo stays vibrant, a dark blue fade
   sits on the front of it. Not too dark. The island is the surface,
   every section below is the sea, real jellyfish live in the water.
   Performance law: local images, two font families, no frameworks. */

:root {
  --sea-1: #16406e;
  --sea-2: #103358;
  --sea-3: #0c2947;
  --sea-4: #092138;
  --fade: 9, 33, 56;            /* the dark blue that fades over every photo */
  --seam: #12335c;              /* the shared water color every section melts through */
  --glow: #a8dcf0;
  --text: #f2f7fb;
  --text-dim: #c9dcec;
  --slot: #9fc0dd;
  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--sea-4);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ---------- The nav: floats above the water ---------- */

.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: rgba(var(--fade), 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(168, 220, 240, 0.15);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 5vw 0.4rem;
}

.nav-brand {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 2.2rem;
  list-style: none;
}

.nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav-links a:hover { color: var(--glow); }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The newsletter invitation: the open book and the guide */
.nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 0.45rem 5vw 0.65rem;
  text-decoration: none;
  border-top: 1px solid rgba(168, 220, 240, 0.1);
}

.cta-words { text-align: left; }

.cta-lead {
  display: block;
  color: var(--glow);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.cta-title {
  display: block;
  font-family: var(--serif);
  color: var(--text);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  letter-spacing: 0.03em;
}

.nav-cta:hover .cta-title { color: var(--glow); }

/* The book that opens */
.book {
  position: relative;
  width: 46px;
  height: 34px;
  flex: none;
  perspective: 240px;
}

.book-pages, .book-cover {
  position: absolute;
  top: 0;
  left: 50%;
  width: 22px;
  height: 34px;
  border-radius: 1px 3px 3px 1px;
  transform-origin: left center;
}

/* Right-hand page block, always open */
.book-pages {
  background:
    repeating-linear-gradient(180deg,
      transparent 0 6px,
      rgba(12, 41, 71, 0.25) 6px 7px) ,
    linear-gradient(90deg, #dcebf7, #f4fafd);
  box-shadow: 0 1px 6px rgba(4, 16, 30, 0.5);
}

/* The cover, opening and closing like a breath */
.book-cover {
  background: linear-gradient(90deg, #16406e, #2c6da8);
  border: 1px solid rgba(168, 220, 240, 0.5);
  animation: book-open 6s ease-in-out infinite;
  transform: rotateY(-30deg);
}

@keyframes book-open {
  0%, 12%  { transform: rotateY(-24deg); }
  45%, 65% { transform: rotateY(-152deg); }
  95%, 100% { transform: rotateY(-24deg); }
}

/* Left page revealed while the cover is open */
.book::before {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 22px;
  height: 34px;
  border-radius: 3px 1px 1px 3px;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 6px,
      rgba(12, 41, 71, 0.2) 6px 7px),
    linear-gradient(270deg, #dcebf7, #eef7fc);
  box-shadow: 0 1px 6px rgba(4, 16, 30, 0.5);
}

/* Spine glow under the book */
.book::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 2px;
  height: 38px;
  transform: translateX(-50%);
  background: rgba(168, 220, 240, 0.6);
  border-radius: 2px;
}

@media (max-width: 760px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(var(--fade), 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(168, 220, 240, 0.15);
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-top: 1px solid rgba(168, 220, 240, 0.1); }
  .nav-links a { display: block; padding: 1rem 5vw; }
  .nav-burger { display: flex; }
  .cta-title { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .book-cover { animation: none; transform: rotateY(-120deg); }
}

/* ---------- The descent: each section covers the one before it ---------- */

.sea-section {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12vh 8vw;
  text-align: center;
  background-size: cover;
  background-position: center;
}

/* Rising sections dissolve in: their leading edge is transparent, so they
   fade over the section beneath instead of cutting across it with a line. */
.veil, .biolume-divider {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.9) 15%, #000 21%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.9) 15%, #000 21%);
}

/* The blue fade on the front of every photo. The photo stays vibrant behind it. */
.veil { position: relative; overflow: hidden; }
.veil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    var(--seam) 0%,
    rgba(var(--fade), 0.60) 12%,
    rgba(var(--fade), 0.32) 32%,
    rgba(var(--fade), 0.42) 62%,
    rgba(var(--fade), 0.64) 86%,
    var(--seam) 100%);
  pointer-events: none;
}

/* The jellyfish photo itself swims: a slow rise and pulse, like moving through water */
.photo-layer {
  position: absolute;
  inset: -14%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: swim var(--swim-dur, 9s) ease-in-out infinite alternate;
  will-change: transform;
}

/* Visible swimming: the jellyfish rises with a pulse, sways, and settles */
@keyframes swim {
  0%   { transform: translate(0, 4%) scale(1.00); }
  35%  { transform: translate(-1.5%, 0%) scale(1.08); }
  70%  { transform: translate(1.5%, -3.5%) scale(1.04); }
  100% { transform: translate(0.5%, -5%) scale(1.10); }
}

/* Bioluminescent dividers between the photo sections.
   Not flat water: fields of living glow in different shades, melting
   from one hue into the next. Built from layered soft radial lights
   that drift very slowly, plus the plankton field above them. */

.biolume-divider {
  position: relative;
  overflow: hidden;
}

.biolume-divider::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 60% 45% at 22% 30%, var(--glow-1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 78% 62%, var(--glow-2) 0%, transparent 62%),
    radial-gradient(ellipse 70% 55% at 50% 88%, var(--glow-3) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 65% 12%, var(--glow-2) 0%, transparent 58%),
    linear-gradient(180deg, var(--base-top), var(--base-bottom));
  animation: glow-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Divider one: teal and aqua glow, the green side of bioluminescence */
.biolume-teal {
  --glow-1: rgba(64, 224, 208, 0.38);
  --glow-2: rgba(102, 252, 241, 0.28);
  --glow-3: rgba(32, 178, 170, 0.40);
  --base-top: #123a63;
  --base-bottom: #0e3050;
}

/* Divider two: ice blue and soft violet glow, the cold side */
.biolume-violet {
  --glow-1: rgba(140, 190, 255, 0.36);
  --glow-2: rgba(170, 145, 255, 0.27);
  --glow-3: rgba(96, 200, 255, 0.38);
  --base-top: #0f2c4e;
  --base-bottom: #0b2440;
}

/* The whole glow field breathes: drifts across the water and swells in and out */
@keyframes glow-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.75; }
  50%  { transform: translate(2%, -2%) scale(1.12); opacity: 1; }
  100% { transform: translate(4%, -5%) scale(1.02); opacity: 0.8; }
}

/* The dividers melt through the same water color at both edges */
.biolume-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--seam) 0%,
    transparent 20%,
    transparent 80%,
    var(--seam) 100%);
  pointer-events: none;
}

/* Photo sections: each jellyfish swims at its own pace */
.bg-jelly-blue   .photo-layer { background-image: url(../images/jelly-blue.jpg); --swim-dur: 7s; }
.bg-jelly-nettle .photo-layer { background-image: url(../images/jelly-nettle.jpg); --swim-dur: 9s; }
.bg-jelly-deep   .photo-layer { background-image: url(../images/jelly-deep.jpg); --swim-dur: 11s; }

/* ---------- Hero: the real Decatur Island photograph ---------- */

.hero {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  background-image: url(../images/decatur-hero.jpg);
  background-size: cover;
  background-position: center 35%;
}

/* Vibrant photo, blue fade on the front, deepening toward the water below */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--fade), 0.10) 0%,
    rgba(var(--fade), 0.18) 45%,
    rgba(var(--fade), 0.50) 72%,
    rgba(var(--fade), 0.80) 88%,
    var(--seam) 100%);
  pointer-events: none;
}

.hero-title { position: relative; padding-bottom: 14vh; }

.hero-title h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 5.8rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 26px rgba(4, 16, 30, 0.75);
}

.hero-title p {
  margin-top: 0.6rem;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--text);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(4, 16, 30, 0.8);
}

.hero-place {
  margin-top: 1.8rem;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-shadow: 0 1px 10px rgba(4, 16, 30, 0.8);
}

.descend-cue {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  color: var(--glow);
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.85;
  animation: cue-sink 3.2s ease-in-out infinite;
}

@keyframes cue-sink {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.85; }
  50% { transform: translate(-50%, 10px); opacity: 0.4; }
}

/* ---------- Section content ---------- */

.section-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 3rem 2.5rem;
  border-radius: 6px;
  background: rgba(var(--fade), 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.sea-section.lit .section-inner {
  opacity: 1;
  transform: translateY(0);
}

.section-inner h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
  text-shadow: 0 0 24px rgba(168, 220, 240, 0.35);
}

.section-inner p { color: var(--text-dim); font-size: 1.05rem; }

.slot {
  display: block;
  margin-top: 1.6rem;
  padding: 1.1rem 1.4rem;
  border: 1px dashed rgba(159, 192, 221, 0.45);
  border-radius: 4px;
  color: var(--slot);
  font-style: italic;
  font-size: 0.92rem;
}

/* ---------- Bioluminescence: the living light in the water ---------- */

.plankton-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.plankton {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 220, 240, 0.95) 0%, rgba(168, 220, 240, 0) 70%);
  opacity: 0;
  animation: biolume var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.plankton.dim { width: 6px; height: 6px; }
.plankton.faint { width: 4px; height: 4px; }

/* The light moves in and out: it swells as it brightens, recedes as it dims */
@keyframes biolume {
  0%, 100% { opacity: 0; transform: scale(0.55); }
  50% { opacity: var(--peak, 0.6); transform: scale(1.35); }
}

/* ---------- Footer: the sea floor ---------- */

.sea-floor {
  position: relative;
  background: linear-gradient(180deg, var(--seam), #061b30);
  padding: 10vh 8vw 5vh;
  text-align: center;
  z-index: 4;
}

.sea-floor h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
  font-size: 1.7rem;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 1.8rem;
  max-width: 780px;
  margin: 0 auto 3rem;
  list-style: none;
}

.legal-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(159, 192, 221, 0.35);
}

.legal-links a:hover { color: var(--glow); }

.colophon { color: rgba(201, 220, 236, 0.6); font-size: 0.8rem; }
.credits { margin-top: 0.6rem; color: rgba(201, 220, 236, 0.4); font-size: 0.7rem; }

/* ---------- The vlog page ---------- */

.vlog-body { background: #0b2036; }

/* Header: the purpley blue from the front page, lighter */
.vlog-hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 16vh 8vw 10vh;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 255, 255, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #7b82ea 0%, #5a5fd6 55%, #3c47a8 100%);
}

.script-name {
  font-family: "Dancing Script", cursive;
  font-weight: 600;
  font-size: clamp(3.2rem, 9vw, 6rem);
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(20, 26, 90, 0.45);
  line-height: 1.1;
}

/* The big book, writing itself as it opens */
.book-stage {
  margin: 3rem 0 2.4rem;
  perspective: 900px;
}

.big-book {
  position: relative;
  width: 300px;
  height: 190px;
  display: block;
}

.bb-left, .bb-right, .bb-cover {
  position: absolute;
  top: 0;
  width: 148px;
  height: 190px;
}

.bb-left {
  left: 0;
  border-radius: 6px 2px 2px 6px;
  background:
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(28, 47, 107, 0.14) 26px 27px),
    linear-gradient(270deg, #e9f3fa, #f8fcfe);
  box-shadow: 0 6px 30px rgba(10, 16, 60, 0.45);
  padding: 26px 14px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.bb-right {
  right: 0;
  border-radius: 2px 6px 6px 2px;
  background:
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(28, 47, 107, 0.14) 26px 27px),
    linear-gradient(90deg, #e9f3fa, #f2f9fd);
  box-shadow: 0 6px 30px rgba(10, 16, 60, 0.45);
}

/* The cover starts closed over the left page and swings open once */
.bb-cover {
  left: 0;
  border-radius: 6px 2px 2px 6px;
  background: linear-gradient(270deg, #16406e, #2c6da8);
  border: 1px solid rgba(168, 220, 240, 0.5);
  transform-origin: right center;
  animation: bb-open 2.4s ease-in-out 0.5s forwards;
}

@keyframes bb-open {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(160deg); }
}

/* The words write themselves into the open book */
.write-line {
  display: block;
  font-family: "Dancing Script", cursive;
  font-weight: 500;
  font-size: 1.05rem;
  color: #1c2f6b;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
}

.l1 { animation: write 1.4s ease-out 2.6s forwards; }
.l2 { animation: write 1.4s ease-out 3.7s forwards; }
.l3 { animation: write 1.4s ease-out 4.8s forwards; }

@keyframes write {
  0%   { max-width: 0; }
  100% { max-width: 100%; }
}

.vlog-cta-lead {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: #ffffff;
  max-width: 34ch;
  text-shadow: 0 1px 16px rgba(20, 26, 90, 0.5);
  margin-bottom: 1.6rem;
}

/* The button: dark blue, muted gray outline, lighter blue when pressed */
.cta-button {
  display: inline-block;
  padding: 0.9rem 2.6rem;
  background: #12335c;
  color: #f2f7fb;
  border: 1px solid rgba(195, 201, 212, 0.55);
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.cta-button:hover, .cta-button:active {
  background: #4f79c9;
  border-color: rgba(220, 228, 240, 0.8);
}

/* The video sea: dark water full of glow */
.vlog-sea {
  position: relative;
  padding: 10vh 8vw 12vh;
  background:
    radial-gradient(ellipse 55% 40% at 18% 22%, rgba(64, 224, 208, 0.16) 0%, transparent 62%),
    radial-gradient(ellipse 50% 38% at 82% 45%, rgba(170, 145, 255, 0.14) 0%, transparent 62%),
    radial-gradient(ellipse 65% 45% at 40% 80%, rgba(96, 200, 255, 0.15) 0%, transparent 65%),
    linear-gradient(180deg, #3c47a8 0%, #16305c 18%, #0b2036 55%, #081a2e 100%);
}

/* The cards: dark blue containers melting out into the bioluminescence */
.video-card {
  position: relative;
  max-width: 860px;
  margin: 0 auto 7vh;
  padding: 1.6rem;
  border-radius: 10px;
  background: linear-gradient(180deg, #0e2846, #0a1f38);
}

.glow-teal {
  box-shadow: 0 0 45px 6px rgba(64, 224, 208, 0.22), 0 0 130px 40px rgba(64, 224, 208, 0.10);
}

.glow-violet {
  box-shadow: 0 0 45px 6px rgba(170, 145, 255, 0.22), 0 0 130px 40px rgba(170, 145, 255, 0.10);
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #05101f;
}

.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(242, 247, 251, 0.6);
  background: rgba(9, 33, 56, 0.65);
  cursor: pointer;
  transition: background 0.25s ease;
}

.play-button span {
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 20px solid #f2f7fb;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

.video-frame:hover .play-button { background: rgba(79, 121, 201, 0.8); }

.video-words { padding: 1.4rem 0.6rem 0.4rem; text-align: left; }

.video-words h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.7rem;
}

.video-note { color: var(--text-dim); font-size: 0.98rem; font-style: italic; }

.read-more {
  display: inline-block;
  margin-top: 0.9rem;
  color: var(--glow);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(168, 220, 240, 0.4);
}

.read-more:hover { border-color: var(--glow); }

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.video-grid .video-card { margin: 0; }

@media (max-width: 820px) {
  .video-grid { grid-template-columns: 1fr; }
  .big-book { transform: scale(0.85); }
}

/* ---------- Reduced motion: still water, steady light ---------- */

/* Dense local plankton inside the divider sections */
.divider-spark {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--spark, rgba(168, 220, 240, 0.95)) 0%, transparent 70%);
  opacity: 0;
  animation: biolume var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .plankton { animation: none; opacity: 0.3; }
  .photo-layer { animation: none; }
  .bb-cover { animation: none; transform: rotateY(160deg); }
  .write-line { animation: none; max-width: 100%; }
  .divider-spark { animation: none; opacity: 0.35; }
  .biolume-divider::before { animation: none; }
  .descend-cue { animation: none; }
  .section-inner { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}