/* ==========================================================================
   nlbd.dev — warm aquarium, organic flow, retro display
   Palette: #3D2E1E #F4EBD9 #B8D4C8 #D4582A #1A3A2A #C44B3F #E8D5B8 #E8A840
   Fonts:   Righteous (display), Nunito Sans (body), Overpass Mono (accent)
   ========================================================================== */

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

:root {
    --bg-light: #F4EBD9;
    --bg-light-2: #E8D5B8;
    --bg-dark: #1A3A2A;
    --text: #3D2E1E;
    --text-soft: #8A7560;
    --cream: #F4EBD9;
    --cinnabar: #D4582A;
    --amber: #E8A840;
    --jade: #B8D4C8;
    --coral: #C44B3F;
    --umber: #3D2E1E;
    --ease-water: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html { scroll-behavior: smooth; }

body {
    font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: var(--text);
    background: var(--bg-light);
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Caustic background — overlapping radial gradients drifting slowly
   -------------------------------------------------------------------------- */
.caustic-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(232, 213, 184, 0.55) 0%, transparent 38%),
        radial-gradient(circle at 80% 60%, rgba(232, 168, 64, 0.18) 0%, transparent 42%),
        radial-gradient(circle at 50% 80%, rgba(184, 212, 200, 0.22) 0%, transparent 40%),
        radial-gradient(circle at 70% 15%, rgba(232, 213, 184, 0.45) 0%, transparent 36%);
    animation: caustic-drift 30s ease-in-out infinite alternate;
    mix-blend-mode: multiply;
}

@keyframes caustic-drift {
    0%   { transform: scale(1) translate(0, 0); }
    50%  { transform: scale(1.12) translate(2%, -1%); }
    100% { transform: scale(1.05) translate(-1.5%, 2%); }
}

main { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Top navigation — minimal, compresses on scroll
   -------------------------------------------------------------------------- */
.topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(244, 235, 217, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: padding 380ms var(--ease-water), background 380ms var(--ease-water), opacity 380ms var(--ease-water);
}

.topnav .nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding 380ms var(--ease-water);
}

.topnav.compressed .nav-inner {
    padding: 8px 48px;
}
.topnav.compressed {
    background: rgba(244, 235, 217, 0.55);
    opacity: 0.55;
}
.topnav.compressed:hover {
    opacity: 1;
    background: rgba(244, 235, 217, 0.92);
}

.topnav.surface {
    animation: nav-bounce 520ms var(--ease-water);
    opacity: 1;
    background: rgba(244, 235, 217, 0.92);
}

@keyframes nav-bounce {
    0%   { transform: translateY(-4px); }
    60%  { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

.nav-mark {
    font-family: "Righteous", system-ui, sans-serif;
    font-size: 22px;
    color: var(--cinnabar);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 32px;
}
.nav-links a {
    font-family: "Overpass Mono", monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    text-decoration: none;
    transition: color 280ms var(--ease-water);
}
.nav-links a:hover {
    color: var(--cinnabar);
}

/* --------------------------------------------------------------------------
   Tank base — each section is a tank
   -------------------------------------------------------------------------- */
.tank {
    position: relative;
    min-height: 92vh;
    padding: 144px 48px 89px;
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden;
}

.tank.dark {
    background: var(--bg-dark);
    max-width: 100%;
    color: var(--cream);
    margin: 0;
    padding-left: max(48px, calc((100vw - 1440px) / 2 + 48px));
    padding-right: max(48px, calc((100vw - 1440px) / 2 + 48px));
}

.tank.dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(232, 168, 64, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 70% 70%, rgba(184, 212, 200, 0.05) 0%, transparent 45%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Tank 1 — Opening wordmark
   -------------------------------------------------------------------------- */
.tank-open {
    min-height: 100vh;
    padding-top: 180px;
}

.open-stage {
    position: relative;
    text-align: center;
    padding: 89px 0 144px;
}

.wordmark {
    font-family: "Righteous", system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(56px, 9vw, 112px);
    color: var(--cinnabar);
    letter-spacing: 0.02em;
    line-height: 1;
    opacity: 0;
    animation: fade-in-slow 1800ms var(--ease-water) 200ms forwards;
}

.subline {
    margin-top: 34px;
    font-size: 18px;
    color: var(--text-soft);
    font-style: italic;
    opacity: 0;
    animation: fade-in-slow 1400ms var(--ease-water) 1200ms forwards;
}

@keyframes fade-in-slow {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lone-fish-wrap {
    position: absolute;
    top: 38%;
    left: -120px;
    width: 80px;
    height: 40px;
    opacity: 0;
    animation:
        lone-fish-enter 1200ms var(--ease-water) 1800ms forwards,
        lone-fish-swim 24s linear 3000ms infinite;
}

.lone-fish {
    width: 100%;
    height: 100%;
    animation: drift-tail 0.6s ease-in-out infinite alternate;
}

@keyframes lone-fish-enter {
    from { opacity: 0; left: -120px; }
    to   { opacity: 1; left: 18%; }
}

@keyframes lone-fish-swim {
    0%   { transform: translateX(0) translateY(0); }
    25%  { transform: translateX(20vw) translateY(-15px); }
    50%  { transform: translateX(40vw) translateY(8px); }
    75%  { transform: translateX(60vw) translateY(-12px); }
    100% { transform: translateX(80vw) translateY(0); }
}

@keyframes drift-tail {
    from { transform: rotate(-2deg); }
    to   { transform: rotate(2deg); }
}

/* --------------------------------------------------------------------------
   Display + body type rules
   -------------------------------------------------------------------------- */
.display {
    font-family: "Righteous", system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 5.4vw, 72px);
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--cinnabar);
    margin-bottom: 34px;
}

.display.dark { color: var(--amber); }

.kicker {
    font-family: "Overpass Mono", monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    display: inline-block;
    margin-bottom: 21px;
}
.kicker.dark { color: var(--jade); }

.lede {
    font-size: 19px;
    line-height: 1.75;
    color: var(--text);
    max-width: 56ch;
    margin-bottom: 34px;
}
.lede.dark { color: var(--cream); }

/* --------------------------------------------------------------------------
   Drift-grid zones (organic-flow, not a strict grid)
   -------------------------------------------------------------------------- */
.zone {
    position: relative;
    margin-bottom: 89px;
}

.left-current  { width: 52%; margin-left: 4%;   margin-right: auto; }
.center-pool   { width: 48%; margin-left: 28%;  margin-right: auto; }
.right-current { width: 38%; margin-left: 56%;  margin-right: 4%; }

@media (max-width: 900px) {
    .left-current, .center-pool, .right-current {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

.float-art {
    display: flex;
    justify-content: center;
    margin-top: 55px;
    margin-bottom: 55px;
}

.big-icon {
    width: 160px;
    height: 160px;
    animation: float-bob 8s ease-in-out infinite;
}

@keyframes float-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(1deg); }
}

/* Fish-bullet list */
.fish-list {
    list-style: none;
    margin-top: 21px;
}
.fish-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 13px;
    font-size: 17px;
    line-height: 1.7;
}
.fish-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 12px;
    height: 6px;
    background: var(--cinnabar);
    border-radius: 70% 10% 70% 10%;
    transform: rotate(-8deg);
}
.fish-list li::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    width: 4px;
    height: 6px;
    background: var(--cinnabar);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms var(--ease-water), transform 600ms var(--ease-water);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Zone dividers — drifting fish silhouettes
   -------------------------------------------------------------------------- */
.zone-divider {
    position: relative;
    height: 89px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    overflow: hidden;
}

.divider-fish {
    width: 28px;
    height: 14px;
    opacity: 0.7;
    animation: drift 10s ease-in-out infinite;
}
.divider-fish:nth-child(2) { animation-duration: 13s; animation-delay: -3s; }

@keyframes drift {
    0%   { transform: translateX(0) translateY(0); }
    50%  { transform: translateX(15px) translateY(-8px); }
    100% { transform: translateX(0) translateY(0); }
}

/* Section gradient transitions (no hard edges) */
.zone-transition {
    height: 80px;
    width: 100%;
}
.dark-to-light {
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-light) 100%);
}
.light-to-dark {
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-dark) 100%);
}

/* --------------------------------------------------------------------------
   Decorative fish scatter (background drift)
   -------------------------------------------------------------------------- */
.scatter {
    position: absolute;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 55px;
    opacity: 0.4;
}
.scatter-fish {
    width: 22px;
    height: 12px;
    animation: drift 11s ease-in-out infinite;
    cursor: pointer;
    pointer-events: auto;
}
.scatter-fish:nth-child(2) { animation-duration: 9s;  animation-delay: -2s; width: 16px; height: 9px; }
.scatter-fish:nth-child(3) { animation-duration: 13s; animation-delay: -5s; width: 26px; height: 14px; }

.scatter-1 { top: 24%; right: 6%; }
.scatter-2 { top: 14%; right: 9%; }
.scatter-3 { bottom: 12%; left: 6%; }

.scatter-fish.darting {
    animation: dart-away 320ms var(--ease-water) forwards;
}
@keyframes dart-away {
    0%   { transform: translateX(0); opacity: 0.4; }
    25%  { transform: translateX(-5px); }
    50%  { transform: translateX(8px); }
    100% { transform: translateX(220px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Tank 3 — Work cards
   -------------------------------------------------------------------------- */
.tank-work {
    padding-top: 144px;
    padding-bottom: 144px;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 55px 89px;
    margin-top: 55px;
    padding: 0 4%;
}
@media (max-width: 760px) {
    .work-grid { grid-template-columns: 1fr; gap: 55px; }
}

.work-card {
    position: relative;
    padding: 34px 0;
    border-top: 1px solid rgba(232, 213, 184, 0.18);
    transition: transform 380ms var(--ease-water);
}
.work-card:hover {
    transform: translateY(-4px);
}
.work-card:nth-child(odd)  { margin-top: 21px; }
.work-card:nth-child(even) { margin-top: 55px; }

.card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 21px;
    animation: float-bob 7s ease-in-out infinite;
}
.work-card:nth-child(2) .card-icon { animation-duration: 9s;  animation-delay: -1s; }
.work-card:nth-child(3) .card-icon { animation-duration: 11s; animation-delay: -2s; }
.work-card:nth-child(4) .card-icon { animation-duration: 8s;  animation-delay: -3s; }

.card-title {
    font-family: "Righteous", system-ui, sans-serif;
    font-size: 32px;
    color: var(--cream);
    letter-spacing: 0.02em;
    margin: 8px 0 13px;
}

.card-body {
    color: rgba(244, 235, 217, 0.78);
    font-size: 16.5px;
    line-height: 1.7;
    max-width: 42ch;
}

/* --------------------------------------------------------------------------
   Bubbles in dark tanks
   -------------------------------------------------------------------------- */
.bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.bubble {
    position: absolute;
    bottom: -20px;
    width: 6px;
    height: 6px;
    background: var(--jade);
    border-radius: 50%;
    opacity: 0.25;
    animation: rise 18s linear infinite;
}
.bubble:nth-child(1) { left: 6%;  width: 5px; height: 5px; animation-duration: 22s; animation-delay: -3s; }
.bubble:nth-child(2) { left: 14%; width: 7px; height: 7px; animation-duration: 16s; animation-delay: -8s; }
.bubble:nth-child(3) { left: 28%; width: 4px; height: 4px; animation-duration: 24s; animation-delay: -1s; }
.bubble:nth-child(4) { left: 48%; width: 6px; height: 6px; animation-duration: 19s; animation-delay: -5s; }
.bubble:nth-child(5) { left: 72%; width: 5px; height: 5px; animation-duration: 21s; animation-delay: -10s; }
.bubble:nth-child(6) { left: 86%; width: 7px; height: 7px; animation-duration: 17s; animation-delay: -2s; }
.bubble:nth-child(7) { left: 92%; width: 4px; height: 4px; animation-duration: 23s; animation-delay: -7s; }

@keyframes rise {
    0%   { transform: translateY(0); opacity: 0.3; }
    20%  { opacity: 0.35; }
    100% { transform: translateY(-120vh); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Tank 4 — Thoughts stream
   -------------------------------------------------------------------------- */
.thoughts-stream {
    margin-top: 34px;
    padding: 0 6%;
    max-width: 1100px;
}

.thought {
    position: relative;
    padding: 34px 0 34px 55px;
    border-left: 1px solid rgba(138, 117, 96, 0.25);
    margin-left: 6%;
}
.thought::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 42px;
    width: 13px;
    height: 13px;
    background: var(--cinnabar);
    border-radius: 50% 10% 50% 10%;
    transform: rotate(-12deg);
}
.thought:nth-child(odd)  { margin-left: 12%; }
.thought:nth-child(even) { margin-left: 4%;  }

.thought-meta {
    font-family: "Overpass Mono", monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
}

.thought-title {
    font-family: "Righteous", system-ui, sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: var(--umber);
    letter-spacing: 0.02em;
    margin: 8px 0 13px;
}

.thought p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--text);
    max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Tank 5 — Hello / contact
   -------------------------------------------------------------------------- */
.tank-hello {
    padding-top: 144px;
    padding-bottom: 144px;
}

.hello-stage {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 6%;
}

.hello-form {
    margin-top: 55px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.field label {
    font-family: "Overpass Mono", monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--jade);
}

.field input,
.field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(184, 212, 200, 0.35);
    padding: 13px 4px;
    color: var(--cream);
    font-family: "Nunito Sans", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    outline: none;
    resize: none;
    transition: border-color 320ms var(--ease-water), background 320ms var(--ease-water);
}
.field input::placeholder,
.field textarea::placeholder {
    color: rgba(244, 235, 217, 0.4);
}

.field input:focus,
.field textarea:focus {
    border-bottom-color: var(--amber);
    background: rgba(232, 168, 64, 0.04);
}

.field-error {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    color: var(--coral);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 280ms var(--ease-water), max-height 280ms var(--ease-water);
}
.field.invalid .field-error {
    opacity: 1;
    max-height: 40px;
}

.field.invalid input,
.field.invalid textarea {
    border-bottom-color: var(--coral);
    animation: shake 400ms var(--ease-water);
}

@keyframes shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-5px); }
    40%  { transform: translateX(5px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

.send-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 14px 26px;
    background: var(--amber);
    color: var(--bg-dark);
    font-family: "Overpass Mono", monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 280ms var(--ease-water), background 280ms var(--ease-water);
}
.send-btn:hover {
    background: var(--cinnabar);
    color: var(--cream);
    transform: translateY(-2px);
}
.send-btn:hover .send-fish path { fill: var(--cream); }

.send-btn.shaking {
    animation: shake 400ms var(--ease-water);
}

.send-fish {
    width: 22px;
    height: 11px;
    transition: transform 380ms var(--ease-water);
}
.send-btn:hover .send-fish {
    transform: translateX(4px);
}

.form-status {
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    color: var(--jade);
    min-height: 24px;
    opacity: 0;
    transition: opacity 320ms var(--ease-water);
}
.form-status.visible { opacity: 1; }
.form-status.success { color: var(--amber); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--bg-light-2);
    padding: 55px 48px;
    border-top: 1px solid rgba(138, 117, 96, 0.18);
}

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 21px;
    flex-wrap: wrap;
}

.foot-mark {
    font-family: "Righteous", system-ui, sans-serif;
    font-size: 18px;
    color: var(--cinnabar);
}

.foot-line,
.foot-meta {
    font-family: "Overpass Mono", monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   Responsive trim
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .tank { padding: 89px 24px 55px; }
    .topnav .nav-inner { padding: 16px 20px; }
    .nav-links { gap: 18px; }
    .nav-links a { font-size: 11px; }
    .lede { font-size: 17px; }
    .work-card:nth-child(odd),
    .work-card:nth-child(even) { margin-top: 0; }
    .thought,
    .thought:nth-child(odd),
    .thought:nth-child(even) { margin-left: 0; padding-left: 28px; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
}