/*
================================================

Space Vanta Theme 1.0

Module:
Bundle Story Motion

Path:
public/brand/bundle/story-motion.css

Responsibility:
Interaction / Motion ONLY

================================================
*/


.sv-bundle-story {

    --sv-story-motion-duration:
        620ms;

    --sv-story-motion-ease:
        cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   01. Base
   ========================================================= */

.sv-story-symbol__fragment {

    transition:
        transform var(--sv-story-motion-duration) var(--sv-story-motion-ease);
}


.sv-story-symbol__signal {

    transition:
        opacity 360ms ease;
}


.sv-bundle-story__title {

    transition:
        transform 420ms var(--sv-story-motion-ease),

        letter-spacing 420ms var(--sv-story-motion-ease);
}


/* =========================================================
   02. CURATION
   Inward / Gather
   ========================================================= */

.sv-bundle-story-item--curation .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--1,

.sv-bundle-story-item--curation.is-active .sv-story-symbol__fragment--1 {

    transform:
        translate(8px, 8px);
}


.sv-bundle-story-item--curation .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--2,

.sv-bundle-story-item--curation.is-active .sv-story-symbol__fragment--2 {

    transform:
        translate(-8px, 8px);
}


.sv-bundle-story-item--curation .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--3,

.sv-bundle-story-item--curation.is-active .sv-story-symbol__fragment--3 {

    transform:
        translate(-7px, -7px);
}


.sv-bundle-story-item--curation .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--4,

.sv-bundle-story-item--curation.is-active .sv-story-symbol__fragment--4 {

    transform:
        translate(8px, -7px);
}


.sv-bundle-story-item--curation:hover .sv-story-symbol__signal,

.sv-bundle-story-item--curation.is-active .sv-story-symbol__signal {

    opacity:
        1;
}


/* =========================================================
   03. BALANCE
   Existing Fold
   ========================================================= */

.sv-bundle-story-item--balance .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--2,

.sv-bundle-story-item--balance.is-active .sv-story-symbol__fragment--2 {

    transform:
        translate(13px, -8px) rotate(4deg);
}


.sv-bundle-story-item--balance .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--3,

.sv-bundle-story-item--balance.is-active .sv-story-symbol__fragment--3 {

    transform:
        translate(13px, 8px) rotate(-4deg);
}


.sv-bundle-story-item--balance:hover .sv-story-symbol__signal,

.sv-bundle-story-item--balance.is-active .sv-story-symbol__signal {

    opacity:
        0.92;
}


/* =========================================================
   04. RHYTHM
   Horizontal Expansion
   ========================================================= */

.sv-bundle-story-item--rhythm .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--1,

.sv-bundle-story-item--rhythm.is-active .sv-story-symbol__fragment--1 {

    transform:
        translateX(-11px) scaleX(1.12);
}


.sv-bundle-story-item--rhythm .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--2,

.sv-bundle-story-item--rhythm.is-active .sv-story-symbol__fragment--2 {

    transform:
        scaleX(1.18);
}


.sv-bundle-story-item--rhythm .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--3,

.sv-bundle-story-item--rhythm.is-active .sv-story-symbol__fragment--3 {

    transform:
        translateX(11px) scaleX(1.12);
}


.sv-bundle-story-item--rhythm:hover .sv-story-symbol__signal,

.sv-bundle-story-item--rhythm.is-active .sv-story-symbol__signal {

    opacity:
        0.92;
}


/* =========================================================
   05. LIVING
   Outward Expansion
   ========================================================= */

.sv-bundle-story-item--living .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--1,

.sv-bundle-story-item--living.is-active .sv-story-symbol__fragment--1 {

    transform:
        translate(-10px, -10px) scale(1.08);
}


.sv-bundle-story-item--living .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--2,

.sv-bundle-story-item--living.is-active .sv-story-symbol__fragment--2 {

    transform:
        translateX(0) scaleY(1.16);
}


.sv-bundle-story-item--living .sv-bundle-story__symbol:hover .sv-story-symbol__fragment--3,

.sv-bundle-story-item--living.is-active .sv-story-symbol__fragment--3 {

    transform:
        translate(10px, 10px) scale(1.08);
}


.sv-bundle-story-item--living:hover .sv-story-symbol__signal,

.sv-bundle-story-item--living.is-active .sv-story-symbol__signal {

    opacity:
        1;
}


/* =========================================================
   Story Typography Motion
   ========================================================= */


/* ---------------------------------------------------------
   CURATION
   Gather / Compose
--------------------------------------------------------- */

.sv-bundle-story-item--curation .sv-bundle-story__title:hover,
.sv-bundle-story-item--curation.is-active .sv-bundle-story__title {

    transform:
        translateX(5px);

    letter-spacing:
        0.075em;
}


/* ---------------------------------------------------------
   BALANCE
   Restrained / Stable
--------------------------------------------------------- */

.sv-bundle-story-item--balance .sv-bundle-story__title:hover,
.sv-bundle-story-item--balance.is-active .sv-bundle-story__title {

    transform:
        translateX(2px);

    letter-spacing:
        0.045em;
}


/* ---------------------------------------------------------
   RHYTHM
   Interval / Expansion
--------------------------------------------------------- */

.sv-bundle-story-item--rhythm .sv-bundle-story__title:hover,
.sv-bundle-story-item--rhythm.is-active .sv-bundle-story__title {

    transform:
        translateX(7px);

    letter-spacing:
        0.09em;
}


/* ---------------------------------------------------------
   LIVING
   Open / Spatial
--------------------------------------------------------- */

.sv-bundle-story-item--living .sv-bundle-story__title:hover,
.sv-bundle-story-item--living.is-active .sv-bundle-story__title {

    transform:
        translateX(9px);

    letter-spacing:
        0.105em;
}


/* =========================================================
   07. Title → Symbol
   ========================================================= */

.sv-bundle-story-item:has(.sv-bundle-story__title:hover) .sv-story-symbol__signal {

    opacity:
        0.72;
}


/* =========================================================
   08. Symbol → Title
   ========================================================= */

.sv-bundle-story-item:has(.sv-bundle-story__symbol:hover) .sv-bundle-story__title {

    transform:
        translateX(3px);
}


/* =========================================================
   09. Mobile
   Same Geometry Language
   ========================================================= */

@media (max-width: 767px) {

    /* Curation */

    .sv-bundle-story-item--curation.is-active .sv-story-symbol__fragment--1 {

        transform:
            translate(6px, 6px);
    }

    .sv-bundle-story-item--curation.is-active .sv-story-symbol__fragment--2 {

        transform:
            translate(-6px, 6px);
    }

    .sv-bundle-story-item--curation.is-active .sv-story-symbol__fragment--3 {

        transform:
            translate(-6px, -6px);
    }

    .sv-bundle-story-item--curation.is-active .sv-story-symbol__fragment--4 {

        transform:
            translate(6px, -6px);
    }


    /* Balance */

    .sv-bundle-story-item--balance.is-active .sv-story-symbol__fragment--2 {

        transform:
            translate(9px, -6px) rotate(3deg);
    }

    .sv-bundle-story-item--balance.is-active .sv-story-symbol__fragment--3 {

        transform:
            translate(9px, 6px) rotate(-3deg);
    }


    /* Rhythm */

    .sv-bundle-story-item--rhythm.is-active .sv-story-symbol__fragment--1 {

        transform:
            translateX(-8px) scaleX(1.08);
    }

    .sv-bundle-story-item--rhythm.is-active .sv-story-symbol__fragment--2 {

        transform:
            scaleX(1.12);
    }

    .sv-bundle-story-item--rhythm.is-active .sv-story-symbol__fragment--3 {

        transform:
            translateX(8px) scaleX(1.08);
    }


    /* Living */

    .sv-bundle-story-item--living.is-active .sv-story-symbol__fragment--1 {

        transform:
            translate(-7px, -7px) scale(1.05);
    }

    .sv-bundle-story-item--living.is-active .sv-story-symbol__fragment--2 {

        transform:
            scaleY(1.1);
    }

    .sv-bundle-story-item--living.is-active .sv-story-symbol__fragment--3 {

        transform:
            translate(7px, 7px) scale(1.05);
    }


    /* Mobile Signal */

    .sv-bundle-story-item.is-active .sv-story-symbol__signal {

        opacity:
            0.94;
    }

}


/* =========================================================
   10. Reduced Motion
   ========================================================= */

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

    .sv-story-symbol__fragment,
    .sv-story-symbol__signal,
    .sv-bundle-story__title {

        transition:
            none;
    }

}