/*
======================================================================
 EcoDrop Kiosk OS V2
 ---------------------------------------------------------------------
 File        : /kiosk/ui/motion.css
 Module      : EcoMotion System
 Version     : 1.0.0
 Status      : Draft
 Author      : EcoDrop Platform
 References  : EMS / EHIG / EDS
======================================================================
*/

/* ==========================================================
   GLOBAL TRANSITIONS
========================================================== */

*{

    transition:

        background-color var(--eco-motion-normal) var(--eco-ease-standard),

        color var(--eco-motion-normal) var(--eco-ease-standard),

        border-color var(--eco-motion-normal) var(--eco-ease-standard),

        opacity var(--eco-motion-normal) var(--eco-ease-standard),

        transform var(--eco-motion-normal) var(--eco-ease-standard),

        box-shadow var(--eco-motion-normal) var(--eco-ease-standard);

}

/* ==========================================================
   ANIMATION UTILITIES
========================================================== */

.eco-animate{

    animation-fill-mode:both;

}

.eco-hidden{

    opacity:0;

}

.eco-visible{

    opacity:1;

}

.eco-no-motion{

    animation:none!important;

    transition:none!important;

}

/* ==========================================================
   DURATION
========================================================== */

.eco-speed-fast{

    animation-duration:180ms;

}

.eco-speed-normal{

    animation-duration:300ms;

}

.eco-speed-slow{

    animation-duration:600ms;

}

.eco-speed-story{

    animation-duration:1200ms;

}

/* ==========================================================
   FADE
========================================================== */

.eco-fade-in{

    animation:

        ecoFadeIn

        var(--eco-motion-normal)

        var(--eco-ease-enter);

}

.eco-fade-out{

    animation:

        ecoFadeOut

        var(--eco-motion-fast)

        var(--eco-ease-exit);

}

@keyframes ecoFadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes ecoFadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

/* ==========================================================
   SCALE
========================================================== */

.eco-scale-in{

    animation:

        ecoScaleIn

        320ms

        var(--eco-ease-enter);

}

@keyframes ecoScaleIn{

    from{

        opacity:0;

        transform:scale(.96);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================================
   SLIDE UP
========================================================== */

.eco-slide-up{

    animation:

        ecoSlideUp

        500ms

        var(--eco-ease-enter);

}

@keyframes ecoSlideUp{

    from{

        opacity:0;

        transform:translateY(28px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   SLIDE DOWN
========================================================== */

.eco-slide-down{

    animation:

        ecoSlideDown

        500ms

        var(--eco-ease-enter);

}

@keyframes ecoSlideDown{

    from{

        opacity:0;

        transform:translateY(-28px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   INTRO
========================================================== */

.eco-intro{

    animation:

        ecoIntro

        var(--eco-motion-intro)

        var(--eco-ease-story)

        forwards;

}

@keyframes ecoIntro{

    0%{

        opacity:0;

        transform:scale(.96);

        filter:blur(12px);

    }

    40%{

        opacity:1;

        transform:scale(1);

        filter:blur(0);

    }

    100%{

        opacity:1;

        transform:scale(1);

        filter:blur(0);

    }

}

/* ==========================================================
   STORY FADE
========================================================== */

.eco-story-enter{

    animation:

        ecoStoryEnter

        1400ms

        var(--eco-ease-story);

}

@keyframes ecoStoryEnter{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   IMPACT COUNTER
========================================================== */

.eco-counter-pop{

    animation:

        ecoCounterPop

        500ms

        var(--eco-ease-enter);

}

@keyframes ecoCounterPop{

    0%{

        transform:scale(.90);

        opacity:0;

    }

    50%{

        transform:scale(1.04);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/* ==========================================================
   CARD FLOAT
========================================================== */

.eco-card-float{

    animation:

        ecoCardFloat

        6s

        ease-in-out

        infinite;

}

@keyframes ecoCardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================================
   CUP VERIFIED
========================================================== */

.eco-cup-verified{

    animation:

        ecoCupVerified

        900ms

        var(--eco-ease-enter);

}

@keyframes ecoCupVerified{

    0%{

        transform:scale(.94);

        filter:brightness(.9);

    }

    40%{

        transform:scale(1.03);

        filter:brightness(1.08);

    }

    100%{

        transform:scale(1);

        filter:brightness(1);

    }

}

/* ==========================================================
   SCANNER LINE
========================================================== */

.eco-scanner-line{

    animation:

        ecoScannerLine

        var(--eco-scanner-speed)

        linear

        infinite;

}

@keyframes ecoScannerLine{

    0%{

        transform:translateY(-100%);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    90%{

        opacity:1;

    }

    100%{

        transform:translateY(100%);

        opacity:0;

    }

}

/* ==========================================================
   GATE OPEN
========================================================== */

.eco-gate-open{

    animation:

        ecoGateOpen

        var(--eco-gate-animation)

        var(--eco-ease-story)

        forwards;

}

@keyframes ecoGateOpen{

    0%{

        opacity:0;

        transform:scale(.94);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================================
   WEIGHT RING
========================================================== */

.eco-weight-ring{

    animation:

        ecoWeightRing

        1.2s

        ease-out;

}

@keyframes ecoWeightRing{

    from{

        stroke-dashoffset:1000;

    }

    to{

        stroke-dashoffset:0;

    }

}

/* ==========================================================
   SUCCESS EXPERIENCE
========================================================== */

.eco-success{

    animation:

        ecoSuccess

        900ms

        var(--eco-ease-enter)

        forwards;

}

@keyframes ecoSuccess{

    0%{

        opacity:0;

        transform:scale(.96);

        filter:blur(8px);

    }

    100%{

        opacity:1;

        transform:scale(1);

        filter:blur(0);

    }

}

/* ==========================================================
   THANK YOU
========================================================== */

.eco-thank-you{

    animation:

        ecoThankYou

        1200ms

        ease-out

        forwards;

}

@keyframes ecoThankYou{

    0%{

        opacity:0;

        transform:translateY(16px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   ECO POINTS
========================================================== */

.eco-points{

    animation:

        ecoPoints

        800ms

        cubic-bezier(.22,1,.36,1);

}

@keyframes ecoPoints{

    0%{

        opacity:0;

        transform:scale(.85);

    }

    60%{

        opacity:1;

        transform:scale(1.08);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================================
   IMPACT CARD
========================================================== */

.eco-impact-reveal{

    animation:

        ecoImpactReveal

        900ms

        ease-out;

}

@keyframes ecoImpactReveal{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================================
   IDLE STORY LOOP
========================================================== */

.eco-story-loop{

    animation:

        ecoStoryLoop

        10s

        ease-in-out

        infinite;

}

@keyframes ecoStoryLoop{

    0%{

        opacity:.35;

        transform:scale(.98);

    }

    50%{

        opacity:1;

        transform:scale(1);

    }

    100%{

        opacity:.35;

        transform:scale(.98);

    }

}

/* ==========================================================
   GREEN ENERGY
========================================================== */

.eco-energy{

    animation:

        ecoEnergy

        2.4s

        ease-in-out

        infinite;

}

@keyframes ecoEnergy{

    0%{

        box-shadow:

            0 0 0 rgba(34,184,95,0);

    }

    50%{

        box-shadow:

            0 0 36px rgba(34,184,95,.35);

    }

    100%{

        box-shadow:

            0 0 0 rgba(34,184,95,0);

    }

}

/* ==========================================================
   GLOW
========================================================== */

.eco-glow{

    animation:

        ecoGlow

        3s

        ease-in-out

        infinite;

}

@keyframes ecoGlow{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.18);

    }

    100%{

        filter:brightness(1);

    }

}

/* ==========================================================
   HEARTBEAT
========================================================== */

.eco-heartbeat{

    animation:

        ecoHeartbeat

        2s

        ease-in-out

        infinite;

}

@keyframes ecoHeartbeat{

    0%{

        transform:scale(1);

    }

    20%{

        transform:scale(1.03);

    }

    40%{

        transform:scale(1);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================================
   SPINNER
========================================================== */

.eco-spin{

    animation:

        ecoSpin

        1s

        linear

        infinite;

}

@keyframes ecoSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   BUTTON MICRO INTERACTIONS
========================================================== */

.eco-button-hover{

    transition:

        transform 180ms var(--eco-ease-standard),

        box-shadow 180ms var(--eco-ease-standard);

}

.eco-button-hover:hover{

    transform:translateY(-2px);

}

.eco-button-hover:active{

    transform:translateY(1px) scale(.98);

}

/* ==========================================================
   CARD HOVER
========================================================== */

.eco-card-hover{

    transition:

        transform 260ms var(--eco-ease-standard),

        box-shadow 260ms var(--eco-ease-standard),

        border-color 260ms var(--eco-ease-standard);

}

.eco-card-hover:hover{

    transform:

        translateY(-4px);

}

/* ==========================================================
   DIALOG
========================================================== */

.eco-dialog-enter{

    animation:

        ecoDialogEnter

        320ms

        var(--eco-ease-enter)

        forwards;

}

.eco-dialog-exit{

    animation:

        ecoDialogExit

        220ms

        var(--eco-ease-exit)

        forwards;

}

@keyframes ecoDialogEnter{

    from{

        opacity:0;

        transform:translateY(24px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@keyframes ecoDialogExit{

    from{

        opacity:1;

        transform:translateY(0) scale(1);

    }

    to{

        opacity:0;

        transform:translateY(12px) scale(.97);

    }

}

/* ==========================================================
   PAGE TRANSITIONS
========================================================== */

.eco-page-enter{

    animation:

        ecoPageEnter

        450ms

        var(--eco-ease-enter)

        forwards;

}

.eco-page-exit{

    animation:

        ecoPageExit

        260ms

        var(--eco-ease-exit)

        forwards;

}

@keyframes ecoPageEnter{

    from{

        opacity:0;

        transform:translateX(18px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes ecoPageExit{

    from{

        opacity:1;

        transform:translateX(0);

    }

    to{

        opacity:0;

        transform:translateX(-18px);

    }

}

/* ==========================================================
   STAGGER DELAYS
========================================================== */

.eco-delay-1{

    animation-delay:100ms;

}

.eco-delay-2{

    animation-delay:200ms;

}

.eco-delay-3{

    animation-delay:300ms;

}

.eco-delay-4{

    animation-delay:400ms;

}

.eco-delay-5{

    animation-delay:500ms;

}

.eco-delay-6{

    animation-delay:600ms;

}

.eco-delay-7{

    animation-delay:700ms;

}

.eco-delay-8{

    animation-delay:800ms;

}

/* ==========================================================
   ANIMATION FILL
========================================================== */

.eco-fill-both{

    animation-fill-mode:both;

}

.eco-fill-forwards{

    animation-fill-mode:forwards;

}

.eco-fill-backwards{

    animation-fill-mode:backwards;

}

/* ==========================================================
   ANIMATION ITERATION
========================================================== */

.eco-loop{

    animation-iteration-count:infinite;

}

.eco-once{

    animation-iteration-count:1;

}

/* ==========================================================
   ANIMATION PLAY STATE
========================================================== */

.eco-paused{

    animation-play-state:paused;

}

.eco-running{

    animation-play-state:running;

}

/* ==========================================================
   PERFORMANCE
========================================================== */

.eco-gpu{

    transform:translateZ(0);

    will-change:

        transform,

        opacity;

    backface-visibility:hidden;

}

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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* ==========================================================
   MOTION PHILOSOPHY

   Motion never decorates.

   Motion explains.

   Motion guides.

   Motion builds trust.

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

/* ==========================================================
   END OF FILE
========================================================== */