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

Space Vanta Theme 1.0

Featured Function:
Vision

Module:
Transition Base

File:
public/header/featured-functions/vision/transition/base.css

Version:
VISION-TRANSITION-BASE-002

Responsibility:
- Temporary Transition Layer
- Transition Aperture base
- Shared Aperture material
- Shared transition behavior

Does NOT control:
- Stage position
- Stage timing
- Panel state

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


/* =================================================
   TRANSITION LAYER
================================================= */

.sv-vision-transition-layer {

    position:
        fixed;

    inset:
        0;

    z-index:
        1200;

    width:
        100vw;

    height:
        100vh;

    overflow:
        hidden;

    pointer-events:
        none;

    opacity:
        1;

    visibility:
        visible;

}


/* =================================================
   TRANSITION APERTURE
================================================= */

.sv-vision-transition-aperture {

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        30px;

    height:
        22px;

    display:
        block;

    transform-origin:
        center center;

    transform:
        translate3d(var(--vision-origin-x),
            var(--vision-origin-y),
            0) translate(-50%, -50%) rotate(-2deg) scale(1);

    opacity:
        1;

    transform-style:
        preserve-3d;

    will-change:
        transform,
        opacity,
        filter;

    transition:
        transform 520ms cubic-bezier(.16, 1, .3, 1),
        opacity 360ms ease,
        filter 520ms ease;

}


/* =================================================
   SHARED APERTURE FRAGMENTS
================================================= */

.sv-vision-transition-aperture .sv-vision-aperture__fragment,

.sv-vision-transition-aperture .sv-vision-space__aperture-fragment {

    position:
        absolute;

    display:
        block;

    height:
        2px;

    transform-origin:
        center center;

    background:
        linear-gradient(90deg,
            rgba(178, 186, 194, .78),
            rgba(238, 241, 244, .98),
            rgba(92, 127, 165, .76));

    box-shadow:
        0 0 4px rgba(72, 112, 154, .12);

    transition:
        transform 520ms cubic-bezier(.16, 1, .3, 1),
        opacity 360ms ease,
        filter 360ms ease;

}


/* =================================================
   FRAGMENT GEOMETRY
================================================= */

.sv-vision-transition-aperture .sv-vision-aperture__fragment--a,

.sv-vision-transition-aperture .sv-vision-space__aperture-fragment--a {

    width:
        11px;

    left:
        1px;

    top:
        5px;

    transform:
        rotate(24deg);

}


.sv-vision-transition-aperture .sv-vision-aperture__fragment--b,

.sv-vision-transition-aperture .sv-vision-space__aperture-fragment--b {

    width:
        11px;

    right:
        1px;

    top:
        5px;

    transform:
        rotate(-24deg);

}


.sv-vision-transition-aperture .sv-vision-aperture__fragment--c,

.sv-vision-transition-aperture .sv-vision-space__aperture-fragment--c {

    width:
        11px;

    left:
        1px;

    bottom:
        5px;

    transform:
        rotate(-24deg);

}


.sv-vision-transition-aperture .sv-vision-aperture__fragment--d,

.sv-vision-transition-aperture .sv-vision-space__aperture-fragment--d {

    width:
        11px;

    right:
        1px;

    bottom:
        5px;

    transform:
        rotate(24deg);

}


.sv-vision-transition-aperture .sv-vision-aperture__fragment--e,

.sv-vision-transition-aperture .sv-vision-space__aperture-fragment--e {

    width:
        8px;

    left:
        7px;

    top:
        10px;

    transform:
        rotate(-90deg);

    opacity:
        .68;

}


.sv-vision-transition-aperture .sv-vision-aperture__fragment--f,

.sv-vision-transition-aperture .sv-vision-space__aperture-fragment--f {

    width:
        8px;

    right:
        7px;

    top:
        10px;

    transform:
        rotate(90deg);

    opacity:
        .68;

}


/* =================================================
   CORE
================================================= */

.sv-vision-transition-aperture .sv-vision-aperture__core,

.sv-vision-transition-aperture .sv-vision-space__aperture-core {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

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

    background:
        rgba(104, 150, 194, .88);

    box-shadow:
        0 0 5px rgba(71, 123, 178, .28);

    transition:
        transform 520ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 520ms ease,
        opacity 360ms ease;

}


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

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

    .sv-vision-transition-aperture,

    .sv-vision-transition-aperture .sv-vision-aperture__fragment,

    .sv-vision-transition-aperture .sv-vision-space__aperture-fragment,

    .sv-vision-transition-aperture .sv-vision-aperture__core,

    .sv-vision-transition-aperture .sv-vision-space__aperture-core {

        transition:
            none;

    }

}