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

Space Vanta Theme 1.0

Module:
Find Transition

Version:
FIND-TRANSITION-FOUNDATION-006

Purpose:
Find spatial transition orchestration.

Flow:
Header
→ Center
→ Cube Rotation
→ Axial Fracture
→ Inner Box
→ Panel
→ Reassembly
→ Panel Static Cube

Close:
Panel Static Cube
→ Closing Center
→ Header Target
→ Header Find

Responsibilities:
- Transition layer
- Transition Cube movement
- Fragment motion
- Inner Box transition
- Panel handoff
- Close return

No:
- Discovery
- Search
- Product rendering
- Data logic

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


/* =================================================
   01. TRANSITION LAYER
================================================= */

.sv-find-transition-layer {

    position:
        fixed;

    inset:
        0;

    z-index:
        1200;

    pointer-events:
        none;

    overflow:
        hidden;

}


/* =================================================
   02. TRANSITION CUBE
================================================= */

.sv-find-transition-cube {

    position:
        absolute;

    width:
        52px;

    height:
        52px;

    display:
        block;

    transform-origin:
        center center;

    transform-style:
        preserve-3d;

    translate:
        var(--find-origin-tx, 0px) var(--find-origin-ty, 0px) 0;

    rotate:
        0 0 1 0deg;

    scale:
        var(--find-origin-scale, 1);

    opacity:
        1;

    will-change:
        translate,
        rotate,
        scale,
        opacity;

    transition:
        translate 760ms cubic-bezier(.16, 1, .3, 1),
        rotate 760ms cubic-bezier(.16, 1, .3, 1),
        scale 760ms cubic-bezier(.16, 1, .3, 1),
        opacity 360ms ease;

}


/* =================================================
   03. ORIGIN
================================================= */

.sv-find-transition-layer[data-find-stage="origin"] .sv-find-transition-cube {

    translate:
        var(--find-origin-tx, 0px) var(--find-origin-ty, 0px) 0;

    rotate:
        0 0 1 0deg;

    scale:
        var(--find-origin-scale, 1);

    opacity:
        1;

}


/* =================================================
   04. CENTER
================================================= */

.sv-find-transition-layer[data-find-stage="center"] .sv-find-transition-cube {

    translate:
        calc(50vw - 26px) calc(50vh - 26px) 0;

    rotate:
        .15 1 .08 8deg;

    scale:
        2.55;

}


/* =================================================
   05. TWIST
================================================= */

.sv-find-transition-layer[data-find-stage="twist"] .sv-find-transition-cube {

    translate:
        calc(50vw - 26px) calc(50vh - 26px) 0;

    rotate:
        .28 1 .16 30deg;

    scale:
        2.95;

    transition:
        translate 500ms cubic-bezier(.16, 1, .3, 1),
        rotate 760ms cubic-bezier(.18, .8, .2, 1),
        scale 620ms cubic-bezier(.16, 1, .3, 1);

}


/* =================================================
   06. OPENING
================================================= */

.sv-find-transition-layer[data-find-stage="opening"] .sv-find-transition-cube {

    translate:
        calc(50vw - 26px) calc(50vh - 26px) 0;

    rotate:
        -.16 1 .08 48deg;

    scale:
        3.25;

    transition:
        translate 560ms cubic-bezier(.16, 1, .3, 1),
        rotate 620ms cubic-bezier(.22, .61, .36, 1),
        scale 560ms cubic-bezier(.16, 1, .3, 1);

}


/* =================================================
   07. FRACTURE
================================================= */

.sv-find-transition-layer[data-find-stage="fracture"] .sv-find-transition-cube {

    translate:
        calc(50vw - 26px) calc(50vh - 26px) 0;

    rotate:
        -.08 1 .04 56deg;

    scale:
        3.15;

    transition:
        rotate 720ms cubic-bezier(.16, 1, .3, 1),
        scale 520ms cubic-bezier(.16, 1, .3, 1);

}


/* =================================================
   08. FRAGMENT BASE
================================================= */

.sv-find-transition-cube .sv-find-cube__fragment--a {

    translate:
        -2px -3px 5px;

    rotate:
        z 0deg;

}


.sv-find-transition-cube .sv-find-cube__fragment--b {

    translate:
        1px 0 8px;

    rotate:
        z 0deg;

}


.sv-find-transition-cube .sv-find-cube__fragment--c {

    translate:
        -1px 0 5px;

    rotate:
        z 0deg;

}


.sv-find-transition-cube .sv-find-cube__fragment--d {

    translate:
        -1px 1px 3px;

    rotate:
        z 0deg;

}


.sv-find-transition-cube .sv-find-cube__fragment--e {

    translate:
        1px 0 8px;

    rotate:
        z 0deg;

}


.sv-find-transition-cube .sv-find-cube__fragment--f {

    translate:
        1px 1px 4px;

    rotate:
        z 0deg;

}


/* =================================================
   09. TWIST FRAGMENTS
================================================= */

.sv-find-transition-layer[data-find-stage="twist"] .sv-find-transition-cube .sv-find-cube__fragment--a {

    translate:
        -8px -7px 7px;

    rotate:
        z -7deg;

}


.sv-find-transition-layer[data-find-stage="twist"] .sv-find-transition-cube .sv-find-cube__fragment--b {

    translate:
        8px -7px 10px;

    rotate:
        z 8deg;

}


.sv-find-transition-layer[data-find-stage="twist"] .sv-find-transition-cube .sv-find-cube__fragment--c {

    translate:
        -11px 0 7px;

    rotate:
        z -5deg;

}


.sv-find-transition-layer[data-find-stage="twist"] .sv-find-transition-cube .sv-find-cube__fragment--d {

    translate:
        -8px 9px 5px;

    rotate:
        z -6deg;

}


.sv-find-transition-layer[data-find-stage="twist"] .sv-find-transition-cube .sv-find-cube__fragment--e {

    translate:
        11px 0 10px;

    rotate:
        z 5deg;

}


.sv-find-transition-layer[data-find-stage="twist"] .sv-find-transition-cube .sv-find-cube__fragment--f {

    translate:
        8px 9px 6px;

    rotate:
        z 6deg;

}


/* =================================================
   10. OPENING FRAGMENTS
================================================= */

.sv-find-transition-layer[data-find-stage="opening"] .sv-find-transition-cube .sv-find-cube__fragment--a {

    translate:
        -17px -13px 8px;

    rotate:
        z -10deg;

}


.sv-find-transition-layer[data-find-stage="opening"] .sv-find-transition-cube .sv-find-cube__fragment--b {

    translate:
        17px -13px 11px;

    rotate:
        z 11deg;

}


.sv-find-transition-layer[data-find-stage="opening"] .sv-find-transition-cube .sv-find-cube__fragment--c {

    translate:
        -23px 0 8px;

    rotate:
        z -8deg;

}


.sv-find-transition-layer[data-find-stage="opening"] .sv-find-transition-cube .sv-find-cube__fragment--d {

    translate:
        -18px 19px 6px;

    rotate:
        z -9deg;

}


.sv-find-transition-layer[data-find-stage="opening"] .sv-find-transition-cube .sv-find-cube__fragment--e {

    translate:
        23px 0 11px;

    rotate:
        z 8deg;

}


.sv-find-transition-layer[data-find-stage="opening"] .sv-find-transition-cube .sv-find-cube__fragment--f {

    translate:
        18px 19px 7px;

    rotate:
        z 9deg;

}


/* =================================================
   11. FRACTURE FRAGMENTS
================================================= */

.sv-find-transition-layer[data-find-stage="fracture"] .sv-find-transition-cube .sv-find-cube__fragment--a {

    translate:
        -28px -21px 10px;

    rotate:
        z -13deg;

}


.sv-find-transition-layer[data-find-stage="fracture"] .sv-find-transition-cube .sv-find-cube__fragment--b {

    translate:
        28px -21px 13px;

    rotate:
        z 14deg;

}


.sv-find-transition-layer[data-find-stage="fracture"] .sv-find-transition-cube .sv-find-cube__fragment--c {

    translate:
        -36px 0 10px;

    rotate:
        z -10deg;

}


.sv-find-transition-layer[data-find-stage="fracture"] .sv-find-transition-cube .sv-find-cube__fragment--d {

    translate:
        -29px 29px 8px;

    rotate:
        z -12deg;

}


.sv-find-transition-layer[data-find-stage="fracture"] .sv-find-transition-cube .sv-find-cube__fragment--e {

    translate:
        36px 0 13px;

    rotate:
        z 10deg;

}


.sv-find-transition-layer[data-find-stage="fracture"] .sv-find-transition-cube .sv-find-cube__fragment--f {

    translate:
        29px 29px 9px;

    rotate:
        z 12deg;

}


/* =================================================
   12. INNER BOX
================================================= */

.sv-find-transition-cube .sv-find-inner-box {

    translate:
        -50% -50% 14px;

    scale:
        1;

}


.sv-find-transition-layer[data-find-stage="twist"] .sv-find-transition-cube .sv-find-inner-box {

    translate:
        -50% -50% 17px;

    scale:
        1.04;

}


.sv-find-transition-layer[data-find-stage="opening"] .sv-find-transition-cube .sv-find-inner-box {

    translate:
        -50% -50% 20px;

    scale:
        1.08;

}


.sv-find-transition-layer[data-find-stage="fracture"] .sv-find-transition-cube .sv-find-inner-box {

    translate:
        -50% -50% 22px;

    scale:
        1.12;

}


/* =================================================
   13. ASSEMBLY
================================================= */

.sv-find-transition-layer[data-find-stage="assembly"] .sv-find-transition-cube {

    translate:
        calc(50vw - 28px) 18vh 0;

    rotate:
        .08 1 .02 12deg;

    scale:
        3.15;

    transition:
        translate 720ms cubic-bezier(.16, 1, .3, 1),
        rotate 780ms cubic-bezier(.16, 1, .3, 1),
        scale 720ms cubic-bezier(.16, 1, .3, 1);

}


.sv-find-transition-layer[data-find-stage="assembly"] .sv-find-transition-cube .sv-find-cube__fragment--a {

    translate:
        -5px -4px 7px;

    rotate:
        z -2deg;

}


.sv-find-transition-layer[data-find-stage="assembly"] .sv-find-transition-cube .sv-find-cube__fragment--b {

    translate:
        5px -4px 9px;

    rotate:
        z 2deg;

}


.sv-find-transition-layer[data-find-stage="assembly"] .sv-find-transition-cube .sv-find-cube__fragment--c {

    translate:
        -7px 0 6px;

    rotate:
        z -1deg;

}


.sv-find-transition-layer[data-find-stage="assembly"] .sv-find-transition-cube .sv-find-cube__fragment--d {

    translate:
        -5px 6px 5px;

    rotate:
        z -2deg;

}


.sv-find-transition-layer[data-find-stage="assembly"] .sv-find-transition-cube .sv-find-cube__fragment--e {

    translate:
        7px 0 8px;

    rotate:
        z 1deg;

}


.sv-find-transition-layer[data-find-stage="assembly"] .sv-find-transition-cube .sv-find-cube__fragment--f {

    translate:
        5px 6px 6px;

    rotate:
        z 2deg;

}


.sv-find-transition-layer[data-find-stage="assembly"] .sv-find-transition-cube .sv-find-inner-box {

    translate:
        -50% -50% 15px;

    scale:
        1.03;

}


/* =================================================
   14. STABLE HANDOFF
================================================= */

.sv-find-transition-layer[data-find-stage="stable"] .sv-find-transition-cube {

    translate:
        calc(50vw - 28px) 18vh 0;

    rotate:
        .04 1 .01 5deg;

    scale:
        3.15;

    opacity:
        0;

    transition:
        opacity 420ms cubic-bezier(.16, 1, .3, 1),
        rotate 420ms cubic-bezier(.16, 1, .3, 1);

}


/* =================================================
   15. CLOSE — PANEL STATIC CUBE → CENTER
================================================= */

.sv-find-transition-layer[data-find-stage="closing-center"] .sv-find-transition-cube {

    translate:
        calc(50vw - 26px) calc(50vh - 26px) 0;

    rotate:
        .02 1 .01 8deg;

    scale:
        2.55;

    opacity:
        1;

    transition:
        translate 620ms cubic-bezier(.16, 1, .3, 1),
        rotate 620ms cubic-bezier(.18, .8, .2, 1),
        scale 620ms cubic-bezier(.16, 1, .3, 1);

}


/* =================================================
   16. CLOSE — CENTER → HEADER TARGET
================================================= */

.sv-find-transition-layer[data-find-stage="closing-return"] .sv-find-transition-cube {

    translate:
        var(--find-close-target-tx, 0px) var(--find-close-target-ty, 0px) 0;

    rotate:
        0 0 1 0deg;

    scale:
        var(--find-close-target-scale, 1);

    opacity:
        1;

    transition:
        translate 920ms cubic-bezier(.16, 1, .3, 1),
        rotate 920ms cubic-bezier(.18, .8, .2, 1),
        scale 920ms cubic-bezier(.16, 1, .3, 1),
        opacity 360ms ease;

}


/* =================================================
   17. CLOSE FRAGMENT RETURN
================================================= */

.sv-find-transition-layer[data-find-stage="closing-center"] .sv-find-transition-cube .sv-find-cube__fragment--a,
.sv-find-transition-layer[data-find-stage="closing-center"] .sv-find-transition-cube .sv-find-cube__fragment--b,
.sv-find-transition-layer[data-find-stage="closing-center"] .sv-find-transition-cube .sv-find-cube__fragment--c,
.sv-find-transition-layer[data-find-stage="closing-center"] .sv-find-transition-cube .sv-find-cube__fragment--d,
.sv-find-transition-layer[data-find-stage="closing-center"] .sv-find-transition-cube .sv-find-cube__fragment--e,
.sv-find-transition-layer[data-find-stage="closing-center"] .sv-find-transition-cube .sv-find-cube__fragment--f {

    rotate:
        z 0deg;

}


/* =================================================
   18. CLOSE INNER BOX
================================================= */

.sv-find-transition-layer[data-find-stage="closing-center"] .sv-find-transition-cube .sv-find-inner-box {

    translate:
        -50% -50% 17px;

    scale:
        1.05;

}


.sv-find-transition-layer[data-find-stage="closing-return"] .sv-find-transition-cube .sv-find-inner-box {

    translate:
        -50% -50% 14px;

    scale:
        1;

}


/* =================================================
   19. PANEL
================================================= */

.sv-featured-panel--find[data-find-transition="preparing"] {

    opacity:
        0;

}


.sv-featured-panel--find[data-find-transition="revealing"] {

    opacity:
        .55;

    transition:
        opacity 980ms cubic-bezier(.16, 1, .3, 1);

}


.sv-featured-panel--find[data-find-transition="stable"] {

    opacity:
        1;

    transition:
        opacity 460ms cubic-bezier(.16, 1, .3, 1);

}


.sv-featured-panel--find[data-find-transition="closing"] {

    opacity:
        0;

    transition:
        opacity 1100ms cubic-bezier(.16, 1, .3, 1);

}


/* =================================================
   20. PANEL CUBE HANDOFF
================================================= */

.sv-featured-panel--find[data-find-transition="preparing"] .sv-find-panel-cube {

    opacity:
        0;

}


.sv-featured-panel--find[data-find-transition="revealing"] .sv-find-panel-cube {

    opacity:
        0;

}


.sv-featured-panel--find[data-find-transition="stable"] .sv-find-panel-cube {

    opacity:
        1;

}


.sv-featured-panel--find[data-find-transition="closing"] .sv-find-panel-cube {

    opacity:
        0;

}


/* =================================================
   21. REDUCED MOTION
================================================= */

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

    .sv-find-transition-cube,
    .sv-find-transition-cube .sv-find-cube__fragment,
    .sv-find-transition-cube .sv-find-inner-box,
    .sv-featured-panel--find,
    .sv-featured-panel--find .sv-find-panel-cube {

        transition:
            none !important;

    }

}