/* ===========================================================
   renai.works — The Cryo-Atelier of Recovered Affections
   Translucent-frost · parallax-sections · variable-fluid type
   =========================================================== */

:root {
    /* Palette — 8 stops */
    --frost-pane: #e8eef3;
    --frost-rim: #c9d4dd;
    --cryo-shadow: #0d141a;
    --cryo-shadow-2: #1a242e;
    --amber-lamp: #d9a45e;
    --amber-deep: #8a5a28;
    --cyan-breath: #7eb8c4;
    --annotation-ink: #2e3a44;

    /* Layered atmospheric tones */
    --frost-pane-alpha: rgba(232, 238, 243, 0.18);
    --frost-pane-alpha-strong: rgba(232, 238, 243, 0.64);
    --frost-rim-alpha: rgba(201, 212, 221, 0.42);
    --frost-pane-on-glass: rgba(232, 238, 243, 0.28);

    /* Stagger growth factors (1.0, 1.0, 1.14, 1.27, 1.37, 1.42) */
    --stagger-step: 14px;

    /* Mesh rotation custom property (updated by JS rAF) */
    --mesh-rot: 0deg;
    --mesh-cycle: 0%;

    /* Scroll offset (per-chamber, updated by JS) */
    --scroll-offset: 0px;

    /* Color scheme defaults */
    color-scheme: dark;
}

/* ----- Reset & base ----- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.cryo {
    min-height: 100vh;
    background: var(--cryo-shadow);
    color: var(--frost-pane);
    font-family: "Inter", system-ui, sans-serif;
    font-variation-settings: 'opsz' 17, 'wght' 380;
    font-size: 17px;
    line-height: 1.55;
    overflow-x: hidden;
    overflow-y: scroll;
    background-image:
        radial-gradient(circle at 18% 12%, rgba(126, 184, 196, 0.06), transparent 38%),
        radial-gradient(circle at 82% 88%, rgba(217, 164, 94, 0.045), transparent 42%),
        linear-gradient(180deg, var(--cryo-shadow) 0%, var(--cryo-shadow-2) 100%);
    background-attachment: fixed;
}

/* ----- Vertical dashed cryo-feed spine ----- */
.spine {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100vh;
    z-index: 5;
    background: repeating-linear-gradient(
        to bottom,
        rgba(232, 238, 243, 0.55) 0,
        rgba(232, 238, 243, 0.55) 3px,
        transparent 3px,
        transparent 7px
    );
    pointer-events: none;
}

.spine-rose {
    position: absolute;
    left: 50%;
    top: var(--rose-top, 50vh);
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    opacity: 0.7;
    filter: drop-shadow(0 0 4px rgba(217, 164, 94, 0.3));
}

/* ----- Bay nav (left edge frost pills) ----- */
.bay-nav {
    position: fixed;
    top: 50%;
    left: 28px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 30;
}

.pill {
    position: relative;
    width: 4px;
    height: 38px;
    border-radius: 4px;
    background: rgba(232, 238, 243, 0.18);
    box-shadow: inset 0 0 0 0.5px rgba(232, 238, 243, 0.32);
    cursor: pointer;
    text-decoration: none;
    transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1),
                background 320ms ease,
                box-shadow 320ms ease;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pill-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--frost-pane), var(--cyan-breath));
    opacity: 0;
    transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pill.is-active {
    width: 7px;
    background: rgba(232, 238, 243, 0.32);
    box-shadow: inset 0 0 0 0.5px var(--frost-pane), 0 0 12px rgba(126, 184, 196, 0.35);
}

.pill.is-active .pill-fill {
    opacity: 0.85;
}

.pill:hover {
    background: rgba(232, 238, 243, 0.4);
}

/* ----- Top brand frame ----- */
.frost-frame {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 36px 0;
    pointer-events: none;
}

.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: auto;
}

.brand-name {
    font-family: "Fraunces", "Inter", serif;
    font-size: 18px;
    font-variation-settings: 'opsz' 18, 'wght' 540, 'SOFT' 28, 'WONK' 0;
    color: var(--frost-pane);
    letter-spacing: 0.04em;
}

.brand-sub {
    font-family: "Crimson Pro", "Inter", serif;
    font-style: italic;
    font-size: 11px;
    color: var(--cyan-breath);
    opacity: 0.65;
    letter-spacing: 0.06em;
}

.temp-readout {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    pointer-events: auto;
    font-family: "DM Mono", "Courier New", monospace;
    font-variation-settings: 'wght' 320;
}

.temp-label {
    font-size: 9px;
    color: var(--frost-rim);
    opacity: 0.55;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.temp-value {
    font-size: 13px;
    color: var(--cyan-breath);
    letter-spacing: 0.04em;
}

/* ----- Chamber ----- */
main {
    position: relative;
    z-index: 1;
}

.chamber {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

.chamber + .chamber {
    margin-top: -1px;
}

/* ----- Parallax layers ----- */
.layer {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.layer-a {
    z-index: 1;
    transform: translate3d(0, calc(var(--scroll-offset, 0px) * 0.4), 0);
}

.layer-b {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12vh 14vw;
    transform: translate3d(0, calc(var(--scroll-offset, 0px) * 0.7), 0);
}

.layer-c {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 18vh 22vw 18vh 18vw;
    transform: translate3d(0, var(--scroll-offset, 0px), 0);
    pointer-events: none;
}

/* ----- Gradient-mesh auroras (Layer A) ----- */
.mesh {
    position: absolute;
    inset: -40vh -10vw;
    filter: blur(60px) saturate(115%);
    mix-blend-mode: normal;
    transform: rotate(var(--mesh-rot, 0deg));
    transform-origin: center;
    transition: none;
}

.mesh::before,
.mesh::after {
    content: "";
    position: absolute;
    inset: 0;
}

.mesh-1::before {
    background:
        radial-gradient(ellipse 70% 50% at 22% 30%, var(--cyan-breath), transparent 60%),
        radial-gradient(ellipse 60% 60% at 78% 70%, var(--amber-lamp), transparent 58%),
        radial-gradient(ellipse 80% 40% at 50% 50%, var(--cyan-breath), transparent 65%);
    opacity: 0.32;
}
.mesh-1::after {
    background: conic-gradient(from var(--mesh-rot, 0deg) at 40% 60%,
        var(--cyan-breath), var(--cryo-shadow), var(--amber-lamp), var(--cryo-shadow-2), var(--cyan-breath));
    opacity: 0.18;
    mix-blend-mode: screen;
}

.mesh-2::before {
    background:
        radial-gradient(ellipse 75% 55% at 65% 25%, var(--cyan-breath), transparent 62%),
        radial-gradient(ellipse 55% 45% at 25% 75%, var(--amber-lamp), transparent 56%),
        radial-gradient(ellipse 60% 60% at 80% 60%, var(--amber-deep), transparent 60%);
    opacity: 0.36;
}
.mesh-2::after {
    background: conic-gradient(from calc(var(--mesh-rot, 0deg) + 60deg) at 60% 40%,
        var(--amber-lamp), var(--cryo-shadow-2), var(--cyan-breath), var(--cryo-shadow), var(--amber-lamp));
    opacity: 0.22;
    mix-blend-mode: screen;
}

.mesh-3::before {
    background:
        radial-gradient(ellipse 70% 60% at 30% 70%, var(--amber-deep), transparent 60%),
        radial-gradient(ellipse 60% 50% at 70% 30%, var(--amber-lamp), transparent 58%),
        radial-gradient(ellipse 80% 45% at 50% 90%, var(--amber-deep), transparent 60%);
    opacity: 0.40;
}
.mesh-3::after {
    background: conic-gradient(from calc(var(--mesh-rot, 0deg) + 120deg) at 35% 70%,
        var(--amber-lamp), var(--amber-deep), var(--cryo-shadow-2), var(--cyan-breath), var(--amber-lamp));
    opacity: 0.26;
    mix-blend-mode: screen;
}

.mesh-4::before {
    background:
        radial-gradient(ellipse 70% 55% at 20% 35%, var(--amber-lamp), transparent 60%),
        radial-gradient(ellipse 60% 60% at 80% 70%, var(--cyan-breath), transparent 58%),
        radial-gradient(ellipse 70% 50% at 50% 50%, var(--amber-deep), transparent 62%);
    opacity: 0.34;
}
.mesh-4::after {
    background: conic-gradient(from calc(var(--mesh-rot, 0deg) + 180deg) at 50% 50%,
        var(--cyan-breath), var(--amber-lamp), var(--cryo-shadow), var(--amber-deep), var(--cyan-breath));
    opacity: 0.20;
    mix-blend-mode: screen;
}

.mesh-5::before {
    background:
        radial-gradient(ellipse 65% 55% at 50% 25%, var(--amber-deep), transparent 58%),
        radial-gradient(ellipse 60% 60% at 25% 75%, var(--cyan-breath), transparent 60%),
        radial-gradient(ellipse 70% 50% at 75% 80%, var(--amber-lamp), transparent 62%);
    opacity: 0.38;
}
.mesh-5::after {
    background: conic-gradient(from calc(var(--mesh-rot, 0deg) + 240deg) at 50% 50%,
        var(--amber-deep), var(--cryo-shadow-2), var(--cyan-breath), var(--amber-lamp), var(--amber-deep));
    opacity: 0.24;
    mix-blend-mode: screen;
}

.mesh-6::before {
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, var(--frost-pane), transparent 60%),
        radial-gradient(ellipse 55% 50% at 25% 30%, var(--cyan-breath), transparent 58%),
        radial-gradient(ellipse 55% 50% at 75% 70%, var(--cyan-breath), transparent 58%);
    opacity: 0.28;
}
.mesh-6::after {
    background: conic-gradient(from calc(var(--mesh-rot, 0deg) + 300deg) at 50% 50%,
        var(--frost-pane), var(--cyan-breath), var(--cryo-shadow-2), var(--frost-rim), var(--frost-pane));
    opacity: 0.18;
    mix-blend-mode: screen;
}

/* ----- Frost pane (Layer B) ----- */
.pane {
    position: relative;
    width: 100%;
    max-width: 1080px;
    min-height: 56vh;
    padding: 64px 72px 56px;
    border-radius: 32px 32px 6px 6px;
    background: var(--frost-pane-alpha);
    backdrop-filter: blur(28px) saturate(140%) brightness(105%);
    -webkit-backdrop-filter: blur(28px) saturate(140%) brightness(105%);
    box-shadow:
        inset 0 0 0 1.5px var(--frost-rim-alpha),
        0 30px 60px -20px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(13, 20, 26, 0.4);
}

/* ----- Dendritic frost-crystal edge bloom ----- */
.frost-edge {
    position: absolute;
    left: 0;
    right: 0;
    height: 16px;
    pointer-events: none;
    overflow: hidden;
}

.frost-edge svg {
    width: 100%;
    height: 100%;
    display: block;
}

.edge-top {
    top: 0;
    background: linear-gradient(180deg, var(--frost-rim-alpha) 0%, transparent 100%);
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
}

.edge-bottom {
    bottom: 0;
    background: linear-gradient(0deg, var(--frost-rim-alpha) 0%, transparent 100%);
    transform: scaleY(-1);
}

/* ----- Pane header ----- */
.pane-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 24px;
    font-family: "DM Mono", monospace;
    font-variation-settings: 'wght' 320;
    font-size: 10.5px;
    color: var(--annotation-ink);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.bay-num {
    color: var(--amber-deep);
    font-variation-settings: 'wght' 400;
}

.bay-cat {
    color: var(--annotation-ink);
    opacity: 0.7;
}

.bay-meta {
    margin-left: auto;
    color: var(--annotation-ink);
    opacity: 0.55;
}

/* ----- Bay title (fluid-variable Fraunces) ----- */
.bay-title {
    font-family: "Fraunces", "Inter", serif;
    font-size: clamp(2.6rem, 6.5vw, 5.4rem);
    line-height: 1.05;
    color: var(--annotation-ink);
    /* Initial "fog" state — JS animates to "glass" state */
    font-variation-settings: 'opsz' 9, 'wght' 240, 'SOFT' 100, 'WONK' 0;
    letter-spacing: -0.015em;
    margin-bottom: 28px;
    text-shadow: 0 0 18px rgba(232, 238, 243, 0.18);
    transition: text-shadow 800ms ease;
}

.bay-title.is-glass {
    text-shadow: 0 0 0 rgba(232, 238, 243, 0);
}

.bay-lede {
    font-family: "Inter", sans-serif;
    font-variation-settings: 'opsz' 19, 'wght' 360;
    font-size: clamp(0.98rem, 1.1vw, 1.12rem);
    line-height: 1.55;
    color: var(--annotation-ink);
    max-width: 540px;
    opacity: 0.85;
}

/* ----- Specimen (Layer C) ----- */
.specimen {
    position: relative;
    width: clamp(220px, 22vw, 320px);
    pointer-events: auto;
    will-change: transform;
    transform: rotate(var(--specimen-tilt, 0deg));
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.42));
    margin-left: clamp(40px, 8vw, 140px);
}

.specimen-art {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    filter: saturate(0.78) contrast(1.04);
}

.specimen-base {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: "DM Mono", monospace;
    font-variation-settings: 'wght' 300;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--amber-lamp);
    opacity: 0.72;
}

.cat-year {
    color: var(--cyan-breath);
    opacity: 0.6;
}

/* ----- Breath-fog halo ----- */
.breath-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cyan-breath) 0%, transparent 70%);
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(1.8);
    pointer-events: none;
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                width 600ms cubic-bezier(0.16, 1, 0.3, 1),
                height 600ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.specimen:hover .breath-halo {
    opacity: 0.22;
    width: 110px;
    height: 110px;
}

.halo-final {
    opacity: 0.18;
    width: 130px;
    height: 130px;
}

/* ----- Stagger slips ----- */
.slips {
    position: absolute;
    top: 50%;
    right: 6vw;
    transform: translateY(-46%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 4;
    width: 260px;
    pointer-events: none;
}

.slip {
    --slip-grow: 1;
    position: relative;
    width: 240px;
    padding: 11px 16px 11px 18px;
    background: var(--frost-pane-on-glass);
    border: 0.5px solid var(--frost-rim-alpha);
    color: var(--annotation-ink);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    opacity: 0;
    transform: translateX(-26px);
    transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--slip-index, 0) * 90ms);
}

.slip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: var(--amber-lamp);
    box-shadow: 0 0 6px rgba(217, 164, 94, 0.6);
}

.chamber.is-visible .slip {
    opacity: 1;
    transform: translateX(calc(var(--slip-index, 0) * 14px * var(--slip-grow, 1)));
}

/* Stagger growth factors per slip index */
.chamber.is-visible .slip[style*="--slip-index: 0"] { --slip-grow: 1.0; }
.chamber.is-visible .slip[style*="--slip-index: 1"] { --slip-grow: 1.0; }
.chamber.is-visible .slip[style*="--slip-index: 2"] { --slip-grow: 1.14; }
.chamber.is-visible .slip[style*="--slip-index: 3"] { --slip-grow: 1.27; }
.chamber.is-visible .slip[style*="--slip-index: 4"] { --slip-grow: 1.37; }
.chamber.is-visible .slip[style*="--slip-index: 5"] { --slip-grow: 1.42; }

.slip-body {
    display: block;
    font-family: "Crimson Pro", "Lora", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--annotation-ink);
    margin-bottom: 7px;
}

.slip-body em {
    font-style: normal;
    color: var(--amber-deep);
    letter-spacing: 0.02em;
}

.slip-stamp {
    display: block;
    font-family: "DM Mono", monospace;
    font-variation-settings: 'wght' 300;
    font-size: 9px;
    color: var(--amber-lamp);
    opacity: 0.65;
    letter-spacing: 0.14em;
}

/* ----- Floating bay-name tooltip ----- */
.bay-tooltip {
    position: fixed;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
                left 320ms cubic-bezier(0.16, 1, 0.3, 1);
    font-family: "Fraunces", serif;
    font-size: 22px;
    font-variation-settings: 'opsz' 36, 'wght' 420, 'SOFT' 60, 'WONK' 0;
    color: var(--frost-pane);
    letter-spacing: 0.02em;
    z-index: 32;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.bay-tooltip.is-visible {
    opacity: 1;
    left: 76px;
}

/* ----- Brand fade-in on first paint ----- */
.brand-name,
.brand-sub {
    opacity: 0;
    animation: brandFade 1600ms cubic-bezier(0.16, 1, 0.3, 1) 280ms forwards;
}
.brand-sub {
    animation-delay: 720ms;
}

@keyframes brandFade {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
    .slips {
        right: 3vw;
        width: 240px;
    }
    .slip {
        width: 224px;
    }
    .pane {
        padding: 48px 48px 44px;
        max-width: 84vw;
    }
}

@media (max-width: 900px) {
    .bay-nav {
        left: 16px;
        gap: 12px;
    }
    .frost-frame {
        padding: 12px 18px 0;
    }
    .brand-name { font-size: 15px; }
    .brand-sub { font-size: 9.5px; }
    .pane {
        padding: 40px 28px 36px;
        min-height: 64vh;
        max-width: 88vw;
    }
    .layer-b { padding: 8vh 6vw; }
    .layer-c {
        padding: 0;
        position: absolute;
        bottom: 6vh;
        left: 50%;
        transform: translateX(-50%) translate3d(0, var(--scroll-offset, 0px), 0);
    }
    .specimen {
        width: clamp(160px, 30vw, 220px);
        margin-left: 0;
    }
    .slips {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin: 28px auto 0;
        max-width: 88vw;
        width: 88vw;
    }
    .slip {
        width: 100%;
    }
    .chamber.is-visible .slip {
        transform: translateX(calc(var(--slip-index, 0) * 6px * var(--slip-grow, 1)));
    }
    .spine {
        left: 12px;
        transform: none;
    }
    .spine-rose {
        left: 0;
    }
    /* Mobile: parallax velocities collapse to 1.0 */
    .layer-a,
    .layer-b {
        transform: translate3d(0, var(--scroll-offset, 0px), 0) !important;
    }
}

@media (max-width: 640px) {
    .pane-header {
        flex-wrap: wrap;
        font-size: 9.5px;
    }
    .bay-meta {
        margin-left: 0;
        width: 100%;
        margin-top: 4px;
    }
    .frost-frame {
        height: 48px;
    }
    .temp-readout .temp-label { font-size: 8px; }
    .temp-readout .temp-value { font-size: 11.5px; }
    .bay-tooltip { font-size: 16px; }
}

/* ----- prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .layer-a, .layer-b, .layer-c {
        transform: none !important;
    }
    .mesh {
        animation: none !important;
        transform: none !important;
    }
    .bay-title {
        font-variation-settings: 'opsz' 144, 'wght' 720, 'SOFT' 0, 'WONK' 1 !important;
        transition: none !important;
    }
    .slip {
        opacity: 1 !important;
        transform: translateX(calc(var(--slip-index, 0) * 14px * var(--slip-grow, 1))) !important;
        transition: none !important;
    }
    .specimen {
        transform: none !important;
        transition: none !important;
    }
}

/* ----- Final chamber fade (Departure) ----- */
.chamber-final {
    padding-bottom: 18vh;
}
.chamber-final::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 18vh;
    background: linear-gradient(180deg, transparent, var(--cryo-shadow));
    z-index: 10;
    pointer-events: none;
}