/* =========================================
   STARRFIELD FUN
   LIVING HERO DESIGN SYSTEM

   Shared experimental hero language.
   Individual pages can build their own
   interaction on top of this foundation.
========================================= */


/* =========================================
   BASE LIVING HERO
========================================= */

.living-hero {
    position: relative;

    min-height: 100vh;

    padding:
        140px
        4vw
        70px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    isolation: isolate;

    background-color: #F5F2EA;

    background-image:
        linear-gradient(
            rgba(21, 22, 25, 0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(21, 22, 25, 0.03) 1px,
            transparent 1px
        );

    background-size:
        72px
        72px;

    color: #151619;
}


/* =========================================
   COLOUR SIGNATURE
========================================= */

.living-hero::before {
    content: "";

    position: absolute;

    top: 112px;
    left: 4vw;
    right: 4vw;

    height: 8px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,

            #5965FF 0%,
            #5965FF 34%,

            #FF7657 34%,
            #FF7657 60%,

            #D8FF68 60%,
            #D8FF68 84%,

            #151619 84%,
            #151619 100%
        );

    z-index: 5;
}


/* =========================================
   GHOST WORD
========================================= */

.living-ghost-word {
    position: absolute;

    top: 49%;
    left: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            210px,
            27vw,
            500px
        );

    font-weight: 800;

    line-height: 0.72;

    letter-spacing: -0.1em;

    color:
        rgba(21, 22, 25, 0.032);

    white-space: nowrap;

    pointer-events: none;

    user-select: none;

    z-index: 0;

    animation:
        livingGhostBreath
        11s
        ease-in-out
        infinite;
}


/* =========================================
   CONTENT ABOVE GHOST WORD
========================================= */

.living-hero > *:not(.living-ghost-word) {
    position: relative;

    z-index: 3;
}


/* =========================================
   TOP META ROW
========================================= */

.living-hero-meta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    margin-top: 26px;

    padding:
        20px
        0;

    border-bottom:
        1px solid
        rgba(21, 22, 25, 0.24);

    color: #55575D;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.16em;
}


.living-status {
    display: flex;

    align-items: center;

    gap: 11px;
}


.living-status-dot {
    width: 9px;
    height: 9px;

    flex:
        0
        0
        9px;

    border-radius: 50%;

    background: #D8FF68;

    border:
        1px solid
        #151619;

    animation:
        livingStatusPulse
        2.4s
        ease-out
        infinite;
}


/* =========================================
   MAIN HERO STAGE
========================================= */

.living-hero-stage {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(350px, 0.75fr);

    gap: 6vw;

    align-items: center;

    padding:
        80px
        0
        70px;
}


/* =========================================
   MAIN TYPOGRAPHY
========================================= */

.living-hero-copy {
    position: relative;
}


.living-hero-kicker {
    margin-bottom: 28px;

    color: #5965FF;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.17em;
}


.living-hero-title {
    max-width: 1000px;

    font-size:
        clamp(
            72px,
            10vw,
            158px
        );

    line-height: 0.84;

    letter-spacing: -0.07em;

    font-weight: 600;
}


.living-hero-title span {
    display: block;

    font-family:
        "Instrument Serif",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 400;

    color: #5965FF;
}


.living-hero-description {
    max-width: 560px;

    margin-top: 46px;

    font-size: 17px;

    line-height: 1.75;

    color: #62646A;
}


/* =========================================
   WORK PAGE
   LIVE PROJECT INDEX
========================================= */

.work-live-index {
    position: relative;

    align-self: stretch;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        24px
        0;
}


/* =========================================
   INDEX HEADER
========================================= */

.work-index-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 16px;

    padding:
        0
        4px
        15px;

    border-bottom:
        1px solid
        rgba(21, 22, 25, 0.22);

    color: #6B6D72;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.15em;
}


.work-index-live {
    display: flex;

    align-items: center;

    gap: 8px;
}


.work-index-live::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #FF7657;

    animation:
        workIndexBlink
        1.7s
        ease-in-out
        infinite;
}


/* =========================================
   PROJECT ROWS
========================================= */

.work-index-list {
    display: grid;

    gap: 7px;
}


.work-index-row {
    min-height: 88px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        auto;

    gap: 18px;

    align-items: center;

    padding:
        15px
        18px;

    border:
        1px solid
        rgba(21, 22, 25, 0.16);

    border-radius: 18px;

    color: #151619;

    background:
        rgba(245, 242, 234, 0.58);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform
        0.45s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );

    animation:
        workIndexActive
        12s
        ease
        infinite;
}


.work-index-row:nth-child(1) {
    animation-delay: 0s;
}


.work-index-row:nth-child(2) {
    animation-delay: 3s;
}


.work-index-row:nth-child(3) {
    animation-delay: 6s;
}


.work-index-row:nth-child(4) {
    animation-delay: 9s;
}


/* =========================================
   INDEX NUMBER
========================================= */

.work-index-number {
    font-family:
        "Instrument Serif",
        Georgia,
        serif;

    font-style: italic;

    font-size: 26px;

    line-height: 1;

    color: #5965FF;
}


/* =========================================
   INDEX PROJECT INFO
========================================= */

.work-index-project {
    min-width: 0;
}


.work-index-project strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size:
        clamp(
            15px,
            1.3vw,
            19px
        );

    line-height: 1.2;

    letter-spacing: -0.025em;

    font-weight: 700;
}


.work-index-project span {
    display: block;

    margin-top: 5px;

    color: #77797E;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.12em;
}


/* =========================================
   INDEX SIGNAL
========================================= */

.work-index-signal {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    border:
        1px solid
        rgba(21, 22, 25, 0.18);

    color: #151619;

    font-size: 14px;
}


/* =========================================
   INDEX FOOTER
========================================= */

.work-index-footer {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-top: 17px;

    padding:
        16px
        4px
        0;

    border-top:
        1px solid
        rgba(21, 22, 25, 0.22);
}


.work-index-footer span {
    color: #696B70;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.14em;
}


.work-index-footer strong {
    color: #5965FF;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.12em;
}


/* =========================================
   BOTTOM INFORMATION
========================================= */

.living-hero-bottom {
    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 50px;

    padding-top: 28px;

    border-top:
        1px solid
        rgba(21, 22, 25, 0.2);

    overflow: hidden;
}


.living-hero-bottom::before {
    content: "";

    position: absolute;

    top: -1px;
    left: -20%;

    width: 17%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #5965FF,
            #D8FF68,
            transparent
        );

    animation:
        livingSignalSweep
        7.5s
        linear
        infinite;
}


.living-hero-bottom-copy {
    max-width: 650px;

    color: #62646A;

    font-size: 13px;

    line-height: 1.65;
}


.living-scroll-signal {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex:
        0
        0
        58px;

    border-radius: 16px;

    background: #151619;

    color: #D8FF68;

    font-size: 24px;

    box-shadow:
        0
        12px
        35px
        rgba(21, 22, 25, 0.14);

    animation:
        livingArrowFloat
        2.5s
        ease-in-out
        infinite;
}


/* =========================================
   ACTIVE PROJECT ANIMATION

   Each row gets roughly three seconds
   as the "active" project.
========================================= */

@keyframes workIndexActive {

    0%,
    21% {
        color: #F5F2EA;

        background: #151619;

        border-color: #151619;

        transform:
            translateX(-9px);

        box-shadow:
            0
            15px
            40px
            rgba(21, 22, 25, 0.14);
    }

    25%,
    100% {
        color: #151619;

        background:
            rgba(245, 242, 234, 0.58);

        border-color:
            rgba(21, 22, 25, 0.16);

        transform:
            translateX(0);

        box-shadow: none;
    }

}


.work-index-row {
    --active-accent: #D8FF68;
}


.work-index-row:nth-child(2) {
    --active-accent: #FF7657;
}


.work-index-row:nth-child(3) {
    --active-accent: #5965FF;
}


.work-index-row:nth-child(4) {
    --active-accent: #D8FF68;
}


.work-index-row {
    animation-name:
        workIndexActive;
}


.work-index-row .work-index-number {
    animation:
        workIndexNumber
        12s
        ease
        infinite;
}


.work-index-row:nth-child(1)
.work-index-number {
    animation-delay: 0s;
}


.work-index-row:nth-child(2)
.work-index-number {
    animation-delay: 3s;
}


.work-index-row:nth-child(3)
.work-index-number {
    animation-delay: 6s;
}


.work-index-row:nth-child(4)
.work-index-number {
    animation-delay: 9s;
}


.work-index-row
.work-index-signal {
    animation:
        workIndexSignal
        12s
        ease
        infinite;
}


.work-index-row:nth-child(1)
.work-index-signal {
    animation-delay: 0s;
}


.work-index-row:nth-child(2)
.work-index-signal {
    animation-delay: 3s;
}


.work-index-row:nth-child(3)
.work-index-signal {
    animation-delay: 6s;
}


.work-index-row:nth-child(4)
.work-index-signal {
    animation-delay: 9s;
}


.work-index-row
.work-index-project span {
    animation:
        workIndexMeta
        12s
        ease
        infinite;
}


.work-index-row:nth-child(1)
.work-index-project span {
    animation-delay: 0s;
}


.work-index-row:nth-child(2)
.work-index-project span {
    animation-delay: 3s;
}


.work-index-row:nth-child(3)
.work-index-project span {
    animation-delay: 6s;
}


.work-index-row:nth-child(4)
.work-index-project span {
    animation-delay: 9s;
}


@keyframes workIndexNumber {

    0%,
    21% {
        color: var(--active-accent);

        transform:
            scale(1.08);
    }

    25%,
    100% {
        color: #5965FF;

        transform:
            scale(1);
    }

}


@keyframes workIndexSignal {

    0%,
    21% {
        color: #151619;

        background:
            var(--active-accent);

        border-color:
            var(--active-accent);

        transform:
            rotate(-8deg);
    }

    25%,
    100% {
        color: #151619;

        background: transparent;

        border-color:
            rgba(21, 22, 25, 0.18);

        transform:
            rotate(0deg);
    }

}


@keyframes workIndexMeta {

    0%,
    21% {
        color:
            rgba(245, 242, 234, 0.63);
    }

    25%,
    100% {
        color: #77797E;
    }

}


/* =========================================
   OTHER ANIMATIONS
========================================= */

@keyframes livingGhostBreath {

    0%,
    100% {
        transform:
            translate(
                -50%,
                -50%
            )
            scale(1);

        opacity: 1;
    }

    50% {
        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.015);

        opacity: 0.7;
    }

}


@keyframes livingStatusPulse {

    0% {
        box-shadow:
            0
            0
            0
            0
            rgba(216, 255, 104, 0.7);
    }

    70% {
        box-shadow:
            0
            0
            0
            9px
            rgba(216, 255, 104, 0);
    }

    100% {
        box-shadow:
            0
            0
            0
            0
            rgba(216, 255, 104, 0);
    }

}


@keyframes workIndexBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }

}


@keyframes livingSignalSweep {

    0% {
        left: -20%;
    }

    100% {
        left: 110%;
    }

}


@keyframes livingArrowFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(7px);
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .living-hero-stage {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(310px, 0.75fr);

        gap: 4vw;
    }


    .work-index-row {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            auto;

        gap: 12px;

        min-height: 80px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

    .living-hero {
        min-height: auto;

        padding:
            120px
            20px
            70px;

        background-size:
            48px
            48px;
    }


    .living-hero::before {
        top: 94px;

        left: 20px;
        right: 20px;

        height: 6px;
    }


    .living-ghost-word {
        top: 38%;

        font-size: 40vw;
    }


    .living-hero-meta {
        margin-top: 15px;

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }


    .living-hero-stage {
        grid-template-columns: 1fr;

        gap: 70px;

        padding:
            70px
            0;
    }


    .living-hero-title {
        font-size:
            clamp(
                65px,
                16vw,
                110px
            );
    }


    .living-hero-description {
        margin-top: 35px;
    }


    .work-live-index {
        width: 100%;
    }


    .work-index-row {
        min-height: 82px;
    }


    .living-hero-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 28px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 560px) {

    .living-hero-title {
        font-size: 17vw;
    }


    .work-index-row {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            32px;

        gap: 10px;

        min-height: 76px;

        padding:
            13px
            12px;

        border-radius: 15px;
    }


    .work-index-number {
        font-size: 22px;
    }


    .work-index-project strong {
        font-size: 14px;
    }


    .work-index-project span {
        font-size: 7px;
    }


    .work-index-signal {
        width: 30px;
        height: 30px;

        border-radius: 8px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .living-ghost-word,
    .living-status-dot,
    .living-hero-bottom::before,
    .living-scroll-signal,
    .work-index-live::before,
    .work-index-row,
    .work-index-number,
    .work-index-signal,
    .work-index-project span {
        animation: none !important;
    }


    .work-index-row:first-child {
        color: #F5F2EA;

        background: #151619;

        border-color: #151619;
    }


    .work-index-row:first-child
    .work-index-number {
        color: #D8FF68;
    }


    .work-index-row:first-child
    .work-index-signal {
        background: #D8FF68;

        border-color: #D8FF68;
    }


    .work-index-row:first-child
    .work-index-project span {
        color:
            rgba(245, 242, 234, 0.63);
    }

}