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

Space Vanta Theme 1.0

Featured Function:
Find

Module:
Cube / Response

File:
public/header/featured-functions/find/cube/response.css

Version:
FIND-CUBE-RESPONSE-002

Purpose:
Cube visual response layer

Responsibilities:
- Input response
- What's More light-leak response
- Response variables
- Short visual activation

Does NOT handle:
- Base geometry
- Cube lifecycle state
- Main transition
- Panel layout
- Discovery logic
- Search behavior

Response Principle:

No Loop.
No Wobble.
No Breathing.

Input:
Clean outward structural separation.

What's More:
Short outward light response.

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


/* =========================================================
   01. RESPONSE FOUNDATION
========================================================= */

.sv-find-cube {

    --find-cube-response-x:
        0px;

    --find-cube-response-y:
        0px;

    --find-cube-response-z:
        0px;

    --find-cube-response-opacity:
        0;

}


/* =========================================================
   02. INPUT RESPONSE

   Structural outward separation.

   No keyframes.
   No infinite animation.

   The fragments move once and remain
   in a stable separated position.
========================================================= */

.sv-find-cube[data-find-cube-response="input"] {

    --find-cube-response-opacity:
        1;

}


.sv-find-cube[data-find-cube-response="input"] .sv-find-cube__fragment--a {

    --find-cube-response-y:
        -1px;

}


.sv-find-cube[data-find-cube-response="input"] .sv-find-cube__fragment--b {

    --find-cube-response-x:
        1px;

    --find-cube-response-y:
        -1px;

}


.sv-find-cube[data-find-cube-response="input"] .sv-find-cube__fragment--c {

    --find-cube-response-x:
        -1.5px;

}


.sv-find-cube[data-find-cube-response="input"] .sv-find-cube__fragment--d {

    --find-cube-response-x:
        -1px;

    --find-cube-response-y:
        1px;

}


.sv-find-cube[data-find-cube-response="input"] .sv-find-cube__fragment--e {

    --find-cube-response-x:
        1.5px;

}


.sv-find-cube[data-find-cube-response="input"] .sv-find-cube__fragment--f {

    --find-cube-response-x:
        1px;

    --find-cube-response-y:
        1px;

}


/* =========================================================
   03. INNER BOX RESPONSE

   The inner box does not move repeatedly.

   It receives a subtle spatial lift and
   remains stable while the user is typing.
========================================================= */

.sv-find-cube[data-find-cube-response="input"] .sv-find-inner-box {

    --find-cube-response-z:
        1px;

}





/* =========================================================
   05. WHAT'S MORE / LIGHT LEAK
========================================================= */

.sv-find-cube[data-find-cube-response="light-leak"] {

    --find-cube-response-opacity:
        1;

}


/* ---------------------------------------------------------
   Light leak surface
--------------------------------------------------------- */

.sv-find-cube[data-find-cube-response="light-leak"]::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        16px;

    height:
        16px;

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

    border-radius:
        50%;

    pointer-events:
        none;

    opacity:
        .42;

    background:
        radial-gradient(circle,
            rgba(205, 224, 244, .72) 0%,
            rgba(180, 210, 238, .28) 34%,
            rgba(180, 210, 238, 0) 72%);

    filter:
        blur(1px);

    animation:
        sv-find-cube-light-leak 760ms cubic-bezier(.2, .7, .3, 1) both;

}


/* =========================================================
   06. LIGHT LEAK MOTION
========================================================= */

@keyframes sv-find-cube-light-leak {

    0% {

        opacity:
            0;

        transform:
            translate(-50%, -50%) scale(.72);

    }

    35% {

        opacity:
            .48;

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

    }

    100% {

        opacity:
            0;

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

    }

}


/* =========================================================
   07. REDUCED MOTION
========================================================= */

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

    .sv-find-cube__fragment,
    .sv-find-inner-box {

        transition:
            none;

    }

    .sv-find-cube[data-find-cube-response="light-leak"]::after {

        animation:
            none;

        opacity:
            0;

    }

}