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

Space Vanta Theme 1.0

Module:
Find Panel Construction Motion

Version:
FIND-PANEL-CONSTRUCTION-MOTION-002

Purpose:
Panel construction and corner-to-core light motion.

Responsibilities:
- Panel construction
- Corner inward movement
- Core light convergence
- Dissipation

No:
- Geometry definition
- Material definition
- JavaScript

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


.sv-find-panel-construction {
    opacity: 0;
}


.sv-find-panel-construction__corner {
    opacity: 0;

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


.sv-find-panel-construction__line {
    opacity: 0;

    transition:
        opacity 760ms cubic-bezier(.22, .61, .36, 1),
        scale 980ms cubic-bezier(.16, 1, .3, 1);
}


/* =================================================
   Initial Construction
================================================== */

.sv-featured-panel--find[data-find-transition="revealing"] .sv-find-panel-construction {
    opacity: 1;
}


.sv-featured-panel--find[data-find-transition="revealing"] .sv-find-panel-construction__corner {
    opacity: 1;
    translate: 0 0 0;
    scale: 1;
}


.sv-featured-panel--find[data-find-transition="revealing"] .sv-find-panel-construction__line {
    opacity: 1;
    scale: 1;
}


/* =================================================
   Corner → Core
================================================== */

/*
The four panel corners now move toward
the actual center of the panel.

They do not follow the Cube.

They belong exclusively to the Panel coordinate system.
*/


.sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner {
    opacity: 0;

    scale: .18;

    transition:
        opacity 760ms cubic-bezier(.16, 1, .3, 1),
        translate 1120ms cubic-bezier(.22, .61, .36, 1),
        scale 1120ms cubic-bezier(.22, .61, .36, 1);
}


.sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner--tl {
    translate:
        calc(50vw - 8px) calc(50% - 8px) 0;
}


.sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner--tr {
    translate:
        calc(-50vw + 8px) calc(50% - 8px) 0;
}


.sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner--bl {
    translate:
        calc(50vw - 8px) calc(-50% + 8px) 0;
}


.sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner--br {
    translate:
        calc(-50vw + 8px) calc(-50% + 8px) 0;
}


/* =================================================
   Light Ray Character
================================================== */

.sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner::after {
    opacity: 1;

    transition:
        opacity 620ms ease,
        scale 900ms cubic-bezier(.16, 1, .3, 1);
}


.sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner {
    filter:
        brightness(1.12) drop-shadow(0 0 8px rgba(211, 232, 241, .24));
}


/* =================================================
   Frame Dissipation
================================================== */

.sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__line {
    opacity: .18;

    scale: .96;

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


/* =================================================
   Stable
================================================== */

.sv-featured-panel--find[data-find-transition="stable"] .sv-find-panel-construction {
    opacity: 0;
}


.sv-featured-panel--find[data-find-transition="stable"] .sv-find-panel-construction__corner,
.sv-featured-panel--find[data-find-transition="stable"] .sv-find-panel-construction__line {
    opacity: 0;
}


/* =================================================
   Closing
================================================== */

.sv-featured-panel--find[data-find-transition="closing"] .sv-find-panel-construction {
    opacity: 0;

    transition:
        opacity 420ms ease;
}


@media (max-width: 767px) {

    .sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner--tl {
        translate:
            calc(50vw - 6px) calc(50% - 6px) 0;
    }


    .sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner--tr {
        translate:
            calc(-50vw + 6px) calc(50% - 6px) 0;
    }


    .sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner--bl {
        translate:
            calc(50vw - 6px) calc(-50% + 6px) 0;
    }


    .sv-featured-panel--find[data-find-transition="core"] .sv-find-panel-construction__corner--br {
        translate:
            calc(-50vw + 6px) calc(-50% + 6px) 0;
    }

}