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

Space Vanta Theme 1.0

Module:
Bundle Story Icons

Path:
public/bundle-template/bundle-story/story/icons.css

Responsibility:
Icon Geometry / Construction

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


/* =========================================================
   01. Symbol Container
   ========================================================= */

.sv-bundle-story__symbol {

    position: relative;

    width: 96px;
    height: 96px;

    flex: 0 0 96px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}


/* =========================================================
   02. SVG
   ========================================================= */

.sv-bundle-story__symbol-svg {

    display: block;

    width: 96px;
    height: 96px;

    overflow: visible;
}


/* =========================================================
   03. Multi-Line Construction
   ========================================================= */

.sv-story-symbol__fragment {

    fill: none;

    stroke-width: 3;

    stroke-linecap: square;
    stroke-linejoin: miter;

    vector-effect:
        non-scaling-stroke;

    transform-box:
        fill-box;

    transform-origin:
        center;
}


/* =========================================================
   04. Secondary Lines
   ========================================================= */

.sv-story-symbol__line--secondary {

    stroke-width: 2.15;
}


/* =========================================================
   05. Metallic Highlight Lines
   ========================================================= */

.sv-story-symbol__line--highlight {

    stroke-width: 1.5;
}


/* =========================================================
   06. Structural Shadow Lines
   ========================================================= */

.sv-story-symbol__line--shadow {

    stroke-width: 1.8;

    opacity: 0.72;
}


/* =========================================================
   07. Cold Blue Signal
   ========================================================= */

.sv-story-symbol__signal {

    fill: none;

    stroke-width: 2.3;

    stroke-linecap: square;
    stroke-linejoin: miter;

    opacity: 0;

    pointer-events: none;

    transform-box:
        fill-box;

    transform-origin:
        center;
}


/* =========================================================
   08. Symbol Specific Geometry
   ========================================================= */


/* ---------------------------------------------------------
   CURATION
   Hollow / Imperfect Square
--------------------------------------------------------- */

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

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

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

    transform:
        translate(3px, -1px);
}

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

    transform:
        translate(1px, 3px);
}

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

    transform:
        translate(-3px, 2px);
}


/* ---------------------------------------------------------
   BALANCE
   Existing Folded Structure
--------------------------------------------------------- */

.sv-bundle-story-item--balance .sv-story-symbol__fragment--1,
.sv-bundle-story-item--balance .sv-story-symbol__fragment--2,
.sv-bundle-story-item--balance .sv-story-symbol__fragment--3 {

    transform:
        translate(0, 0);
}


/* ---------------------------------------------------------
   RHYTHM
   Horizontal Interval
--------------------------------------------------------- */

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

    transform:
        translate(-4px, 0);
}

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

    transform:
        translate(0, 0);
}

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

    transform:
        translate(4px, 0);
}


/* ---------------------------------------------------------
   LIVING
   Compact Fold
--------------------------------------------------------- */

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

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

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

    transform:
        translate(5px, 0);
}

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

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


/* =========================================================
   09. Focus
   ========================================================= */

.sv-bundle-story__symbol:focus-visible {

    outline:
        2px solid var(--sv-story-signal);

    outline-offset:
        7px;
}


/* =========================================================
   10. Mobile
   ========================================================= */

@media (max-width: 767px) {

    .sv-bundle-story__symbol {

        width: 88px;
        height: 88px;

        flex-basis: 88px;
    }

    .sv-bundle-story__symbol-svg {

        width: 88px;
        height: 88px;
    }

}


/* =========================================================
   11. Reduced Motion
   ========================================================= */

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

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

        transition: none;
    }

}