/* ============================================================
   HHUDDL.com — dark-mode aviary at the edge of dawn
   Aesthetics: dreamy-ethereal | Palette: triadic-in-darkness
   Layout: clustered modular field with huddle physics
   ============================================================ */

/* ---------- Color tokens (from DESIGN.md) ---------- */
:root {
    --c-velvet-carbon:      #12131C;  /* outermost background */
    --c-huddle-indigo:      #1B1E2E;  /* primary tile bg */
    --c-down-indigo:        #262A3F;  /* borders, hover */
    --c-moonfeather:        #A8B5D9;  /* primary text — triadic 1 */
    --c-dawnfeather:        #D9B8A8;  /* accent — triadic 2 */
    --c-sleepleaf:          #A8D9B5;  /* tiny cues — triadic 3 */
    --c-twilight-slate:     #5A5F75;  /* secondary metadata */
    --c-candlewick:         #E8D9C2;  /* the single warm tile */

    --tile-radius:          18px;
    --tile-padding:         28px;
    --tile-border:          1px solid var(--c-down-indigo);
    --tile-shadow:          0 12px 40px -8px rgba(0, 0, 0, 0.55);

    /* dawn-rose hue shift target (driven by JS scroll) */
    --grain-rose-mix:       0;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-velvet-carbon);
    color: var(--c-moonfeather);
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 300;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(38, 42, 63, 0.55), transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(27, 30, 46, 0.8), transparent 60%),
        var(--c-velvet-carbon);
}

/* ---------- Grain overlay ---------- */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: overlay;
    opacity: 0.16;
    /* JS swaps a procedural noise dataURL via .frame-1..4 classes at 12fps */
}

.grain-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain-frame, none);
    background-size: 220px 220px;
    background-repeat: repeat;
    /* hue mixed toward Dawnfeather Rose as visitor scrolls into field 5 */
    filter: hue-rotate(calc(var(--grain-rose-mix) * 14deg)) saturate(calc(1 + var(--grain-rose-mix) * 0.4));
}

/* ---------- Layout: stacked-modular, no fold ---------- */
main#flock {
    position: relative;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 4vw;
}

.field {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8vh 0;
    z-index: 1;
}

.field-approach {
    min-height: 100vh;
}

.field-dawn {
    flex-direction: column;
}

.gap-flock {
    position: relative;
    width: 100%;
    min-height: 22vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24vw;
    padding: 4vh 0;
}

/* ---------- Cluster (the actual modular block field) ---------- */
.cluster {
    position: relative;
    width: 100%;
    max-width: 1320px;
    min-height: 70vh;
    margin: 0 auto;
}

.cluster-approach {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cluster-gathering,
.cluster-warm,
.cluster-drift,
.cluster-dawn {
    /* tiles are positioned absolutely using their --gx / --gy offsets */
}

.cluster-final {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4vh;
    min-height: 36vh;
}

/* ---------- Tile — the living modular block ---------- */
.tile {
    position: relative;
    background: var(--c-huddle-indigo);
    border: var(--tile-border);
    border-radius: var(--tile-radius);
    padding: var(--tile-padding);
    box-shadow: var(--tile-shadow);
    color: var(--c-moonfeather);

    /* Sizing & jitter come from inline custom properties */
    width: var(--w, 22vw);
    height: var(--h, 24vh);

    /* Composed transform — JS may swap CSS vars on lean, breath, bounce */
    --lean-x: 0px;
    --lean-y: 0px;
    --breath-scale: 1;
    --enter-y: 0px;
    --enter-scale: 1;
    --jx: 0px;
    --jy: 0px;
    transform:
        translate(calc(var(--jx) + var(--lean-x)), calc(var(--jy) + var(--lean-y) + var(--enter-y)))
        scale(calc(var(--breath-scale) * var(--enter-scale)));

    transition:
        background-color 480ms cubic-bezier(0.22, 0.7, 0.32, 1),
        box-shadow 480ms cubic-bezier(0.22, 0.7, 0.32, 1),
        border-color 480ms cubic-bezier(0.22, 0.7, 0.32, 1);

    /* Tiles within the absolute clusters position via gx/gy */
    overflow: hidden;
}

/* Tiles inside clustered fields are absolutely positioned */
.cluster-gathering > .tile,
.cluster-warm > .tile,
.cluster-drift > .tile,
.cluster-dawn > .tile {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:
        translate(
            calc(-50% + var(--gx, 0px) + var(--jx) + var(--lean-x)),
            calc(-50% + var(--gy, 0px) + var(--jy) + var(--lean-y) + var(--enter-y))
        )
        scale(calc(var(--breath-scale) * var(--enter-scale)));
}

/* Hover: borders settle to a softer down indigo, slight shadow lift */
.tile:hover {
    background-color: #1f2236;
    border-color: #2f344b;
    box-shadow: 0 18px 56px -8px rgba(0, 0, 0, 0.62);
}

/* ---------- The Warm Tile (Candlewick Cream) ---------- */
.tile-warm {
    background: var(--c-candlewick);
    color: var(--c-dawnfeather);
    /* Slight elevation per design */
    --jy: -12px;
    box-shadow:
        0 0 80px rgba(232, 217, 194, 0.18),
        0 12px 40px -8px rgba(0, 0, 0, 0.55);
}

.tile-warm:hover {
    background: var(--c-candlewick);
    color: var(--c-dawnfeather);
    box-shadow:
        0 0 110px rgba(232, 217, 194, 0.28),
        0 18px 56px -8px rgba(0, 0, 0, 0.65);
}

.warm-header, .warm-caption, .warm-band {
    color: var(--c-dawnfeather);
}

/* ---------- The lone approach tile and final tile (centered, no absolute) ---------- */
.tile-lone, .tile-final {
    width: var(--w);
    height: var(--h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Feather tile (gap-flock loose feathers) */
.tile-feather {
    opacity: 0.7;
    background: rgba(27, 30, 46, 0.7);
}

/* ---------- Typography ---------- */
.huddle-header {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: clamp(64px, 9vw, 96px);
    letter-spacing: -0.01em;
    line-height: 0.92;
    text-transform: lowercase;
    color: var(--c-dawnfeather);
    margin: 0 0 18px 0;
    /* Soft tonal step: leading consonant heavier */
    font-variation-settings: 'wght' 300;
    transition: font-variation-settings 480ms cubic-bezier(0.22, 0.7, 0.32, 1);
}

.huddle-header:hover {
    font-variation-settings: 'wght' 360;
}

.huddle-header::first-letter {
    font-weight: 500;
}

.huddle-header-sm {
    font-size: clamp(40px, 5vw, 64px);
}

.huddle-header-xs {
    font-size: clamp(22px, 2.4vw, 32px);
    margin-bottom: 10px;
}

.pull-quote {
    font-family: 'Barlow Condensed', sans-serif;
    font-style: italic;
    font-weight: 200;
    font-size: clamp(20px, 2vw, 32px);
    letter-spacing: 0.04em;
    color: var(--c-moonfeather);
    line-height: 1.18;
    margin: 0;
}

.caption {
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-moonfeather);
    margin: 0;
}

.leg-band {
    position: absolute;
    left: var(--tile-padding);
    bottom: 8px;
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    font-size: 11px;
    color: var(--c-twilight-slate);
    letter-spacing: 0.04em;
    opacity: 0.85;
}

/* ---------- Sage pulse — single small interactive cue ---------- */
.sage-pulse {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 8px;
    height: 8px;
    background: var(--c-sleepleaf);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(168, 217, 181, 0.55);
    animation: sage-pulse 2.4s ease-in-out infinite;
}

@keyframes sage-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1.0;  transform: scale(1.15); }
}

/* ---------- Drift blobs ---------- */
.drift-blob {
    position: absolute;
    pointer-events: none;
    z-index: -1;
    opacity: 0.85;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
}

/* Canvas overlays for particles and lean-traces */
canvas#featherCanvas,
canvas#traceCanvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
canvas#featherCanvas { z-index: 2; }
canvas#traceCanvas   { z-index: 3; }

/* ---------- Initial bounce-enter starting state ---------- */
.tile[data-wave] {
    --enter-y: 48px;
    --enter-scale: 0.86;
    opacity: 0;
}

.tile.is-entered {
    --enter-y: 0px;
    --enter-scale: 1;
    opacity: 1;
}

/* ---------- Reduced-motion: keep breath at 50%, disable lean/bounce ---------- */
@media (prefers-reduced-motion: reduce) {
    .tile {
        --lean-x: 0px !important;
        --lean-y: 0px !important;
    }
    .tile[data-wave] {
        --enter-y: 0px;
        --enter-scale: 1;
        opacity: 1;
    }
}

/* ---------- Responsive: collapse cluster offsets on narrow viewports ---------- */
@media (max-width: 900px) {
    .cluster {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 30px 0;
    }
    .cluster-gathering > .tile,
    .cluster-warm > .tile,
    .cluster-drift > .tile,
    .cluster-dawn > .tile {
        position: relative;
        left: auto;
        top: auto;
        transform:
            translate(var(--jx), var(--jy))
            scale(calc(var(--breath-scale) * var(--enter-scale)));
        width: min(86vw, 480px);
        height: auto;
        min-height: 130px;
    }
    .tile-lone, .tile-final {
        width: min(86vw, 520px);
        height: auto;
        min-height: 220px;
    }
    .field { min-height: auto; padding: 8vh 0; }
    .gap-flock { gap: 8vw; }
}