/* =====================================================
   bada.casa  ---  The Dwelling Place of the Ocean
   Architectural seapunk / translucent-frost / timeline-vertical
   ===================================================== */

/* ----- Tokens ----- */
:root {
    --c-sea-glass-light: #B8D8D0;
    --c-tidal-teal:      #7EB8B0;
    --c-deep-current:    #2C5F5A;
    --c-abyssal-slate:   #1A3A36;
    --c-nacre-white:     #EDF5F3;
    --c-pressure-blue:   #3D7A8A;
    --c-foam-whisper:    #F4FAF8;
    --c-coral-blush:     #C4A882;
    --c-muted-teal:      #5A9E94;
    --c-deep-teal:       #4A9A8E;

    --f-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --f-heading: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --f-body:    "Libre Caslon Text", Georgia, serif;
    --f-mono:    "DM Mono", "Space Mono", ui-monospace, monospace;

    --pad-x: clamp(48px, 8vw, 120px);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background-color: var(--c-foam-whisper);
    color: var(--c-abyssal-slate);
    font-family: var(--f-body);
    font-size: clamp(15px, 1.2vw, 19px);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

/* ----- Ambient gradient (animated, behind everything) ----- */
.ambient-gradient {
    position: fixed;
    inset: 0;
    z-index: -10;
    background: linear-gradient(135deg,
        var(--c-sea-glass-light) 0%,
        var(--c-tidal-teal) 50%,
        var(--c-deep-teal) 100%);
    background-size: 300% 300%;
    animation: gradientDrift 45s ease-in-out infinite;
    opacity: 0.18;
}
@keyframes gradientDrift {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* ----- Caption (DM Mono) ----- */
.caption {
    display: inline-block;
    font-family: var(--f-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-muted-teal);
    opacity: 0.7;
}

/* ----- Dot navigation ----- */
.dot-nav {
    position: fixed;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 6px;
}
.dot-nav__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--c-tidal-teal);
    background: transparent;
    opacity: 0.5;
    transition: background 300ms ease-out, opacity 300ms ease-out, border-color 300ms ease-out, transform 300ms ease-out;
    display: block;
}
.dot-nav__dot.is-active {
    background: var(--c-deep-current);
    border-color: var(--c-deep-current);
    opacity: 1;
    transform: scale(1.15);
}

/* ----- Sections ----- */
.section {
    position: relative;
    padding: clamp(80px, 12vh, 140px) var(--pad-x);
    min-height: 80vh;
    z-index: 1;
}

/* ----- Vestibule ----- */
.section--vestibule {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pad-x);
    background-color: var(--c-foam-whisper);
}
.vestibule__frost {
    position: relative;
    z-index: 2;
    padding: clamp(48px, 8vw, 96px) clamp(32px, 6vw, 80px);
    background: rgba(237, 245, 243, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(126, 184, 176, 0.25);
    text-align: center;
    max-width: 920px;
    border-radius: 2px;
}
.caption--vestibule {
    display: block;
    margin-bottom: clamp(24px, 4vh, 40px);
}
.logotype {
    font-family: var(--f-display);
    font-weight: 200;
    font-variation-settings: "wght" 200, "wdth" 100, "opsz" 60;
    font-size: clamp(36px, 6vw, 80px);
    letter-spacing: 0.25em;
    color: var(--c-deep-current);
    line-height: 1.1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1500ms ease-out, transform 1500ms ease-out;
}
.logotype.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.vestibule__subtitle {
    display: block;
    margin-top: clamp(20px, 3vh, 32px);
    font-family: var(--f-body);
    font-style: italic;
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--c-muted-teal);
    letter-spacing: 0.04em;
}
.chevron {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 2;
    opacity: 0;
    transition: opacity 600ms ease-out 800ms;
    padding: 8px;
}
.chevron.is-visible {
    opacity: 1;
    animation: chevronBreathe 3s ease-in-out infinite;
}
@keyframes chevronBreathe {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* ----- Architectural blueprint backgrounds ----- */
.blueprint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.45;
}
.blueprint--vestibule { opacity: 0.30; }
.blueprint__path {
    stroke-dasharray: var(--len, 2000);
    stroke-dashoffset: var(--len, 2000);
    transition: stroke-dashoffset var(--draw-duration, 2500ms) ease-in-out var(--draw-delay, 0ms);
}
.is-drawn .blueprint__path,
.blueprint.is-drawn .blueprint__path {
    stroke-dashoffset: 0;
}

/* ----- Sine-wave divider ----- */
.sine-divider {
    height: 24px;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin: 0;
    pointer-events: none;
    background: transparent;
}
.sine-divider svg { display: block; }
.sine-path {
    stroke-dasharray: var(--len, 700);
    stroke-dashoffset: var(--len, 700);
    transition: stroke-dashoffset 1200ms ease-in-out;
    opacity: 0.6;
}
.sine-divider.is-drawn .sine-path { stroke-dashoffset: 0; }

/* ----- Room headers ----- */
.room-header {
    margin-bottom: clamp(32px, 5vh, 64px);
    max-width: 720px;
}
.room-header .caption {
    margin-bottom: 14px;
}
.room-title {
    font-family: var(--f-heading);
    font-weight: 500;
    font-size: clamp(22px, 3.5vw, 44px);
    letter-spacing: 0.08em;
    line-height: 1.25;
    color: var(--c-deep-current);
}
.room-intro {
    max-width: 640px;
    color: var(--c-abyssal-slate);
    margin-bottom: clamp(40px, 6vh, 72px);
}

/* ----- Tide Room ----- */
.section--tide {
    background-color: var(--c-nacre-white);
}
.tide__column {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 32px);
    position: relative;
    z-index: 2;
}
.tide__paragraph {
    font-family: var(--f-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--c-abyssal-slate);
}
.tide__paragraph strong {
    font-weight: 700;
    color: var(--c-deep-current);
}
.tide__rail {
    position: absolute;
    top: clamp(80px, 12vh, 140px);
    right: clamp(32px, 4vw, 80px);
    width: 60px;
    height: calc(100% - clamp(160px, 24vh, 280px));
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
}
.tide__rail-path {
    stroke-dasharray: var(--len, 1200);
    stroke-dashoffset: var(--len, 1200);
    transition: stroke-dashoffset 2800ms ease-in-out 200ms;
}
.is-drawn .tide__rail-path { stroke-dashoffset: 0; }
.tide__node {
    transform-origin: center;
    transition: transform 500ms ease-out, opacity 500ms ease-out, r 500ms ease-out;
    opacity: 0.5;
}
.tide__node.is-near {
    opacity: 1;
    r: 6;
}

/* ----- Pressure Chamber / Honeycomb ----- */
.section--pressure {
    background-color: var(--c-foam-whisper);
}
.section--pressure .blueprint--pressure { opacity: 0.4; }
.honeycomb {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 18px) clamp(16px, 2vw, 28px);
    max-width: 1100px;
    margin: 0 auto;
}
.hex {
    position: relative;
    aspect-ratio: 1 / 0.866;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(184, 216, 208, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background 400ms ease-out, transform 400ms ease-out;
    cursor: default;
}
.hex::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(126, 184, 176, 0.30);
    z-index: 0;
    transition: background 400ms ease-out;
}
.hex::after {
    content: "";
    position: absolute;
    inset: 2px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(244, 250, 248, 0.65);
    z-index: 0;
}
.hex__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(18px, 3vw, 36px) clamp(24px, 4vw, 48px);
    text-align: center;
}
.hex__index {
    font-family: var(--f-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--c-muted-teal);
    margin-bottom: 8px;
    opacity: 0.8;
}
.hex__title {
    font-family: var(--f-heading);
    font-weight: 500;
    font-size: clamp(15px, 1.4vw, 20px);
    letter-spacing: 0.06em;
    color: var(--c-deep-current);
    margin-bottom: 8px;
    line-height: 1.25;
}
.hex__body {
    font-family: var(--f-body);
    font-size: clamp(12px, 0.95vw, 14px);
    line-height: 1.55;
    color: var(--c-abyssal-slate);
    opacity: 0.85;
}
.hex:hover {
    background: rgba(184, 216, 208, 0.30);
    transform: scale(1.03);
}
.hex:hover::before {
    background: rgba(126, 184, 176, 0.60);
}

/* Honeycomb staggered offset (rows of 3 staggered for honeycomb feel) */
.hex--04, .hex--05, .hex--06 {
    margin-top: clamp(-32px, -3vw, -16px);
}
.honeycomb {
    padding-top: 0;
}

/* ----- Current Hall ----- */
.section--current {
    background-color: var(--c-nacre-white);
}
.current-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 2px;
    max-width: 1200px;
    margin: 0 auto;
}
.drift {
    background: rgba(237, 245, 243, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(126, 184, 176, 0.20);
    padding: clamp(20px, 2vw, 32px);
    color: var(--c-abyssal-slate);
}
.drift .caption { margin-bottom: 10px; }
.drift p {
    font-family: var(--f-body);
    line-height: 1.65;
    font-size: clamp(13px, 1vw, 16px);
}
.drift--a { grid-column: 1 / span 3; grid-row: 1; transform: rotate(-1deg); }
.drift--b { grid-column: 4 / span 2; grid-row: 1; transform: rotate(0.8deg); }
.drift--c { grid-column: 6 / span 1; grid-row: 1 / span 2; transform: rotate(-0.5deg); }
.drift--d { grid-column: 1 / span 2; grid-row: 2; transform: rotate(1.2deg); }
.drift--e { grid-column: 3 / span 3; grid-row: 2; transform: rotate(-0.8deg); }
.drift--f { grid-column: 1 / span 4; grid-row: 3; transform: rotate(0.6deg); }
.drift--g { grid-column: 5 / span 2; grid-row: 3; transform: rotate(1.5deg); }

/* ----- Closing Foyer ----- */
.section--foyer {
    min-height: 100vh;
    background-color: var(--c-foam-whisper);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pad-x);
    overflow: hidden;
}
.foyer__pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g transform='rotate(-45 110 110)'><text x='0' y='50' font-family='Bricolage Grotesque, sans-serif' font-weight='900' font-size='18' letter-spacing='4' fill='%235A9E94'>bada.casa</text><text x='0' y='110' font-family='Bricolage Grotesque, sans-serif' font-weight='900' font-size='18' letter-spacing='4' fill='%235A9E94'>bada.casa</text><text x='0' y='170' font-family='Bricolage Grotesque, sans-serif' font-weight='900' font-size='18' letter-spacing='4' fill='%235A9E94'>bada.casa</text></g></svg>");
    background-repeat: repeat;
    background-size: 220px 220px;
}
.foyer__center {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 480px;
    padding: clamp(36px, 6vw, 64px);
    background: rgba(244, 250, 248, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(126, 184, 176, 0.25);
}
.caption--foyer {
    color: var(--c-coral-blush);
    opacity: 0.85;
    margin-bottom: clamp(18px, 3vh, 28px);
}
.foyer__statement {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: clamp(16px, 1.5vw, 22px);
    line-height: 1.7;
    color: var(--c-deep-current);
    max-width: 480px;
    margin: 0 auto;
}
.foyer__sign {
    display: block;
    margin-top: clamp(28px, 4vh, 44px);
    font-family: var(--f-display);
    font-weight: 600;
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: clamp(14px, 1.2vw, 17px);
    letter-spacing: 0.3em;
    color: var(--c-coral-blush);
}

/* ----- Reveal animation for blueprint groups ----- */
.section .blueprint__path { /* set up dash via JS */ }

/* ----- Responsive ----- */
@media (max-width: 900px) {
    :root { --pad-x: clamp(20px, 6vw, 48px); }

    .dot-nav { left: 8px; gap: 12px; }

    .tide__rail { display: none; }

    .honeycomb {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .hex {
        clip-path: none;
        aspect-ratio: auto;
        border-radius: 12px;
        background: rgba(184, 216, 208, 0.18);
        border: 1px solid rgba(126, 184, 176, 0.30);
        padding: 0;
    }
    .hex::before, .hex::after { display: none; }
    .hex__inner {
        position: relative;
        inset: auto;
        padding: 22px 22px;
        text-align: left;
    }
    .hex--04, .hex--05, .hex--06 { margin-top: 0; }

    .current-grid {
        grid-template-columns: 1fr;
    }
    .drift {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        transform: none !important;
    }

    .section--vestibule { padding: 0 var(--pad-x); }
    .vestibule__frost { padding: 36px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-gradient { animation: none; }
    .chevron { animation: none; }
    .blueprint__path,
    .sine-path,
    .tide__rail-path { transition: none; stroke-dashoffset: 0; }
    .logotype { transition: none; opacity: 1; transform: none; }
    .chevron { opacity: 1; }
}