:root {
    --harbor: #071C24;
    --water: #0E3442;
    --glass: #D8E8E4;
    --copper: #1F6F62;
    --sodium: #F4C64B;
    --vermillion: #E14B32;
    --rust: #8A4B2E;
    --cyan: #73E6D3;
    --ivory: #F2E6CC;
    --serif: "Instrument Serif", serif;
    --body: "Bricolage Grotesque", sans-serif;
    --label: "Chivo", sans-serif;
}

* { box-sizing: border-box; }

html {
    background: var(--harbor);
    color: var(--glass);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--body);
    overflow-x: hidden;
    background:
        radial-gradient(circle at 14% 8%, rgba(115, 230, 211, .11), transparent 28rem),
        linear-gradient(180deg, var(--harbor), #041016 44%, var(--water));
    cursor: none;
}

body.lens-raised .water-route,
body.lens-raised .lens-route,
.deck.is-visible .lens-route { stroke-dashoffset: 0; opacity: .88; }

.inspection-cursor {
    position: fixed;
    z-index: 80;
    width: 220px;
    height: 220px;
    pointer-events: none;
    border-radius: 50%;
    opacity: .72;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(115, 230, 211, .24), rgba(115, 230, 211, .08) 34%, transparent 68%);
    mix-blend-mode: screen;
    filter: blur(4px);
}

.tower-gauge {
    position: fixed;
    right: 1.35rem;
    top: 1.35rem;
    z-index: 60;
    width: 104px;
    color: var(--sodium);
    font-family: var(--label);
    text-align: center;
    letter-spacing: .16em;
    font-size: .58rem;
}

.gauge-face {
    position: relative;
    height: 104px;
    border: 1px solid rgba(244, 198, 75, .46);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(7, 28, 36, .86), rgba(31, 111, 98, .24));
    box-shadow: inset 0 0 24px rgba(115, 230, 211, .1), 0 0 24px rgba(7, 28, 36, .7);
}

.gauge-needle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 42px;
    background: var(--vermillion);
    transform-origin: 50% 100%;
    transform: translate(-50%, -100%) rotate(0deg);
    transition: transform .5s ease;
    box-shadow: 0 0 12px rgba(225, 75, 50, .7);
}

.gauge-mark { position: absolute; font-size: .52rem; color: var(--glass); }
.mark-zero { left: 44%; top: 5px; }
.mark-manifest { right: 17px; top: 25px; }
.mark-crane { right: 17px; bottom: 23px; }
.mark-lens { left: 45%; bottom: 5px; }
.mark-hold { left: 14px; bottom: 24px; }
.mark-dawn { left: 14px; top: 25px; }

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

h1, h2, h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    line-height: .9;
}

h1 { font-size: clamp(4.2rem, 13vw, 13.5rem); letter-spacing: -.055em; }
h2 { font-size: clamp(3.3rem, 8vw, 8.8rem); letter-spacing: -.045em; }
h3 { font-size: clamp(2rem, 4vw, 4rem); }
p { font-size: clamp(1rem, 1.35vw, 1.35rem); line-height: 1.45; }

.cargo-tag, .port-code {
    font-family: var(--label);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sodium);
}

.berth-zero {
    display: grid;
    align-items: end;
    background:
        linear-gradient(180deg, rgba(7, 28, 36, .2), rgba(7, 28, 36, .95) 72%),
        radial-gradient(circle at 72% 17%, rgba(244, 198, 75, .13), transparent 16rem),
        linear-gradient(120deg, #030b0f, var(--harbor) 55%, #092631);
}

.harbor-sky, .route-watermap, .route-field, .dawn-routes { position: absolute; inset: 0; z-index: -2; }
.crane-lamp { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--sodium); box-shadow: 0 0 32px 12px rgba(244, 198, 75, .24); }
.lamp-one { left: 13%; top: 28%; } .lamp-two { left: 68%; top: 18%; } .lamp-three { left: 84%; top: 34%; }
.crane-shadow { position: absolute; background: rgba(216, 232, 228, .12); transform-origin: bottom; clip-path: polygon(0 0, 100% 0, 88% 8%, 12% 8%); }
.crane-left { left: 9%; top: 22%; width: 36%; height: 15px; transform: rotate(-16deg); }
.crane-right { right: -2%; top: 30%; width: 44%; height: 13px; transform: rotate(12deg); }
.crane-shadow::after { content: ""; position: absolute; right: 7%; top: 8px; width: 2px; height: 130px; background: rgba(216, 232, 228, .12); }

.lens-beam {
    position: absolute;
    inset: -22% -25%;
    z-index: 1;
    background: conic-gradient(from 18deg at 50% 50%, transparent 0deg, rgba(115, 230, 211, .18) 12deg, transparent 29deg, transparent 360deg);
    animation: beamSweep 18s linear infinite;
    mix-blend-mode: screen;
}

.water-route, .lens-route {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2.5;
    stroke-dasharray: 980;
    stroke-dashoffset: 980;
    opacity: .18;
    filter: drop-shadow(0 0 9px rgba(115, 230, 211, .65));
    transition: stroke-dashoffset 2.2s ease, opacity 1s ease;
}

.fog {
    position: absolute;
    left: -15%;
    width: 130%;
    background: linear-gradient(90deg, transparent, rgba(216, 232, 228, .12), rgba(216, 232, 228, .04), transparent);
    filter: blur(18px);
    z-index: 3;
    animation: fogDrift 16s ease-in-out infinite alternate;
}
.fog-low { bottom: 10%; height: 24%; }
.fog-mid { top: 42%; height: 18%; animation-duration: 22s; animation-direction: alternate-reverse; }

.wet-quay {
    position: relative;
    z-index: 5;
    max-width: 1180px;
    padding-top: 34vh;
    color: var(--glass);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 20px 42px rgba(0, 0, 0, .9);
}
.wet-quay h1 {
    font-family: var(--label);
    font-weight: 700;
    line-height: .85;
    text-transform: lowercase;
    color: transparent;
    -webkit-text-stroke: 2px rgba(216, 232, 228, .75);
    opacity: .86;
    filter: url(#none);
}
.deck-note { max-width: 650px; color: rgba(216, 232, 228, .78); }
.observer-action {
    margin-top: 1.5rem;
    border: 1px solid rgba(115, 230, 211, .55);
    background: rgba(7, 28, 36, .56);
    color: var(--cyan);
    font-family: var(--label);
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 1rem 1.35rem;
    box-shadow: inset 0 0 22px rgba(115, 230, 211, .08), 0 0 30px rgba(115, 230, 211, .1);
    cursor: none;
}

.manifest-room {
    background: radial-gradient(circle at 45% 38%, rgba(216, 232, 228, .09), transparent 32rem), linear-gradient(145deg, #08202a, #031016 76%);
}
.desk-grain { position: absolute; inset: 0; opacity: .22; background-image: repeating-linear-gradient(103deg, rgba(242, 230, 204, .05) 0 1px, transparent 1px 11px); }
.rope-line { position: absolute; height: 12px; width: 120%; left: -10%; background: repeating-linear-gradient(90deg, var(--rust) 0 10px, #5a2e1d 10px 20px); border-radius: 20px; box-shadow: 0 4px 18px rgba(0,0,0,.45); }
.rope-one { top: 28%; transform: rotate(-11deg); }
.rope-two { bottom: 22%; transform: rotate(8deg); }

.manifest-sheet {
    position: absolute;
    width: min(540px, 78vw);
    color: var(--harbor);
    background:
        linear-gradient(135deg, rgba(138, 75, 46, .13), transparent 35%),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(14, 52, 66, .14) 32px),
        var(--ivory);
    padding: clamp(1.4rem, 3vw, 2.7rem);
    box-shadow: 0 24px 60px rgba(0,0,0,.48), -12px 10px 0 rgba(216, 232, 228, .16);
    clip-path: polygon(0 2%, 97% 0, 100% 91%, 92% 100%, 5% 98%, 0 88%);
}
.sheet-primary { left: 10%; top: 13%; transform: rotate(-4deg); z-index: 3; }
.sheet-secondary { right: 9%; top: 24%; transform: rotate(6deg); z-index: 2; background-color: #D8E8E4; }
.sheet-tertiary { left: 37%; bottom: 8%; transform: rotate(-2deg); z-index: 4; max-width: 430px; opacity: .2; transition: opacity .35s ease, transform .35s ease; }
.reveal-zone.is-inspecting .hidden-evidence { opacity: .92; transform: rotate(-2deg) translateY(-16px); }
.manifest-sheet h2, .manifest-sheet h3 { color: var(--harbor); }
.manifest-sheet .cargo-tag { color: var(--rust); }
.stamp { display: inline-block; margin-top: 1rem; padding: .55rem .8rem; border: 4px solid var(--vermillion); color: var(--vermillion); font-family: var(--label); letter-spacing: .16em; transform: rotate(-10deg); }
.punched-hole { position: absolute; top: 18px; right: 28px; width: 26px; height: 26px; border-radius: 50%; background: var(--water); box-shadow: inset 0 0 6px rgba(0,0,0,.6); }
.string-card { position: absolute; z-index: 5; padding: .75rem 1rem; background: var(--harbor); color: var(--sodium); border: 1px dashed rgba(244,198,75,.65); font-family: var(--label); font-size: .7rem; letter-spacing: .18em; }
.card-origin { left: 5%; bottom: 24%; transform: rotate(8deg); } .card-risk { right: 15%; bottom: 15%; transform: rotate(-6deg); color: var(--vermillion); }

.crane-cutaway { background: linear-gradient(180deg, var(--water), #061821 72%, #030c10); }
.cutaway-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(216,232,228,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(216,232,228,.05) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(180deg, transparent, black 22%, black 78%, transparent); }
.gantry { position: absolute; border-top: 10px solid rgba(216,232,228,.34); border-left: 8px solid rgba(216,232,228,.26); border-right: 8px solid rgba(216,232,228,.26); }
.gantry span { position: absolute; top: -54px; left: 15%; width: 90%; height: 8px; background: rgba(244,198,75,.55); transform: rotate(-12deg); transform-origin: left; }
.gantry-a { left: 6%; top: 21%; width: 45%; height: 60%; }
.gantry-b { right: 2%; top: 30%; width: 38%; height: 52%; opacity: .65; }
.container-stack { position: absolute; display: grid; grid-template-columns: repeat(3, 110px); gap: 8px; }
.container-stack i { height: 54px; background: var(--copper); border: 1px solid rgba(216,232,228,.18); box-shadow: inset 0 0 0 6px rgba(7,28,36,.17); }
.container-stack i:nth-child(2n) { background: var(--rust); } .container-stack i:nth-child(3n) { background: #0E3442; }
.stack-one { left: 8%; bottom: 11%; } .stack-two { right: 10%; bottom: 21%; grid-template-columns: repeat(2, 120px); }
.rail-line { position: absolute; bottom: 12%; left: 0; width: 100%; height: 6px; background: repeating-linear-gradient(90deg, var(--glass) 0 44px, transparent 44px 78px); opacity: .32; }
.inspection-hatch { position: absolute; background: rgba(7,28,36,.76); border: 1px solid rgba(115,230,211,.42); color: var(--glass); box-shadow: 0 18px 54px rgba(0,0,0,.45); }
.hatch-one { left: 14%; top: 16%; max-width: 600px; padding: 2rem; clip-path: polygon(0 0, 92% 0, 100% 16%, 100% 100%, 8% 100%, 0 84%); }
.hatch-two { right: 9%; top: 47%; max-width: 300px; padding: 1.2rem; color: var(--sodium); transform: rotate(3deg); }

.route-lens { background: radial-gradient(circle at 50% 50%, rgba(115,230,211,.12), transparent 30rem), linear-gradient(160deg, #020a0d, var(--harbor)); }
.route-field svg, .dawn-routes svg { width: 100%; height: 100%; }
.route-note { position: absolute; color: var(--cyan); font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; opacity: .22; transition: opacity .4s ease; }
.note-one { left: 18%; top: 31%; } .note-two { right: 18%; top: 44%; color: var(--vermillion); } .note-three { left: 52%; bottom: 22%; color: var(--sodium); }
.reveal-zone.is-inspecting .route-note, .route-lens.is-visible .route-note { opacity: .9; }
.fresnel { position: absolute; left: 50%; top: 50%; width: min(74vw, 720px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(216,232,228,.35); background: radial-gradient(circle, rgba(216,232,228,.18), rgba(115,230,211,.04) 55%, transparent 70%); box-shadow: inset 0 0 70px rgba(115,230,211,.16), 0 0 80px rgba(0,0,0,.55); animation: lensTurn 24s linear infinite; }
.fresnel span { position: absolute; inset: calc(var(--i, 0) * 7%); border-radius: 50%; border: 1px solid rgba(216,232,228,.22); }
.fresnel span:nth-child(1) { --i: 1; } .fresnel span:nth-child(2) { --i: 2; } .fresnel span:nth-child(3) { --i: 3; } .fresnel span:nth-child(4) { --i: 4; } .fresnel span:nth-child(5) { --i: 5; }
.fresnel::after { content: ""; position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent, rgba(115,230,211,.22), transparent 33%); border-radius: 50%; mix-blend-mode: screen; }
.lens-copy { position: absolute; left: 7%; bottom: 9%; width: min(510px, 86vw); }

.hold-below { background: radial-gradient(ellipse at center, rgba(14,52,66,.62), #020709 74%); }
.hold-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, transparent 0 22%, rgba(0,0,0,.72) 65%); }
.suspended-crate { position: absolute; width: 170px; height: 122px; background: linear-gradient(135deg, var(--rust), #4a2418); border: 1px solid rgba(242,230,204,.2); box-shadow: inset 0 0 0 9px rgba(7,28,36,.18), 0 28px 70px rgba(0,0,0,.68); display: grid; place-items: center; color: var(--ivory); font-family: var(--label); letter-spacing: .18em; transition: transform .25s ease, color .25s ease, box-shadow .25s ease; }
.suspended-crate::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 42vh; background: rgba(216,232,228,.18); }
.suspended-crate::after { content: attr(data-mark); position: absolute; left: 50%; top: 103%; transform: translateX(-50%); width: 190px; color: var(--cyan); opacity: 0; font-size: .72rem; text-align: center; text-transform: uppercase; transition: opacity .25s ease; }
.suspended-crate:hover, .suspended-crate.is-lit { transform: translateY(-12px) rotate(1deg); color: var(--sodium); box-shadow: inset 0 0 0 9px rgba(7,28,36,.18), 0 0 46px rgba(115,230,211,.35); }
.suspended-crate:hover::after, .suspended-crate.is-lit::after { opacity: 1; }
.crate-one { left: 13%; top: 22%; transform: rotate(-4deg); } .crate-two { left: 42%; top: 15%; transform: rotate(3deg); background: linear-gradient(135deg, var(--copper), #10392f); } .crate-three { right: 12%; top: 31%; transform: rotate(-2deg); } .crate-four { left: 57%; bottom: 17%; transform: rotate(5deg); background: linear-gradient(135deg, #0E3442, #061720); }
.hold-copy { position: absolute; left: 7%; bottom: 8%; width: min(560px, 84vw); }
.crate-readout { margin-top: 1.25rem; display: inline-block; border: 1px solid rgba(225,75,50,.58); color: var(--vermillion); padding: .8rem 1rem; font-family: var(--label); letter-spacing: .17em; text-transform: uppercase; font-size: .72rem; }

.dawn-ledger { display: grid; place-items: center; background: linear-gradient(180deg, #D8E8E4, #F2E6CC 57%, rgba(244,198,75,.48)); color: var(--harbor); }
.dawn-ledger::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); animation: fogDrift 18s ease-in-out infinite alternate; }
.dawn-routes path { fill: none; stroke: var(--copper); stroke-width: 1.4; opacity: .35; stroke-dasharray: 8 15; }
.observer-log { position: relative; max-width: 780px; padding: clamp(2rem, 5vw, 4rem); background: rgba(242,230,204,.62); border: 1px solid rgba(14,52,66,.22); box-shadow: 0 28px 80px rgba(14,52,66,.22); clip-path: polygon(3% 0, 100% 2%, 97% 100%, 0 96%); }
.observer-log .cargo-tag { color: var(--rust); }
.closing-line { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 3rem); line-height: 1.05; color: var(--copper); }
.ledger-seal { position: absolute; right: 12%; bottom: 14%; width: 150px; height: 150px; border: 5px double var(--vermillion); border-radius: 50%; display: grid; place-items: center; text-align: center; color: var(--vermillion); font-family: var(--label); font-size: .8rem; letter-spacing: .16em; transform: rotate(-14deg); opacity: .72; }

@keyframes beamSweep { to { transform: rotate(360deg); } }
@keyframes fogDrift { from { transform: translateX(-7%); } to { transform: translateX(7%); } }
@keyframes lensTurn { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 760px) {
    body { cursor: auto; }
    .inspection-cursor { display: none; }
    .tower-gauge { transform: scale(.78); transform-origin: top right; }
    .deck { padding: 1.35rem; }
    .wet-quay { padding-top: 42vh; }
    .manifest-sheet { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 1rem 0; width: 88vw; }
    .sheet-primary, .sheet-secondary, .sheet-tertiary { transform: rotate(0); }
    .string-card { display: none; }
    .container-stack { transform: scale(.7); transform-origin: left bottom; }
    .stack-two { display: none; }
    .inspection-hatch { left: 1.3rem; right: 1.3rem; width: auto; }
    .hatch-two { top: auto; bottom: 22%; }
    .fresnel { width: 110vw; }
    .suspended-crate { width: 124px; height: 92px; }
    .crate-one { left: 7%; } .crate-two { left: 53%; } .crate-three { right: 8%; top: 45%; } .crate-four { left: 40%; }
    .ledger-seal { right: 6%; bottom: 5%; width: 110px; height: 110px; }
}