/**
 * OOI Platform - Hero Home relationnel.
 *
 * Le fond incarne un Moment. La chaîne orbitale montre
 * les Identities reliées à ce Moment par leurs Contributions.
 */

.ooi-hero--home {
    --ooi-home-hero-gutter: clamp(24px, 5vw, 88px);

    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: clamp(680px, 92svh, 960px);
    overflow: hidden;
    padding:
        clamp(96px, 12vh, 150px)
        var(--ooi-home-hero-gutter)
        clamp(92px, 12vh, 140px);
    box-sizing: border-box;
    background:
        radial-gradient(
            circle at 76% 28%,
            rgba(128, 197, 207, .14),
            transparent 34%
        ),
        radial-gradient(
            circle at 22% 82%,
            rgba(114, 112, 172, .2),
            transparent 40%
        ),
        #071426;
    color: #fff;
}

.ooi-hero--home .ooi-hero__background,
.ooi-hero--home .ooi-hero__overlay {
    position: absolute;
    inset: 0;
}

.ooi-hero--home .ooi-hero__background {
    z-index: -3;
}

.ooi-hero--home .ooi-hero__background-image {
    width: 78%;
    height: 100%;
    margin-left: 22%;
    object-fit: cover;
    object-position: center 42%;
    filter: saturate(.88) contrast(1.04);
}

.ooi-hero--home .ooi-hero__overlay {
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(3, 12, 25, .98) 0%,
            rgba(3, 12, 25, .88) 31%,
            rgba(3, 12, 25, .4) 56%,
            rgba(3, 12, 25, .16) 78%,
            rgba(3, 12, 25, .34) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3, 12, 25, .9) 0%,
            transparent 34%,
            rgba(3, 12, 25, .3) 100%
        );
}

.ooi-hero--home .ooi-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(320px, .78fr)
        minmax(520px, 1.22fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: center;
    width: min(100%, 1680px);
    min-height: calc(
        clamp(680px, 92svh, 960px)
        - clamp(188px, 24vh, 290px)
    );
    margin: 0 auto;
}


/* Contenu ------------------------------------------------ */

.ooi-hero--home .ooi-hero__content {
    position: relative;
    z-index: 6;
    min-width: 0;
    max-width: 720px;
}

.ooi-hero--home .ooi-hero__eyebrow {
    margin: 0 0 18px;
    color: #80C5CF;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ooi-hero--home .ooi-hero__title {
    max-width: 720px;
    margin: 0;
    color: #fff;
    font-size: clamp(50px, 5.4vw, 94px);
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.052em;
    text-wrap: balance;
}

.ooi-hero--home .ooi-hero__summary {
    max-width: 610px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.6;
}

.ooi-hero--home .ooi-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.ooi-hero--home .ooi-hero__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 25px;
    border: 1px solid transparent;
    border-radius: 9px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.ooi-hero--home .ooi-hero__action:hover {
    transform: translateY(-2px);
}

.ooi-hero--home .ooi-hero__action--primary {
    background: #80C5CF;
    color: #071426;
    box-shadow: 0 14px 34px rgba(128, 197, 207, .22);
}

.ooi-hero--home .ooi-hero__action--primary:hover {
    background: #9bd5dc;
    color: #071426;
    box-shadow: 0 18px 40px rgba(128, 197, 207, .3);
}

.ooi-hero--home .ooi-hero__action--secondary {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(7, 20, 38, .38);
    color: #fff;
    backdrop-filter: blur(10px);
}


/* Scène relationnelle ------------------------------------ */

.ooi-hero--home .ooi-hero__visual {
    position: relative;
    z-index: 7;
    min-width: 0;
    min-height: clamp(500px, 61vw, 720px);
}

.ooi-home-hero-visual {
    position: absolute;
    inset: 0;
    min-height: inherit;
}

.ooi-home-hero-visual__orbit {
    position: absolute;
    z-index: 1;
    border: 1px dotted rgba(255, 255, 255, .36);
    border-radius: 50%;
    pointer-events: none;
}

.ooi-home-hero-visual__orbit::before,
.ooi-home-hero-visual__orbit::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #80C5CF;
    box-shadow: 0 0 15px 3px rgba(128, 197, 207, .7);
}

.ooi-home-hero-visual__orbit--outer {
    inset: 4% -4% 6% -2%;
    transform: rotate(6deg);
}

.ooi-home-hero-visual__orbit--outer::before {
    top: 13%;
    left: 23%;
}

.ooi-home-hero-visual__orbit--outer::after {
    right: 5%;
    bottom: 28%;
    background: #7270AC;
    box-shadow: 0 0 15px 3px rgba(114, 112, 172, .72);
}

.ooi-home-hero-visual__orbit--inner {
    inset: 17% 10% 18% 8%;
    transform: rotate(-10deg);
    border-color: rgba(128, 197, 207, .28);
}

.ooi-home-hero-visual__orbit--inner::before {
    top: 55%;
    left: -3px;
    background: #FFAB4E;
    box-shadow: 0 0 15px 3px rgba(255, 171, 78, .62);
}

.ooi-home-hero-visual__orbit--inner::after {
    right: 18%;
    bottom: -3px;
    background: #AACF80;
    box-shadow: 0 0 15px 3px rgba(170, 207, 128, .62);
}

.ooi-home-hero-visual .ooi-identity-chain {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.ooi-home-hero-visual .ooi-identity-chain__track {
    position: absolute;
    inset: 0;
    display: block;
}

.ooi-home-hero-visual .ooi-identity-chain__item {
    position: absolute;
    z-index: 4;
    transform: translate(-50%, -50%);
}

.ooi-home-hero-visual .ooi-identity-bubble {
    --ooi-bubble-size: clamp(62px, 5.6vw, 96px);
    --ooi-bubble-ring: 3px;

    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .36));
}

.ooi-home-hero-visual
.ooi-identity-chain__item:nth-child(1) {
    top: 12%;
    left: 30%;
}

.ooi-home-hero-visual
.ooi-identity-chain__item:nth-child(2) {
    top: 17%;
    left: 72%;
}

.ooi-home-hero-visual
.ooi-identity-chain__item:nth-child(3) {
    top: 42%;
    left: 95%;
}

.ooi-home-hero-visual
.ooi-identity-chain__item:nth-child(4) {
    top: 78%;
    left: 83%;
}

.ooi-home-hero-visual
.ooi-identity-chain__item:nth-child(5) {
    top: 91%;
    left: 51%;
}

.ooi-home-hero-visual
.ooi-identity-chain__item:nth-child(6) {
    top: 73%;
    left: 16%;
}

.ooi-home-hero-visual
.ooi-identity-chain__item:nth-child(7) {
    top: 42%;
    left: 7%;
}

.ooi-home-hero-visual
.ooi-identity-chain__item:nth-child(8) {
    top: 30%;
    left: 48%;
}

.ooi-home-hero-visual
.ooi-identity-chain__item:nth-child(3n + 2)
.ooi-identity-bubble {
    --ooi-bubble-size: clamp(52px, 4.7vw, 78px);
}

.ooi-home-hero-visual
.ooi-identity-chain__item:nth-child(4n)
.ooi-identity-bubble {
    --ooi-bubble-size: clamp(46px, 4.1vw, 68px);
}

.ooi-home-hero-visual .ooi-identity-chain__preview {
    width: min(330px, 72vw);
}

.ooi-home-hero-visual__context {
    position: absolute;
    right: 1%;
    bottom: 4%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 320px;
    margin: 0;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(3, 12, 25, .56);
    color: rgba(255, 255, 255, .86);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.ooi-home-hero-visual__context > span {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #80C5CF;
    box-shadow: 0 0 10px rgba(128, 197, 207, .8);
}

.ooi-home-hero-visual__context small {
    padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, .22);
    color: #80C5CF;
    font: inherit;
}


/* Défilement --------------------------------------------- */

.ooi-hero--home .ooi-hero__scroll {
    position: absolute;
    bottom: 28px;
    left: var(--ooi-home-hero-gutter);
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
}


/* Responsive --------------------------------------------- */

@media (max-width: 1100px) {
    .ooi-hero--home {
        min-height: auto;
    }

    .ooi-hero--home .ooi-hero__inner {
        grid-template-columns: minmax(280px, .82fr) minmax(430px, 1.18fr);
        min-height: 650px;
    }

    .ooi-hero--home .ooi-hero__title {
        font-size: clamp(46px, 6.4vw, 72px);
    }
}

@media (max-width: 860px) {
    .ooi-hero--home {
        padding-top: 110px;
    }

    .ooi-hero--home .ooi-hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(3, 12, 25, .98) 0%,
                rgba(3, 12, 25, .72) 58%,
                rgba(3, 12, 25, .4) 100%
            );
    }

    .ooi-hero--home .ooi-hero__background-image {
        width: 100%;
        margin-left: 0;
        object-position: 60% center;
    }

    .ooi-hero--home .ooi-hero__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: auto;
    }

    .ooi-hero--home .ooi-hero__content {
        max-width: 680px;
    }

    .ooi-hero--home .ooi-hero__visual {
        min-height: 500px;
    }
}

@media (max-width: 620px) {
    .ooi-hero--home {
        --ooi-home-hero-gutter: 20px;

        padding-top: 112px;
        padding-bottom: 88px;
    }

    .ooi-hero--home .ooi-hero__title {
        font-size: clamp(38px, 11vw, 48px);
        line-height: .98;
    }

    .ooi-hero--home .ooi-hero__summary {
        margin-top: 20px;
        font-size: 16px;
    }

    .ooi-hero--home .ooi-hero__actions {
        margin-top: 25px;
    }

    .ooi-hero--home .ooi-hero__action {
        width: 100%;
    }

    .ooi-hero--home .ooi-hero__visual {
        min-height: 230px;
    }

    .ooi-home-hero-visual__orbit,
    .ooi-home-hero-visual__context {
        display: none;
    }

    .ooi-home-hero-visual .ooi-identity-chain {
        inset: 32px 0 auto;
    }

    .ooi-home-hero-visual .ooi-identity-chain__track {
        position: relative;
        inset: auto;
        display: flex;
        gap: 14px;
        overflow-x: auto;
        padding: 14px 2px 24px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ooi-home-hero-visual
    .ooi-identity-chain__track::-webkit-scrollbar {
        display: none;
    }

    .ooi-home-hero-visual .ooi-identity-chain__item {
        position: relative;
        top: auto !important;
        left: auto !important;
        flex: 0 0 auto;
        transform: none;
        scroll-snap-align: center;
    }

    .ooi-home-hero-visual .ooi-identity-bubble {
        --ooi-bubble-size: 70px !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .ooi-home-hero-visual .ooi-identity-chain__item {
        animation: ooi-home-hero-float 7s ease-in-out infinite;
    }

    .ooi-home-hero-visual
    .ooi-identity-chain__item:nth-child(even) {
        animation-delay: -3.5s;
    }
}

@keyframes ooi-home-hero-float {
    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -7px;
    }
}