/* ==========================================================================
   BAD INFLUENCE PREMIUM
   HOME PAGE

   Consolidated release stylesheet.

   CONTENT ORDER
   01. Home Core
   02. Homepage Motion
   03. Services Interaction

   Development modules are preserved in their original Home-specific
   source order.

   Shared Header and Hero systems remain separate global files.
   ========================================================================== */


/* ==========================================================================
   01. SOURCE MODULE: premium-home.css
   ========================================================================== */
/* ==========================================================================
   BAD INFLUENCE PREMIUM
   HOME PAGE

   Premium-only homepage styles live here.

   The original style.css remains the approved visual foundation.
   Do not use this file as an emergency patch graveyard.

   Build sections cleanly.
   Test desktop + wide + ultrawide + mobile before moving on.
   ========================================================================== */

/* BAD INFLUENCE PREMIUM HERO V1 START */


/* ==========================================================================
   PREMIUM HOME HERO
   ========================================================================== */

.premium-hero {
    position: relative;
    isolation: isolate;

    min-height:
        calc(100svh - 5rem);

    overflow: hidden;

    background:
        #100e0d;

    color:
        var(--porcelain);
}


/* --------------------------------------------------------------------------
   MEDIA
   -------------------------------------------------------------------------- */

.premium-hero__media {
    position: absolute;
    z-index: 0;

    inset: 0;

    margin: 0;
}


.premium-hero__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 58% center;
}


/* --------------------------------------------------------------------------
   IMAGE WASH
   -------------------------------------------------------------------------- */

.premium-hero__wash {
    position: absolute;
    z-index: 1;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(12, 10, 9, 0.96) 0%,
            rgba(12, 10, 9, 0.91) 24%,
            rgba(12, 10, 9, 0.68) 47%,
            rgba(12, 10, 9, 0.23) 70%,
            rgba(12, 10, 9, 0.12) 100%
        ),
        linear-gradient(
            180deg,
            rgba(10, 8, 7, 0.34) 0%,
            transparent 28%,
            transparent 70%,
            rgba(10, 8, 7, 0.72) 100%
        );
}


/* --------------------------------------------------------------------------
   INNER GRID
   -------------------------------------------------------------------------- */

.premium-hero__inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    grid-template-rows:
        1fr auto;

    min-height:
        calc(100svh - 5rem);

    padding:
        clamp(4rem, 8vh, 7rem)
        clamp(2rem, 4vw, 5rem)
        clamp(2rem, 4vh, 3.5rem);
}


/* --------------------------------------------------------------------------
   COPY
   -------------------------------------------------------------------------- */

.premium-hero__copy {
    grid-column:
        1 / span 8;

    align-self:
        center;

    max-width:
        78rem;
}


.premium-hero__eyebrow {
    display: flex;

    align-items: center;
    gap: 1rem;

    width: fit-content;

    margin:
        0
        0
        clamp(2rem, 3vh, 3rem);

    padding-bottom:
        0.65rem;

    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.35);

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.68rem,
            0.72vw,
            0.82rem
        );

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.premium-hero__eyebrow span {
    color:
        var(--cobalt);
}


.premium-hero h1 {
    margin: 0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            4.75rem,
            8.6vw,
            10.75rem
        );

    font-weight:
        700;

    line-height:
        0.79;

    letter-spacing:
        -0.075em;

    text-transform:
        uppercase;
}


.premium-hero h1 span {
    display: block;
}


.premium-hero h1 span:last-child {
    color:
        var(--porcelain);
}


.premium-hero__punchline {
    width:
        fit-content;

    margin:
        clamp(0.75rem, 1.5vh, 1.2rem)
        0
        0
        clamp(40%, 27vw, 44%);

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            2.7rem,
            4.6vw,
            5.8rem
        );

    font-style:
        italic;

    line-height:
        0.8;

    letter-spacing:
        -0.045em;

    color:
        var(--cobalt);
}


.premium-hero__lead {
    max-width:
        35rem;

    margin:
        clamp(2rem, 3vh, 3rem)
        0
        0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            1rem,
            1.08vw,
            1.22rem
        );

    line-height:
        1.45;

    color:
        rgba(242, 240, 233, 0.82);
}


/* --------------------------------------------------------------------------
   ACTIONS
   -------------------------------------------------------------------------- */

.premium-hero__actions {
    display: flex;

    flex-wrap: wrap;
    gap: 0.75rem;

    margin-top:
        clamp(2rem, 3.5vh, 3.25rem);
}


.premium-hero__action {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    min-width:
        13rem;

    padding:
        0.95rem
        1.05rem;

    border:
        1px solid
        rgba(242, 240, 233, 0.38);

    font-family:
        var(--font-mono);

    font-size:
        0.74rem;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}


.premium-hero__action--primary {
    border-color:
        var(--cobalt);

    background:
        var(--cobalt);

    color:
        var(--white);
}


.premium-hero__action--secondary {
    background:
        rgba(16, 14, 13, 0.42);

    color:
        var(--porcelain);

    backdrop-filter:
        blur(8px);
}


.premium-hero__action:hover,
.premium-hero__action:focus-visible {
    transform:
        translateY(-2px);
}


.premium-hero__action--secondary:hover,
.premium-hero__action--secondary:focus-visible {
    border-color:
        var(--cobalt);

    color:
        var(--white);
}


/* --------------------------------------------------------------------------
   PURCHASE NOTE
   -------------------------------------------------------------------------- */

.premium-hero__note {
    grid-column:
        10 / -1;

    align-self:
        end;

    justify-self:
        end;

    width:
        min(100%, 20rem);

    margin-bottom:
        4.2rem;

    padding:
        1rem
        0
        0;

    border-top:
        1px solid
        rgba(242, 240, 233, 0.36);

    color:
        var(--porcelain);
}


.premium-hero__note-label {
    display: block;

    margin-bottom:
        0.85rem;

    font-family:
        var(--font-mono);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    color:
        var(--cobalt);
}


.premium-hero__note strong {
    display: block;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            1.25rem,
            1.6vw,
            1.9rem
        );

    font-style:
        italic;

    line-height:
        1.08;
}


.premium-hero__note p {
    margin:
        0.45rem
        0
        0;

    font-family:
        var(--font-mono);

    font-size:
        0.72rem;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

    color:
        rgba(242, 240, 233, 0.62);
}


/* --------------------------------------------------------------------------
   SCROLL CUE
   -------------------------------------------------------------------------- */

.premium-hero__scroll {
    grid-column:
        1 / span 4;

    grid-row:
        2;

    display: inline-flex;

    align-items: center;
    gap: 0.7rem;

    width:
        fit-content;

    color:
        var(--porcelain);

    font-family:
        var(--font-mono);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.premium-hero__scroll span {
    display: grid;

    place-items: center;

    width:
        2rem;
    height:
        2rem;

    border:
        1px solid
        rgba(242, 240, 233, 0.72);

    border-radius:
        50%;
}


/* ==========================================================================
   LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1500px) {

    .premium-hero__inner {
        padding-left:
            clamp(4rem, 5vw, 7rem);

        padding-right:
            clamp(4rem, 5vw, 7rem);
    }


    .premium-hero__copy {
        grid-column:
            1 / span 7;
    }


    .premium-hero__media img {
        object-position:
            62% center;
    }

}


/* ==========================================================================
   ULTRAWIDE
   ========================================================================== */

@media (min-width: 1900px) {

    .premium-hero h1 {
        font-size:
            clamp(
                8rem,
                8vw,
                11.5rem
            );
    }


    .premium-hero__copy {
        max-width:
            86rem;
    }


    .premium-hero__lead {
        max-width:
            38rem;
    }


    .premium-hero__media img {
        object-position:
            65% center;
    }

}


/* ==========================================================================
   TABLET / SMALL DESKTOP
   ========================================================================== */

@media (max-width: 1100px) {

    .premium-hero__copy {
        grid-column:
            1 / span 9;
    }


    .premium-hero__note {
        grid-column:
            9 / -1;
    }


    .premium-hero h1 {
        font-size:
            clamp(
                4.6rem,
                10vw,
                7.5rem
            );
    }


    .premium-hero__wash {
        background:
            linear-gradient(
                90deg,
                rgba(12, 10, 9, 0.97) 0%,
                rgba(12, 10, 9, 0.88) 42%,
                rgba(12, 10, 9, 0.42) 78%,
                rgba(12, 10, 9, 0.26) 100%
            ),
            linear-gradient(
                180deg,
                rgba(10, 8, 7, 0.3) 0%,
                transparent 55%,
                rgba(10, 8, 7, 0.72) 100%
            );
    }

}


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

@media (max-width: 700px) {

    .premium-hero {
        min-height:
            calc(100svh - 4.5rem);
    }


    .premium-hero__media img {
        object-position:
            61% center;
    }


    .premium-hero__wash {
        background:
            linear-gradient(
                180deg,
                rgba(12, 10, 9, 0.70) 0%,
                rgba(12, 10, 9, 0.76) 30%,
                rgba(12, 10, 9, 0.93) 72%,
                rgba(12, 10, 9, 0.98) 100%
            );
    }


    .premium-hero__inner {
        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        min-height:
            calc(100svh - 4.5rem);

        padding:
            6.5rem
            1rem
            1.25rem;
    }


    .premium-hero__copy {
        width: 100%;
        max-width: none;
    }


    .premium-hero__eyebrow {
        margin-bottom:
            1.5rem;

        font-size:
            0.62rem;
    }


    .premium-hero h1 {
        font-size:
            clamp(
                3.7rem,
                17.5vw,
                5.4rem
            );

        line-height:
            0.82;
    }


    .premium-hero__punchline {
        margin:
            0.65rem
            0
            0
            43%;

        font-size:
            clamp(
                2.5rem,
                13vw,
                4rem
            );
    }


    .premium-hero__lead {
        max-width:
            30rem;

        margin-top:
            1.5rem;

        font-size:
            0.98rem;
    }


    .premium-hero__actions {
        display: grid;

        grid-template-columns:
            1fr;

        width:
            100%;

        margin-top:
            1.5rem;
    }


    .premium-hero__action {
        width:
            100%;

        min-width:
            0;
    }


    .premium-hero__note {
        display:
            none;
    }


    .premium-hero__scroll {
        margin-top:
            1.25rem;
    }

}


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

@media (max-width: 430px) {

    .premium-hero h1 {
        font-size:
            clamp(
                3.25rem,
                16.5vw,
                4.45rem
            );
    }


    .premium-hero__lead {
        max-width:
            22rem;
    }

}


/* BAD INFLUENCE PREMIUM HERO V1 END */

/* BAD INFLUENCE PREMIUM HERO ULTRAWIDE LIMIT V1.1 START */

@media (min-width: 1800px) {

    .premium-hero {
        min-height: 760px;
        height: min(calc(100svh - 5rem), 940px);
        max-height: 940px;
    }

    .premium-hero__inner {
        width: min(100%, 1920px);
        min-height: 760px;
        height: 100%;
        margin-inline: auto;

        padding-left: clamp(4rem, 4.5vw, 6rem);
        padding-right: clamp(4rem, 4.5vw, 6rem);
    }

    .premium-hero__copy {
        grid-column: 1 / span 7;
        max-width: 72rem;
    }

    .premium-hero h1 {
        font-size: clamp(7.5rem, 7vw, 9.5rem);
    }

    .premium-hero__punchline {
        font-size: clamp(3.4rem, 3.4vw, 4.8rem);
    }

    .premium-hero__media img {
        object-position: 62% center;
    }
}

@media (min-width: 2400px) {

    .premium-hero h1 {
        font-size: 9.5rem;
    }

    .premium-hero__punchline {
        font-size: 4.8rem;
    }

    .premium-hero__lead {
        font-size: 1.1rem;
        max-width: 34rem;
    }

    .premium-hero__media img {
        object-position: 64% center;
    }
}

/* BAD INFLUENCE PREMIUM HERO ULTRAWIDE LIMIT V1.1 END */

/* BAD INFLUENCE PREMIUM FULL CATEGORY BACKGROUND V1 START */


/* ==========================================================================
   PREMIUM CATEGORIES
   FULL-SECTION BACKGROUND SWITCHER
   ========================================================================== */

.category-index {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        var(--porcelain);

    transition:
        background-color 300ms ease;
}


/* --------------------------------------------------------------------------
   Disable the old FREE fixed category background.
   Premium now uses the live preview layer instead.
   -------------------------------------------------------------------------- */

.category-index::before {
    content: none;
    display: none;
}


/* --------------------------------------------------------------------------
   FULL-SECTION IMAGE LAYER
   -------------------------------------------------------------------------- */

.category-index .category-index__preview {
    position: absolute;
    z-index: 0;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    pointer-events: none;

    background:
        var(--porcelain);
}


/* Full bleed image */

.category-index .category-index__preview img {
    position: absolute;

    inset: -2%;

    display: block;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;
    object-position: center;

    opacity: 1;

    transform:
        scale(1.015);

    filter:
        saturate(0.92)
        contrast(0.98);

    transition:
        opacity 280ms ease,
        transform 700ms cubic-bezier(.2,.7,.2,1);
}


/* JS fade hook */

.category-index .category-index__preview img.is-changing {
    opacity: 0;

    transform:
        scale(1.035);
}


/* --------------------------------------------------------------------------
   PORCELAIN READABILITY WASH
   -------------------------------------------------------------------------- */

.category-index .category-index__preview::after {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(242, 240, 233, 0.76) 0%,
            rgba(242, 240, 233, 0.63) 25%,
            rgba(242, 240, 233, 0.45) 48%,
            rgba(242, 240, 233, 0.29) 72%,
            rgba(242, 240, 233, 0.37) 100%
        ),
        linear-gradient(
            180deg,
            rgba(242, 240, 233, 0.08) 0%,
            rgba(242, 240, 233, 0.14) 100%
        );
}


/* --------------------------------------------------------------------------
   CONTENT ABOVE BACKGROUND
   -------------------------------------------------------------------------- */

.category-index .category-index__heading,
.category-index .category-index__links {
    position: relative;
    z-index: 3;
}


/* Preserve the existing section number layer */

.category-index::after {
    z-index: 4;
}


/* --------------------------------------------------------------------------
   CATEGORY ROWS
   -------------------------------------------------------------------------- */

.category-index .category-index__links button {
    position: relative;

    background:
        transparent;

    transition:
        color 180ms ease,
        padding-left 180ms ease,
        border-color 180ms ease;
}


/* Active main category */

.category-index .category-index__links button.is-active span {
    color:
        var(--cobalt);
}


/* Tiny premium movement */

.category-index .category-index__links button.is-active {
    padding-left:
        0.35rem;
}


/* Supporting copy */

.category-index .category-index__links button small {
    transition:
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}


.category-index .category-index__links button.is-active small {
    color:
        var(--brown-black);

    opacity:
        1;

    transform:
        translateX(0.25rem);
}


/* Keyboard */

.category-index .category-index__links button:focus-visible {
    outline:
        2px solid
        var(--cobalt);

    outline-offset:
        4px;
}


/* --------------------------------------------------------------------------
   ACTIVE INDICATOR
   -------------------------------------------------------------------------- */

.category-index .category-index__links button::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 0;
    height: 2px;

    background:
        var(--cobalt);

    transform:
        translateY(-50%);

    transition:
        width 180ms ease;
}


.category-index .category-index__links button.is-active::before {
    width:
        0.2rem;
}


/* ==========================================================================
   LARGE DESKTOP / ULTRAWIDE
   ========================================================================== */

@media (min-width: 1500px) {

    .category-index .category-index__preview::after {
        background:
            linear-gradient(
                90deg,
                rgba(242, 240, 233, 0.76) 0%,
                rgba(242, 240, 233, 0.61) 24%,
                rgba(242, 240, 233, 0.41) 50%,
                rgba(242, 240, 233, 0.25) 75%,
                rgba(242, 240, 233, 0.33) 100%
            );
    }


    .category-index .category-index__preview img {
        object-position:
            center 52%;
    }

}


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

@media (max-width: 700px) {

    .category-index .category-index__preview img {
        inset: 0;

        width: 100%;
        height: 100%;

        transform:
            scale(1.01);

        object-position:
            center;
    }


    .category-index .category-index__preview img.is-changing {
        transform:
            scale(1.025);
    }


    .category-index .category-index__preview::after {
        background:
            linear-gradient(
                180deg,
                rgba(242, 240, 233, 0.81) 0%,
                rgba(242, 240, 233, 0.63) 38%,
                rgba(242, 240, 233, 0.55) 68%,
                rgba(242, 240, 233, 0.63) 100%
            );
    }


    .category-index .category-index__links button.is-active {
        padding-left:
            0.2rem;
    }

}


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

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

    .category-index .category-index__preview img,
    .category-index .category-index__links button,
    .category-index .category-index__links button small {
        transition:
            none;
    }

}


/* BAD INFLUENCE PREMIUM FULL CATEGORY BACKGROUND V1 END */


/* ==========================================================================
   02. SOURCE MODULE: premium-home-motion-v2.css
   ========================================================================== */
/* BAD INFLUENCE PREMIUM HOME MOTION V2 START */


/* ==========================================================================
   MOTION LANGUAGE

   No whole-section translation.

   We reveal:
   - typography
   - display panels
   - editorial copy
   - menu rows
   - scene artwork

   Every section gets choreography appropriate to its composition.
   ========================================================================== */


/* ==========================================================================
   SHARED KEYFRAMES
   ========================================================================== */

@keyframes homeV2MaskUp {

    from {
        opacity: 0;

        clip-path:
            inset(
                100%
                0
                0
                0
            );
    }

    to {
        opacity: 1;

        clip-path:
            inset(
                0
                0
                0
                0
            );
    }

}


@keyframes homeV2WipeRight {

    from {
        clip-path:
            inset(
                0
                100%
                0
                0
            );
    }

    to {
        clip-path:
            inset(
                0
                0
                0
                0
            );
    }

}


@keyframes homeV2PanelReveal {

    from {
        opacity:
            0;

        clip-path:
            inset(
                0
                7%
                0
                0
            );
    }

    to {
        opacity:
            1;

        clip-path:
            inset(
                0
                0
                0
                0
            );
    }

}


@keyframes homeV2Fade {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }

}


@keyframes homeV2FadeSoft {

    from {
        opacity:
            0;

        filter:
            blur(2px);
    }

    to {
        opacity:
            1;

        filter:
            blur(0);
    }

}


/* ==========================================================================
   02 / COLLECTION FILM
   --------------------------------------------------------------------------
   Each product scene reveals independently.
   The entire Collection section NEVER slides into frame.
   ========================================================================== */

#collection.home-motion-v2-pending
.collection-film__progress {
    opacity:
        0;

    clip-path:
        inset(
            0
            0
            100%
            0
        );
}


#collection.home-motion-v2-pending.is-home-v2-visible
.collection-film__progress {
    animation:
        homeV2MaskUp
        650ms
        cubic-bezier(.2,.75,.2,1)
        forwards;
}


/* SCENE ART */

.product-scene.home-motion-v2-pending
.product-scene__visual {
    opacity:
        0;

    clip-path:
        inset(
            0
            7%
            0
            0
        );
}


.product-scene.home-motion-v2-pending.is-home-v2-visible
.product-scene__visual {
    animation:
        homeV2PanelReveal
        950ms
        cubic-bezier(.2,.75,.2,1)
        forwards;
}


/* SCENE IDENTITY */

.product-scene.home-motion-v2-pending
.product-scene__identity {
    opacity:
        0;

    clip-path:
        inset(
            100%
            0
            0
            0
        );
}


.product-scene.home-motion-v2-pending.is-home-v2-visible
.product-scene__identity {
    animation:
        homeV2MaskUp
        780ms
        55ms
        cubic-bezier(.16,.8,.2,1)
        forwards;
}


/* SCENE STATEMENT */

.product-scene.home-motion-v2-pending
.product-scene__statement {
    opacity:
        0;

    clip-path:
        inset(
            100%
            0
            0
            0
        );
}


.product-scene.home-motion-v2-pending.is-home-v2-visible
.product-scene__statement {
    animation:
        homeV2MaskUp
        810ms
        105ms
        cubic-bezier(.16,.8,.2,1)
        forwards;
}


/* SUPPORTING SCENE DETAILS */

.product-scene.home-motion-v2-pending
.product-scene__microcopy,

.product-scene.home-motion-v2-pending
.product-scene__price-joke,

.product-scene.home-motion-v2-pending
.product-scene__disclaimer {
    opacity:
        0;
}


.product-scene.home-motion-v2-pending.is-home-v2-visible
.product-scene__microcopy,

.product-scene.home-motion-v2-pending.is-home-v2-visible
.product-scene__price-joke,

.product-scene.home-motion-v2-pending.is-home-v2-visible
.product-scene__disclaimer {
    animation:
        homeV2FadeSoft
        650ms
        155ms
        ease
        forwards;
}


/* ==========================================================================
   03 / CATEGORY INDEX

   Editorial heading first.
   Preview is wiped open.
   Rows appear quickly — NOT one giant delayed cascade.
   ========================================================================== */

#categories.home-motion-v2-pending
.category-index__heading {
    opacity:
        0;

    clip-path:
        inset(
            100%
            0
            0
            0
        );
}


#categories.home-motion-v2-pending.is-home-v2-visible
.category-index__heading {
    animation:
        homeV2MaskUp
        810ms
        cubic-bezier(.16,.8,.2,1)
        forwards;
}


#categories.home-motion-v2-pending
.category-index__preview {
    clip-path:
        inset(
            0
            100%
            0
            0
        );
}


#categories.home-motion-v2-pending.is-home-v2-visible
.category-index__preview {
    animation:
        homeV2WipeRight
        950ms
        45ms
        cubic-bezier(.2,.75,.2,1)
        forwards;
}


#categories.home-motion-v2-pending
.category-index__links button {
    opacity:
        0;

    clip-path:
        inset(
            0
            0
            100%
            0
        );
}


#categories.home-motion-v2-pending.is-home-v2-visible
.category-index__links button {
    animation:
        homeV2MaskUp
        600ms
        cubic-bezier(.2,.75,.2,1)
        forwards;
}


#categories.home-motion-v2-pending.is-home-v2-visible
.category-index__links button:nth-child(1) {
    animation-delay:
        85ms;
}


#categories.home-motion-v2-pending.is-home-v2-visible
.category-index__links button:nth-child(2) {
    animation-delay:
        125ms;
}


#categories.home-motion-v2-pending.is-home-v2-visible
.category-index__links button:nth-child(3) {
    animation-delay:
        165ms;
}


#categories.home-motion-v2-pending.is-home-v2-visible
.category-index__links button:nth-child(4) {
    animation-delay:
        205ms;
}


#categories.home-motion-v2-pending.is-home-v2-visible
.category-index__links button:nth-child(5) {
    animation-delay:
        245ms;
}


/* ==========================================================================
   04 / COUNTER

   Display panel opens.
   Typography reveals separately.
   ========================================================================== */

#counter.home-motion-v2-pending
.counter-story__portrait {
    clip-path:
        inset(
            0
            8%
            0
            0
        );

    opacity:
        0;
}


#counter.home-motion-v2-pending.is-home-v2-visible
.counter-story__portrait {
    animation:
        homeV2PanelReveal
        980ms
        cubic-bezier(.2,.75,.2,1)
        forwards;
}


#counter.home-motion-v2-pending
h2 {
    opacity:
        0;

    filter:
        blur(2px);
}


#counter.home-motion-v2-pending.is-home-v2-visible
h2 {
    animation:
        homeV2FadeSoft
        680ms
        45ms
        cubic-bezier(.2,.75,.2,1)
        forwards;
}


#counter.home-motion-v2-pending
.counter-questions p {
    opacity:
        0;
}


#counter.home-motion-v2-pending.is-home-v2-visible
.counter-questions p {
    animation:
        homeV2FadeSoft
        680ms
        ease
        forwards;
}


#counter.home-motion-v2-pending.is-home-v2-visible
.counter-questions p:nth-child(1) {
    animation-delay:
        120ms;
}


#counter.home-motion-v2-pending.is-home-v2-visible
.counter-questions p:nth-child(2) {
    animation-delay:
        175ms;
}


#counter.home-motion-v2-pending.is-home-v2-visible
.counter-questions p:nth-child(3) {
    animation-delay:
        230ms;
}


/* ==========================================================================
   05 / SERVICES

   Giant background word opens like a graphic layer.
   Menu and detail arrive as separate editorial systems.
   ========================================================================== */

#services.home-motion-v2-pending
.services-index__word {
    clip-path:
        inset(
            0
            100%
            0
            0
        );
}


#services.home-motion-v2-pending.is-home-v2-visible
.services-index__word {
    animation:
        homeV2WipeRight
        1060ms
        cubic-bezier(.2,.75,.2,1)
        forwards;
}


#services.home-motion-v2-pending
.services-index__menu button {
    opacity:
        0;

    clip-path:
        inset(
            0
            0
            100%
            0
        );
}


#services.home-motion-v2-pending.is-home-v2-visible
.services-index__menu button {
    animation:
        homeV2MaskUp
        590ms
        cubic-bezier(.2,.75,.2,1)
        forwards;
}


#services.home-motion-v2-pending.is-home-v2-visible
.services-index__menu button:nth-child(1) {
    animation-delay:
        45ms;
}


#services.home-motion-v2-pending.is-home-v2-visible
.services-index__menu button:nth-child(2) {
    animation-delay:
        85ms;
}


#services.home-motion-v2-pending.is-home-v2-visible
.services-index__menu button:nth-child(3) {
    animation-delay:
        125ms;
}


#services.home-motion-v2-pending.is-home-v2-visible
.services-index__menu button:nth-child(4) {
    animation-delay:
        165ms;
}


#services.home-motion-v2-pending.is-home-v2-visible
.services-index__menu button:nth-child(5) {
    animation-delay:
        205ms;
}


#services.home-motion-v2-pending
.services-index__detail > span,

#services.home-motion-v2-pending
.services-index__detail h3,

#services.home-motion-v2-pending
.services-index__detail p {
    opacity:
        0;
}


#services.home-motion-v2-pending.is-home-v2-visible
.services-index__detail > span {
    animation:
        homeV2Fade
        520ms
        110ms
        ease
        forwards;
}


#services.home-motion-v2-pending.is-home-v2-visible
.services-index__detail h3 {
    animation:
        homeV2MaskUp
        780ms
        145ms
        cubic-bezier(.16,.8,.2,1)
        forwards;
}


#services.home-motion-v2-pending.is-home-v2-visible
.services-index__detail p {
    animation:
        homeV2FadeSoft
        650ms
        205ms
        ease
        forwards;
}


/* ==========================================================================
   06 / SERIOUS MINUTE

   Quieter section = quieter motion.
   ========================================================================== */

#responsibility.home-motion-v2-pending
.serious-minute__label {
    opacity:
        0;
}


#responsibility.home-motion-v2-pending.is-home-v2-visible
.serious-minute__label {
    animation:
        homeV2Fade
        550ms
        ease
        forwards;
}


#responsibility.home-motion-v2-pending
h2 {
    opacity:
        0;

    clip-path:
        inset(
            100%
            0
            0
            0
        );
}


#responsibility.home-motion-v2-pending.is-home-v2-visible
h2 {
    animation:
        homeV2MaskUp
        900ms
        45ms
        cubic-bezier(.16,.8,.2,1)
        forwards;
}


#responsibility.home-motion-v2-pending
.serious-minute__copy p {
    opacity:
        0;
}


#responsibility.home-motion-v2-pending.is-home-v2-visible
.serious-minute__copy p {
    animation:
        homeV2FadeSoft
        690ms
        ease
        forwards;
}


#responsibility.home-motion-v2-pending.is-home-v2-visible
.serious-minute__copy p:nth-child(1) {
    animation-delay:
        115ms;
}


#responsibility.home-motion-v2-pending.is-home-v2-visible
.serious-minute__copy p:nth-child(2) {
    animation-delay:
        170ms;
}


/* ==========================================================================
   07 / VISIT

   Closing section gets a clean editorial finish.
   ========================================================================== */

#visit.home-motion-v2-pending
.visit-panel__address {
    opacity:
        0;
}


#visit.home-motion-v2-pending.is-home-v2-visible
.visit-panel__address {
    animation:
        homeV2FadeSoft
        600ms
        ease
        forwards;
}


#visit.home-motion-v2-pending
h2 {
    opacity:
        0;

    clip-path:
        inset(
            100%
            0
            0
            0
        );
}


#visit.home-motion-v2-pending.is-home-v2-visible
h2 {
    animation:
        homeV2MaskUp
        950ms
        40ms
        cubic-bezier(.16,.8,.2,1)
        forwards;
}


#visit.home-motion-v2-pending
.visit-panel__open {
    opacity:
        0;

    clip-path:
        inset(
            0
            100%
            0
            0
        );
}


#visit.home-motion-v2-pending.is-home-v2-visible
.visit-panel__open {
    animation:
        homeV2PanelReveal
        850ms
        100ms
        cubic-bezier(.2,.75,.2,1)
        forwards;
}


#visit.home-motion-v2-pending
.visit-panel__edge-info {
    opacity:
        0;
}


#visit.home-motion-v2-pending.is-home-v2-visible
.visit-panel__edge-info {
    animation:
        homeV2Fade
        600ms
        155ms
        ease
        forwards;
}


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

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

    .home-motion-v2-pending
    .collection-film__progress,

    .product-scene.home-motion-v2-pending
    .product-scene__visual,

    .product-scene.home-motion-v2-pending
    .product-scene__identity,

    .product-scene.home-motion-v2-pending
    .product-scene__statement,

    .product-scene.home-motion-v2-pending
    .product-scene__microcopy,

    .product-scene.home-motion-v2-pending
    .product-scene__price-joke,

    .product-scene.home-motion-v2-pending
    .product-scene__disclaimer,

    #categories.home-motion-v2-pending
    .category-index__heading,

    #categories.home-motion-v2-pending
    .category-index__preview,

    #categories.home-motion-v2-pending
    .category-index__links button,

    #counter.home-motion-v2-pending
    .counter-story__portrait,

    #counter.home-motion-v2-pending
    h2,

    #counter.home-motion-v2-pending
    .counter-questions p,

    #services.home-motion-v2-pending
    .services-index__word,

    #services.home-motion-v2-pending
    .services-index__menu button,

    #services.home-motion-v2-pending
    .services-index__detail > span,

    #services.home-motion-v2-pending
    .services-index__detail h3,

    #services.home-motion-v2-pending
    .services-index__detail p,

    #responsibility.home-motion-v2-pending
    .serious-minute__label,

    #responsibility.home-motion-v2-pending
    h2,

    #responsibility.home-motion-v2-pending
    .serious-minute__copy p,

    #visit.home-motion-v2-pending
    .visit-panel__address,

    #visit.home-motion-v2-pending
    h2,

    #visit.home-motion-v2-pending
    .visit-panel__open,

    #visit.home-motion-v2-pending
    .visit-panel__edge-info {
        opacity:
            1 !important;

        clip-path:
            none !important;

        filter:
            none !important;

        animation:
            none !important;
    }

}


/* BAD INFLUENCE PREMIUM HOME MOTION V2 END */


/* ==========================================================================
   03. SOURCE MODULE: premium-home-services-interaction.css
   ========================================================================== */
/* BAD INFLUENCE HOME SERVICES INTERACTION V1 START */


/* ==========================================================================
   DETAIL PANEL

   Geometry stays exactly where the original design put it.
   ========================================================================== */

.services-index__detail {
    position:
        sticky;
}


/* ==========================================================================
   COBALT RESPONSE LINE
   ========================================================================== */

.services-index__detail::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        -1.25rem;

    width:
        min(
            100%,
            8rem
        );

    height:
        2px;

    background:
        var(--cobalt);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    opacity:
        0;

    pointer-events:
        none;
}


.services-index__detail.is-service-refreshing::after {
    animation:
        homeServiceScan
        620ms
        cubic-bezier(.2,.75,.2,1)
        both;
}


/* ==========================================================================
   DETAIL CONTENT REVEAL

   No translateX / translateY slideshow movement.

   It resolves through:
   - opacity
   - tiny blur
   - mask opening
   ========================================================================== */

.services-index__detail.is-service-refreshing > span {
    animation:
        homeServiceMetaIn
        430ms
        cubic-bezier(.2,.75,.2,1)
        both;
}


.services-index__detail.is-service-refreshing > h3 {
    animation:
        homeServiceTitleIn
        560ms
        45ms
        cubic-bezier(.16,.8,.2,1)
        both;
}


.services-index__detail.is-service-refreshing > p {
    animation:
        homeServiceCopyIn
        520ms
        105ms
        cubic-bezier(.2,.75,.2,1)
        both;
}


/* ==========================================================================
   PREVIEW STATE
   ========================================================================== */

.services-index__detail.is-service-previewing > span {
    opacity:
        0.78;
}


/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes homeServiceScan {

    0% {
        transform:
            scaleX(0);

        opacity:
            0;
    }

    20% {
        opacity:
            1;
    }

    100% {
        transform:
            scaleX(1);

        opacity:
            1;
    }

}


@keyframes homeServiceMetaIn {

    from {
        opacity:
            0;

        filter:
            blur(2px);
    }

    to {
        opacity:
            1;

        filter:
            blur(0);
    }

}


@keyframes homeServiceTitleIn {

    from {
        opacity:
            0;

        clip-path:
            inset(
                100%
                0
                0
                0
            );
    }

    to {
        opacity:
            1;

        clip-path:
            inset(
                0
                0
                0
                0
            );
    }

}


@keyframes homeServiceCopyIn {

    from {
        opacity:
            0;

        filter:
            blur(3px);
    }

    to {
        opacity:
            1;

        filter:
            blur(0);
    }

}


/* ==========================================================================
   KEYBOARD
   ========================================================================== */

.services-index__menu button:focus-visible {
    outline:
        2px solid
        var(--cobalt);

    outline-offset:
        0.25rem;
}


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

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

    .services-index__detail::after {
        display:
            none;
    }


    .services-index__detail.is-service-refreshing > span,

    .services-index__detail.is-service-refreshing > h3,

    .services-index__detail.is-service-refreshing > p {
        animation:
            none !important;

        opacity:
            1 !important;

        filter:
            none !important;

        clip-path:
            none !important;
    }

}


/* BAD INFLUENCE HOME SERVICES INTERACTION V1 END */