/* =====================================================
   luminous.quest — a slow reef walk
   creamy-pastel · horizontal-scroll · serif-classic
   ===================================================== */

:root {
    --lantern-cream: #FBF3E4;
    --sandbar: #F4E6D0;
    --apricot-surf: #F7C9A8;
    --coral-bloom: #E8B4BC;
    --sea-foam-mint: #A8D5BA;
    --drift-teal: #9DBEBB;
    --twilight-plum: #6B5B73;
    --caustic-highlight: #FFFCF5;

    --serif-display: 'Cormorant Garamond', 'Lora', Georgia, serif;
    --serif-body: 'Lora', 'Cormorant Garamond', Georgia, serif;
}

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

html, body {
    height: 100svh;
    overflow: hidden;
    background: var(--lantern-cream);
    color: var(--twilight-plum);
    font-family: var(--serif-body);
    font-variant-numeric: oldstyle-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: none;
}

@media (pointer: coarse) {
    html, body { cursor: auto; }
}

body {
    position: relative;
    width: 100vw;
    overflow: hidden;
}

/* ===== Backdrop (sky/water/horizon, fixed to viewport) ===== */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.sky {
    position: absolute;
    inset: 0 0 38svh 0;
    background: linear-gradient(180deg,
        #FFF8EC 0%,
        var(--lantern-cream) 60%,
        #FAEBD3 100%);
}

.water {
    position: absolute;
    inset: 38svh 0 0 0;
    background: linear-gradient(180deg,
        var(--sandbar) 0%,
        #EFDDC0 60%,
        #E8D2B0 100%);
}

.caustic {
    position: absolute;
    inset: 38svh 0 0 0;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,252,245,0.6) 0%, transparent 28%),
        radial-gradient(circle at 62% 64%, rgba(255,252,245,0.5) 0%, transparent 24%),
        radial-gradient(circle at 84% 36%, rgba(255,252,245,0.55) 0%, transparent 30%),
        radial-gradient(circle at 38% 78%, rgba(255,252,245,0.45) 0%, transparent 26%);
    animation: causticDrift 38s ease-in-out infinite alternate;
}

@keyframes causticDrift {
    0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; transform: translateX(0); }
    50%  { background-position: 4% 2%, -3% 1%, 2% -2%, -1% 3%; transform: translateX(-1.2vw); }
    100% { background-position: -2% 3%, 3% -1%, -2% 2%, 1% -3%; transform: translateX(0.8vw); }
}

.horizon {
    position: absolute;
    left: 0;
    right: 0;
    top: 38svh;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--apricot-surf) 12%,
        var(--apricot-surf) 88%,
        transparent 100%);
    opacity: 0.9;
}

/* ===== Custom shrimp cursor ===== */
.cursor-shrimp {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    width: 36px;
    height: 28px;
    color: var(--coral-bloom);
    transform: translate(-50%, -50%);
    transition: transform 80ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    mix-blend-mode: multiply;
}

.cursor-shrimp svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cursor-shrimp.curl {
    animation: shrimpCurl 480ms ease-in-out;
}

@keyframes shrimpCurl {
    0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: none; }
    50% { transform: translate(-50%, -50%) scale(1.4) rotate(18deg); filter: drop-shadow(0 0 8px rgba(255,252,245,0.9)); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: none; }
}

/* ===== Track (horizontal scroll container) ===== */
.track {
    position: relative;
    z-index: 1;
    width: 600vw;
    height: 100svh;
    will-change: transform;
    transform: translateX(0);
}

/* ===== Stations ===== */
.station {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    padding: 4svh 6vw;
}

.station[data-station="0"] { left: 0; }
.station[data-station="1"] { left: 100vw; }
.station[data-station="2"] { left: 200vw; }
.station[data-station="3"] { left: 300vw; }
.station[data-station="4"] { left: 400vw; }
.station[data-station="5"] { left: 500vw; }

.station-marginalia {
    position: absolute;
    top: 4svh;
    left: 6vw;
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--apricot-surf);
    font-variant-numeric: oldstyle-nums;
    opacity: 0.95;
    z-index: 4;
}

.station-marginalia.top-left { top: 4svh; left: 6vw; }

.station-num { color: var(--apricot-surf); }
.station-dot { color: var(--coral-bloom); margin: 0 0.4em; }
.station-name { color: var(--twilight-plum); font-style: italic; letter-spacing: 0.06em; text-transform: none; }

.station-title {
    position: absolute;
    top: 12svh;
    left: 6vw;
    right: 6vw;
    font-family: var(--serif-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(40px, 5.6vw, 88px);
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--twilight-plum);
    z-index: 3;
}

/* ===== SVG fish defaults ===== */
.fish-body, .fish-tail, .fish-fin, .fish-detail, .fish-stripe {
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fish-eye { fill: currentColor; }

svg.card-fish, svg.specimen-fish, svg.skeleton-fish, svg.ornament, svg.tide-butterfly, svg.lighthouse-seahorse, svg.hint-shark {
    color: var(--coral-bloom);
}

svg.card-corner, svg.compass {
    color: var(--sea-foam-mint);
    opacity: 0.42;
}

/* swim animation for inline fish silhouettes */
svg.card-fish, svg.specimen-fish {
    animation: swim 12s ease-in-out infinite alternate;
    transform-origin: center;
}

@keyframes swim {
    0%   { transform: translateY(0) rotate(-0.6deg); }
    50%  { transform: translateY(-3px) rotate(0.4deg); }
    100% { transform: translateY(2px) rotate(-0.3deg); }
}

/* ===== Station I: The Lantern ===== */
.station-lantern { display: flex; align-items: center; justify-content: center; }

.lantern-stage {
    position: relative;
    text-align: center;
    z-index: 2;
}

.lantern-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60vw;
    height: 60vw;
    max-width: 720px;
    max-height: 720px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(255,252,245,0.85) 0%,
        rgba(247,201,168,0.4) 28%,
        rgba(232,180,188,0.15) 50%,
        transparent 70%);
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
    animation: lanternPulse 6.4s ease-in-out infinite alternate;
}

@keyframes lanternPulse {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(1.07); opacity: 1; }
}

.lantern-particles {
    position: absolute;
    inset: -10svh;
    pointer-events: none;
    overflow: visible;
}

.lantern-particles .pt {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--caustic-highlight) 0%, var(--apricot-surf) 60%, transparent 100%);
    opacity: 0.7;
    animation: ptFloat var(--pt-dur, 14s) ease-in-out infinite;
    animation-delay: var(--pt-delay, 0s);
}

@keyframes ptFloat {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    20%  { opacity: 0.8; }
    60%  { opacity: 0.7; }
    100% { transform: translate(var(--pt-tx, 60px), var(--pt-ty, -120px)) scale(1.1); opacity: 0; }
}

.wordmark {
    position: relative;
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: clamp(64px, 11vw, 168px);
    letter-spacing: -0.02em;
    color: var(--twilight-plum);
    line-height: 1;
    z-index: 2;
}

.word-luminous { font-style: italic; font-weight: 300; letter-spacing: 0.02em; color: var(--twilight-plum); }
.word-dot { color: var(--apricot-surf); margin: 0 -0.04em; }
.word-quest { font-weight: 500; color: var(--twilight-plum); }

.quest-q {
    display: inline-block;
    color: var(--coral-bloom);
    animation: jellyPulse 3.6s ease-in-out infinite alternate;
    transform-origin: 50% 70%;
}

@keyframes jellyPulse {
    0%   { transform: scale(1) translateY(0); filter: drop-shadow(0 0 0 transparent); }
    100% { transform: scale(1.04) translateY(-2px); filter: drop-shadow(0 6px 18px rgba(247,201,168,0.55)); }
}

.lantern-tagline {
    margin-top: 1.2em;
    font-family: var(--serif-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 1.8vw, 28px);
    letter-spacing: 0.04em;
    color: var(--drift-teal);
    z-index: 2;
}

.scroll-hint {
    margin-top: 4em;
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--apricot-surf);
    opacity: 0;
    animation: hintFade 1.4s ease-out 3s forwards;
}

@keyframes hintFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 0.95; transform: translateY(0); }
}

.hint-arrow {
    display: inline-block;
    animation: hintArrow 2.4s ease-in-out infinite;
}

@keyframes hintArrow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(8px); }
}

.hint-shark {
    color: var(--coral-bloom);
    opacity: 0.7;
}

/* ornaments */
.ornament {
    position: absolute;
    color: var(--coral-bloom);
    opacity: 0.5;
    z-index: 1;
}

.ornament-bl { bottom: 8svh; left: 8vw; transform: rotate(-8deg); }
.ornament-tr { top: 8svh; right: 8vw; }
.ornament-br { bottom: 14svh; right: 8vw; opacity: 0.55; transform: rotate(6deg); }

.ornament.compass { color: var(--sea-foam-mint); opacity: 0.55; }

/* ===== Station II: The Reef ===== */
.station-reef { padding-top: 8svh; }

.reef-cards {
    position: absolute;
    top: 22svh;
    left: 6vw;
    right: 6vw;
    bottom: 14svh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4vw;
    align-items: stretch;
}

.glass-card {
    position: relative;
    padding: clamp(20px, 2.2vw, 36px);
    border-radius: 28px;
    border-top-left-radius: 36px;
    border-bottom-right-radius: 36px;
    background: linear-gradient(135deg,
        rgba(255,252,245,0.42) 0%,
        rgba(255,252,245,0.28) 100%);
    border: 1px solid rgba(255,252,245,0.65);
    box-shadow:
        0 24px 64px -20px rgba(247, 201, 168, 0.45),
        inset 1px 1px 0 0 rgba(255,252,245,0.7),
        inset -0.5px -0.5px 0 0 rgba(168, 213, 186, 0.18);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    overflow: hidden;
    animation: bob var(--bob-dur, 11s) ease-in-out var(--bob-delay, 0s) infinite alternate;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease;
    will-change: transform;
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,252,245,0.55) 0%, rgba(255,252,245,0) 38%);
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 420ms ease;
}

.glass-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 36px 76px -20px rgba(247, 201, 168, 0.55),
        inset 1px 1px 0 0 rgba(255,252,245,0.85),
        inset -0.5px -0.5px 0 0 rgba(168, 213, 186, 0.24);
}

.glass-card:hover::before { opacity: 1; }

@keyframes bob {
    0%   { transform: translateY(-6px) rotate(-0.4deg); }
    100% { transform: translateY(6px) rotate(0.6deg); }
}

.card-tall  { align-self: start; margin-top: -3svh; }
.card-mid   { align-self: center; }
.card-short { align-self: end; margin-bottom: 2svh; }

.card-index {
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--apricot-surf);
    margin-bottom: 0.6em;
}

.card-fish {
    margin: 0.2em 0 0.6em;
    color: var(--coral-bloom);
}

.card-title {
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: clamp(24px, 2.4vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--twilight-plum);
    margin-bottom: 0.7em;
}

.card-body {
    font-family: var(--serif-body);
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.65;
    color: var(--drift-teal);
    max-width: 38ch;
    margin-bottom: 1em;
}

.card-foot {
    display: block;
    font-family: var(--serif-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(14px, 1.1vw, 18px);
    color: var(--coral-bloom);
    border-top: 1px solid rgba(168, 213, 186, 0.3);
    padding-top: 0.8em;
    margin-top: 0.5em;
}

.card-corner {
    position: absolute;
    bottom: 14px;
    right: 14px;
    color: var(--sea-foam-mint);
    opacity: 0.4;
}

/* ===== Station III: The Logbook ===== */
.station-logbook { padding-top: 8svh; }

.logbook {
    position: absolute;
    top: 14svh;
    left: 6vw;
    right: 6vw;
    bottom: 10svh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background:
        linear-gradient(180deg, rgba(255,252,245,0.55) 0%, rgba(244,230,208,0.35) 100%);
    border-radius: 6px;
    border: 1px solid rgba(168, 213, 186, 0.28);
    box-shadow:
        0 24px 64px -20px rgba(247,201,168,0.32),
        inset 0 0 0 0.5px rgba(255,252,245,0.5);
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.logbook-stitch {
    position: absolute;
    top: 4%;
    bottom: 4%;
    left: 50%;
    width: 1px;
    background: repeating-linear-gradient(180deg,
        var(--coral-bloom) 0,
        var(--coral-bloom) 4px,
        transparent 4px,
        transparent 9px);
    opacity: 0.45;
    transform: translateX(-0.5px);
}

.logbook-page {
    position: relative;
    padding: clamp(20px, 2.4vw, 44px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--apricot-surf);
    margin-bottom: 1.2em;
}

.page-date { color: var(--coral-bloom); font-style: italic; text-transform: none; letter-spacing: 0.06em; }

.page-title {
    font-family: var(--serif-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(22px, 2.4vw, 36px);
    line-height: 1.15;
    color: var(--twilight-plum);
    margin-bottom: 1em;
    letter-spacing: 0.01em;
}

.page-body {
    font-family: var(--serif-body);
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.7;
    color: var(--drift-teal);
    max-width: 52ch;
    margin-bottom: 0.9em;
}

.page-body em { color: var(--twilight-plum); font-style: italic; }

.page-body-sm {
    font-family: var(--serif-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(13px, 0.95vw, 15px);
    color: var(--coral-bloom);
    margin-top: 0.4em;
    margin-left: 1em;
}

.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    flex: 1;
    overflow: hidden;
}

.skeleton-row {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 1.1em;
    opacity: 0.94;
}

.skeleton-row .skeleton-fish {
    color: var(--apricot-surf);
    opacity: 0.75;
}

.skeleton-row .skeleton-fish .fish-body,
.skeleton-row .skeleton-fish .fish-tail,
.skeleton-row .skeleton-fish .fish-fin,
.skeleton-row .skeleton-fish .fish-detail,
.skeleton-row .skeleton-fish .fish-stripe {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: skeletonDraw 2.4s ease-out var(--draw-delay, 0s) infinite;
    stroke-width: 1.2;
}

.skeleton-row[data-skel="0"] .skeleton-fish { --draw-delay: 0s; }
.skeleton-row[data-skel="1"] .skeleton-fish { --draw-delay: 0.32s; }
.skeleton-row[data-skel="2"] .skeleton-fish { --draw-delay: 0.64s; }
.skeleton-row[data-skel="3"] .skeleton-fish { --draw-delay: 0.96s; }
.skeleton-row[data-skel="4"] .skeleton-fish { --draw-delay: 1.28s; }

@keyframes skeletonDraw {
    0%   { stroke-dashoffset: 800; opacity: 0.4; }
    35%  { stroke-dashoffset: 0; opacity: 0.95; }
    70%  { stroke-dashoffset: 0; opacity: 0.95; }
    100% { stroke-dashoffset: 800; opacity: 0.35; }
}

.skeleton-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(255,252,245,0.7) 50%,
        transparent 60%);
    background-size: 220% 100%;
    background-position: -120% 0;
    animation: shimmerSweep 3.6s ease-in-out var(--shimmer-delay, 0s) infinite;
    mix-blend-mode: overlay;
}

.skeleton-row[data-skel="0"] .skeleton-shimmer { --shimmer-delay: 0.2s; }
.skeleton-row[data-skel="1"] .skeleton-shimmer { --shimmer-delay: 0.55s; }
.skeleton-row[data-skel="2"] .skeleton-shimmer { --shimmer-delay: 0.9s; }
.skeleton-row[data-skel="3"] .skeleton-shimmer { --shimmer-delay: 1.25s; }
.skeleton-row[data-skel="4"] .skeleton-shimmer { --shimmer-delay: 1.6s; }

@keyframes shimmerSweep {
    0%   { background-position: -120% 0; }
    60%  { background-position: 220% 0; }
    100% { background-position: 220% 0; }
}

.skeleton-caption {
    font-family: var(--serif-body);
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.5;
    color: var(--drift-teal);
    opacity: 0.94;
}

.skeleton-caption em { color: var(--twilight-plum); font-style: italic; }

/* ===== Station IV: The Specimen Drawer ===== */
.station-drawer { padding-top: 8svh; }

.drawer-grid {
    position: absolute;
    top: 22svh;
    left: 6vw;
    right: 6vw;
    bottom: 10svh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2vw 2vw;
}

.specimen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.6vw 1.4vw;
    gap: 0.8em;
}

.specimen-fish {
    color: var(--coral-bloom);
    margin-bottom: 0.4em;
    animation: swim 12s ease-in-out infinite alternate;
}

.specimen-tag {
    display: inline-block;
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--apricot-surf);
    border: 1px solid rgba(247,201,168,0.45);
    border-radius: 999px;
    padding: 4px 12px;
    background: rgba(255,252,245,0.4);
}

.specimen-note {
    font-family: var(--serif-body);
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.55;
    color: var(--drift-teal);
    max-width: 32ch;
}

.specimen-note em { color: var(--twilight-plum); font-style: italic; }

/* ===== Station V: The Tide ===== */
.station-tide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

.tide-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.tide-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 4svh 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.tide-track {
    display: inline-flex;
    align-items: center;
    gap: 1.1em;
    white-space: nowrap;
    will-change: transform;
    transform: translate3d(0,0,0);
}

.tide-word {
    font-family: var(--serif-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(72px, 12vw, 200px);
    line-height: 1;
    color: var(--twilight-plum);
    letter-spacing: 0.02em;
    padding: 0 0.2em;
}

.tide-word:nth-child(odd) em { color: var(--twilight-plum); }
.tide-word:nth-child(4n+1) em { color: var(--coral-bloom); }
.tide-word:nth-child(4n+3) em { color: var(--drift-teal); }

.tide-sep {
    font-family: var(--serif-display);
    font-size: clamp(48px, 8vw, 140px);
    color: var(--apricot-surf);
    opacity: 0.7;
    line-height: 1;
}

.tide-credit {
    text-align: center;
    margin-top: 2.4svh;
    font-family: var(--serif-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(14px, 1vw, 18px);
    letter-spacing: 0.04em;
    color: var(--drift-teal);
    opacity: 0.8;
}

.tide-butterfly {
    position: absolute;
    top: 16svh;
    right: 8vw;
    color: var(--coral-bloom);
    opacity: 0.55;
    animation: drifter 20s ease-in-out infinite alternate;
}

@keyframes drifter {
    0%   { transform: translate(0, 0) rotate(-2deg); }
    50%  { transform: translate(-30px, 14px) rotate(3deg); }
    100% { transform: translate(20px, -10px) rotate(-1deg); }
}

/* ===== Station VI: The Lighthouse ===== */
.station-lighthouse {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lighthouse-stage {
    position: relative;
    text-align: center;
    max-width: 64vw;
}

.lantern-dot {
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0 auto 4em;
    border-radius: 50%;
    background: radial-gradient(circle, var(--caustic-highlight) 0%, var(--apricot-surf) 60%, transparent 100%);
    box-shadow: 0 0 36px 8px rgba(247,201,168,0.55);
    animation: dotPulse 3.2s ease-in-out infinite alternate;
}

@keyframes dotPulse {
    0%   { transform: scale(0.85); box-shadow: 0 0 24px 4px rgba(247,201,168,0.35); }
    100% { transform: scale(1.12); box-shadow: 0 0 56px 16px rgba(247,201,168,0.7); }
}

.closing-line {
    font-family: var(--serif-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(32px, 4vw, 64px);
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--twilight-plum);
}

.closing-line em { font-style: italic; }

.closing-credit {
    display: block;
    margin-top: 3em;
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--apricot-surf);
}

.lighthouse-seahorse {
    position: absolute;
    bottom: -20svh;
    right: -8vw;
    color: var(--coral-bloom);
    opacity: 0.4;
    animation: swim 14s ease-in-out infinite alternate;
}

/* ===== Progress reef ===== */
.progress-reef {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 18px;
    z-index: 100;
    padding: 8px 16px;
    background: rgba(255,252,245,0.36);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    border: 1px solid rgba(255,252,245,0.55);
}

.reef-bump {
    position: relative;
    width: 22px;
    height: 14px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: none;
    appearance: none;
}

@media (pointer: coarse) {
    .reef-bump { cursor: pointer; }
}

.reef-bump::before {
    content: "";
    position: absolute;
    inset: 2px 2px 4px 2px;
    border: 1.2px solid var(--apricot-surf);
    border-radius: 50% 50% 30% 30%;
    background: transparent;
    transition: background 360ms ease, border-color 360ms ease, transform 360ms ease;
}

.reef-bump.is-passed::before {
    background: var(--lantern-cream);
    border-color: var(--apricot-surf);
}

.reef-bump.is-active::before {
    background: radial-gradient(circle, var(--caustic-highlight) 0%, var(--apricot-surf) 70%);
    border-color: var(--coral-bloom);
    transform: scale(1.18);
    box-shadow: 0 0 12px rgba(247,201,168,0.7);
}

.reef-label {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--drift-teal);
    opacity: 0;
    transition: opacity 280ms ease;
    text-transform: uppercase;
    pointer-events: none;
}

.reef-bump:hover .reef-label,
.reef-bump.is-active .reef-label { opacity: 0.95; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }

    .cursor-shrimp { display: none; }
    html, body { cursor: auto; }
}

/* ===== Narrow viewport adjustments ===== */
@media (max-width: 880px) {
    .reef-cards {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        overflow-y: auto;
        gap: 1.4vh;
        top: 18svh;
        bottom: 8svh;
    }
    .card-tall, .card-mid, .card-short { align-self: stretch; margin: 0; }

    .logbook { grid-template-columns: 1fr; }
    .logbook-stitch { display: none; }
    .logbook-page.page-left { display: none; }

    .drawer-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .ornament { display: none; }

    .skeleton-row { grid-template-columns: 120px 1fr; }
    .skeleton-shimmer { width: 120px; }
}