/* =========================================================
   Homepage scene — Cornell iGEM (index.html only)

   The composition mirrors the 1280px-wide Figma design.
   1u = 1px at a 1280px viewport: `--u` scales art, type and
   positions together so the layout holds at any width.
   Parallax and entrance motion live in js/site-animations.js;
   nav + shared tokens live in css/theme.css;
   with JS off (or reduced motion) this file renders the
   static design exactly as drawn.
   ========================================================= */

body.home {
    --navy: #313e77;
    --u: calc(100vw / 1280);
    --font-display: 'Krona One', 'Lexend Exa', sans-serif;
    --font-body: 'Lexend Exa', sans-serif;
    --font-nav: 'Inter', 'Lexend Exa', sans-serif;
    background: var(--navy);
    color: #ffffff;
}

/* ---------- Scene ---------- */

body.home .home-scene {
    position: relative;
    width: 100%;
    height: calc(4279 * var(--u));
    overflow: hidden;
    z-index: 1;
}

body.home .home-section {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

body.home .home-hero    { top: 0;                       height: calc(1200 * var(--u)); }
body.home .home-welcome { top: calc(1200 * var(--u));   height: calc(1100 * var(--u)); }
body.home .home-current { top: calc(2300 * var(--u));   height: calc(1200 * var(--u)); }
body.home .home-more    { top: calc(3500 * var(--u));   height: calc(779 * var(--u)); }

/* Sections after the scene (carousel, donate) still expect this hook. */
body.home .home-screen {
    position: relative;
}

/* ---------- Art layers ---------- */

body.home .home-art {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

body.home .home-art--helix {
    z-index: 1;
}

body.home .home-art--sphere {
    z-index: 2;
    height: auto;
    transform-origin: center center;
}

body.home .home-art--helix img {
    position: absolute;
    display: block;
    max-width: none;
}

/* Hero helix: two strands + rungs, each rotated -8.6deg like the design. */
body.home .home-art--helix-hero {
    left: calc(-168 * var(--u));
    top: calc(161 * var(--u));
    width: calc(1690 * var(--u));
    height: calc(1060 * var(--u));
}

body.home .home-art--helix-hero img {
    transform: rotate(-8.6deg);
}

body.home .home-helix-rungs {
    left: calc(489.5 * var(--u));
    top: calc(105.7 * var(--u));
    width: calc(1082.76 * var(--u));
    height: calc(548.25 * var(--u));
}

body.home .home-helix-strand-a {
    left: calc(21.5 * var(--u));
    top: calc(78.5 * var(--u));
    width: calc(1647.05 * var(--u));
    height: calc(625.35 * var(--u));
}

body.home .home-helix-strand-b {
    left: calc(66 * var(--u));
    top: calc(251.7 * var(--u));
    width: calc(1601.22 * var(--u));
    height: calc(800.7 * var(--u));
}

body.home .home-sphere--hero-left {
    left: calc(-249 * var(--u));
    top: calc(1003 * var(--u));
    width: calc(422 * var(--u));
}

body.home .home-sphere--hero-right {
    left: calc(1141 * var(--u));
    top: calc(633 * var(--u));
    width: calc(237 * var(--u));
}

/* Welcome */
body.home .home-art--helix-welcome {
    left: calc(-219 * var(--u));
    top: calc(-82 * var(--u));
    width: calc(1769.92 * var(--u));
    height: calc(1354.53 * var(--u));
}

body.home .home-art--helix-welcome img,
body.home .home-art--helix-current img,
body.home .home-art--helix-more img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

body.home .home-sphere--welcome {
    left: calc(1043 * var(--u));
    top: calc(597 * var(--u));
    width: calc(237 * var(--u));
}

/* Current work */
body.home .home-art--helix-current {
    left: calc(-511 * var(--u));
    top: calc(-281 * var(--u));
    width: calc(1792.04 * var(--u));
    height: calc(1122 * var(--u));
}

body.home .home-sphere--current {
    left: calc(330 * var(--u));
    top: calc(586 * var(--u));
    width: calc(237 * var(--u));
}

/* More works */
body.home .home-art--helix-more {
    left: calc(-182 * var(--u));
    top: calc(-603 * var(--u));
    width: calc(1752.8 * var(--u));
    height: calc(1907.51 * var(--u));
}

body.home .home-sphere--more-small {
    left: calc(955 * var(--u));
    top: calc(99 * var(--u));
    width: calc(228 * var(--u));
}

body.home .home-sphere--more-large {
    left: calc(1408 * var(--u));
    top: calc(725 * var(--u));
    width: calc(567 * var(--u));
}

/* ---------- Text layers (all real, selectable text) ---------- */

body.home .home-text {
    position: absolute;
    z-index: 3;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    color: #ffffff;
}

/* Hero: "CORNELL" eyebrow + "iGEM" wordmark */
body.home .home-brand {
    left: calc(69 * var(--u));
    top: calc(215 * var(--u));
    width: calc(900 * var(--u));
}

body.home .home-eyebrow {
    display: block;
    margin-left: calc(7 * var(--u));
    font-size: calc(50 * var(--u));
    line-height: 1.26;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.home .home-wordmark {
    display: block;
    margin-top: calc(-14 * var(--u));
    font-family: var(--font-display);
    font-size: calc(150 * var(--u));
    line-height: 1.15;
    letter-spacing: 0.05em;
}

/* Welcome */
body.home .home-welcome-text {
    left: calc(248 * var(--u));
    top: calc(381 * var(--u));
    width: calc(784 * var(--u));
    font-size: calc(50 * var(--u));
    line-height: 1.26;
    letter-spacing: 0.02em;
    text-align: center;
    text-wrap: balance;
}

body.home .home-dots {
    left: calc(568 * var(--u));
    top: calc(810 * var(--u));
    display: flex;
    gap: calc(84 * var(--u));
}

body.home .home-dots span {
    display: block;
    width: max(6px, calc(16 * var(--u)));
    height: max(6px, calc(16 * var(--u)));
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.85;
}

/* Current work */
body.home .home-current-title {
    left: calc(40 * var(--u));
    top: calc(206 * var(--u));
    width: calc(520 * var(--u));
    font-size: calc(80 * var(--u));
    line-height: 1.08;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.home .home-current-title span,
body.home .home-more-title span {
    display: block;
}

body.home .home-project {
    left: calc(615 * var(--u));
    top: calc(119 * var(--u));
    width: calc(784 * var(--u));
    text-align: center;
}

body.home .home-project-name {
    display: block;
    width: calc(460 * var(--u));
    margin: 0 auto;
    padding: 0;
    float: none;
    position: static;
    background: none;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
    text-align: center;
}

body.home .home-project-logo {
    display: block;
    width: 100%;
    height: auto;
}

body.home .home-project-desc {
    width: calc(520 * var(--u));
    margin: calc(34 * var(--u)) auto 0;
    text-align: left;
}

body.home .home-project-desc p {
    margin: 0 0 calc(16 * var(--u));
    font-size: max(15px, calc(18 * var(--u)));
    line-height: 1.42;
    letter-spacing: 0.005em;
    text-wrap: pretty;
}

body.home .home-project-desc p:last-child {
    margin-bottom: 0;
}

/* More works */
body.home .home-more-title {
    left: calc(110 * var(--u));
    top: calc(353 * var(--u));
    width: calc(478 * var(--u));
    font-size: calc(100 * var(--u));
    line-height: 1.23;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}

/* ---------- Stacked layout for narrow screens ---------- */

@media screen and (max-width: 860px) {
    body.home .home-scene {
        height: auto;
    }

    body.home .home-section {
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
    }

    body.home .home-text {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        /* Ribbons can pass behind stacked copy on small screens: keep white text legible. */
        text-shadow:
            0 1px 2px rgba(22, 30, 64, 0.6),
            0 0 14px rgba(49, 62, 119, 0.95),
            0 0 32px rgba(49, 62, 119, 0.9);
    }

    /* Hero */
    body.home .home-hero {
        min-height: 150vw;
        padding: 30vw 6vw 8vw;
    }

    body.home .home-brand {
        margin-left: 0;
    }

    body.home .home-eyebrow {
        margin-left: 0.4vw;
        font-size: 6.2vw;
    }

    body.home .home-wordmark {
        margin-top: -1vw;
        font-size: 19vw;
    }

    body.home .home-art--helix-hero {
        --u: calc(100vw / 640);
        left: -50vw;
        top: 46vw;
    }

    body.home .home-sphere--hero-left {
        left: -16vw;
        top: 118vw;
        width: 40vw;
    }

    body.home .home-sphere--hero-right {
        left: 80vw;
        top: 44vw;
        width: 26vw;
    }

    /* Welcome */
    body.home .home-welcome {
        padding: 20vw 6vw 18vw;
        text-align: center;
    }

    body.home .home-welcome-text {
        margin: 0 auto;
        max-width: 34ch;
        font-size: 6.4vw;
        line-height: 1.25;
    }

    body.home .home-dots {
        justify-content: center;
        gap: 10vw;
        margin-top: 12vw;
    }

    body.home .home-art--helix-welcome {
        --u: calc(100vw / 640);
        left: -64vw;
        top: -26vw;
    }

    body.home .home-sphere--welcome {
        left: 78vw;
        top: 74vw;
        width: 28vw;
    }

    /* Current work */
    body.home .home-current {
        padding: 18vw 6vw 14vw;
    }

    body.home .home-current-title {
        font-size: 13vw;
        line-height: 1.05;
    }

    body.home .home-project {
        margin-top: 12vw;
        text-align: left;
    }

    body.home .home-project-name {
        width: min(80vw, 420px);
        margin: 0;
        padding: 0;
    }

    body.home .home-project-desc {
        width: auto;
        max-width: 60ch;
        margin: 6vw 0 0;
    }

    body.home .home-project-desc p {
        font-size: max(15px, 4vw);
        margin-bottom: 4vw;
    }

    body.home .home-art--helix-current {
        --u: calc(100vw / 640);
        left: -90vw;
        top: -30vw;
        opacity: 0.75;
    }

    body.home .home-sphere--current {
        left: 72vw;
        top: 118vw;
        width: 30vw;
    }

    /* More works */
    body.home .home-more {
        min-height: 90vw;
        padding: 16vw 6vw 22vw;
    }

    body.home .home-more-title {
        font-size: 13vw;
        line-height: 1.15;
        text-align: left;
    }

    body.home .home-art--helix-more {
        --u: calc(100vw / 640);
        left: -60vw;
        top: -70vw;
        opacity: 0.8;
    }

    body.home .home-sphere--more-small {
        left: 66vw;
        top: -4vw;
        width: 26vw;
    }

    body.home .home-sphere--more-large {
        left: 60vw;
        top: 54vw;
        width: 54vw;
    }
}

@media screen and (max-width: 480px) {
    body.home .home-hero {
        min-height: 160vw;
    }

}