/* =======================================================
   [12.6.1]
   Global Motion Variables
======================================================= */

:root{

    --transition-fast:
        0.18s ease;

    --transition-standard:
        0.30s ease;

    --transition-slow:
        0.45s ease;

    --hover-lift:
        translateY(-4px);

    --hover-scale:
        scale(1.02);

    --card-shadow:

        0 8px 30px rgba(
            0,
            79,
            113,
            0.15
        );

    --glow-shadow:

        0 0 25px rgba(
            0,
            79,
            113,
            0.25
        );

}

/* =====================================================
   [12.2.1]
   GLOBAL ANIMATION SYSTEM
===================================================== */

:root {

    /* =====================================================
       [12.2.2]
       Animation Timing
    ===================================================== */

    --animation-fast:
        0.25s;

    --animation-normal:
        0.45s;

    --animation-slow:
        0.75s;

    /* =====================================================
       [12.2.3]
       Animation Curves
    ===================================================== */

    --ease-standard:
        cubic-bezier(
            0.4,
            0,
            0.2,
            1
        );

    --ease-premium:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}

/* =====================================================
   [12.2.4]
   Fade Slide Up
===================================================== */

@keyframes fadeSlideUp {

    from {

        opacity: 0;

        transform:
            translateY(30px)
            scale(0.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}

/* =====================================================
   [12.2.5]
   Fade Out
===================================================== */

@keyframes fadeOut {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}

/* =====================================================
   [12.2.6]
   Premium Glow Pulse
===================================================== */

@keyframes premiumGlow {

    0% {

        box-shadow:
            0 0 0 rgba(
                0,
                79,
                113,
                0
            );

    }

    50% {

        box-shadow:
            0 0 35px rgba(
                0,
                79,
                113,
                0.22
            );

    }

    100% {

        box-shadow:
            0 0 0 rgba(
                0,
                79,
                113,
                0
            );

    }

}

/* =====================================================
   [12.2.7]
   Utility Classes
===================================================== */

.fade-slide-in {

    animation:

        fadeSlideUp

        var(--animation-normal)

        var(--ease-premium)

        forwards;

}

.fade-out {

    animation:

        fadeOut

        var(--animation-fast)

        ease

        forwards;

}

.glow-pulse {

    animation:

        premiumGlow

        1.5s

        ease;

}

/* =====================================================
   [12.2.8]
   Reduced Motion Support
===================================================== */

@media (

    prefers-reduced-motion: reduce

) {

    * {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =======================================================
   [12.6.2]
   Shared Button Interaction
======================================================= */

button{

    transition:

        transform
        var(--transition-fast),

        box-shadow
        var(--transition-fast),

        background-color
        var(--transition-fast);

}

/* =======================================================
   [12.6.3]
   Button Hover
======================================================= */

button:hover{

    transform:

        var(--hover-lift);

    box-shadow:

        var(--card-shadow);

}

/* =======================================================
   [12.6.4]
   Button Active
======================================================= */

button:active{

    transform:

        translateY(0);

}

/* =======================================================
   [12.6.5]
   Premium Card Transition
======================================================= */

/* =======================================================
   [12.6.5]
   Premium Analytics Card Interaction
======================================================= */

.analytics-card{

    border:1px solid transparent;

    transition:
        transform var(--transition-standard),
        box-shadow var(--transition-standard),
        border-color var(--transition-standard);

}

.analytics-card:hover{

    transform:
        translateY(-8px)
        scale(1.02);

    border-color:
        rgba(
            0,
            79,
            113,
            0.25
        );

    box-shadow:
        0 16px 40px rgba(
            0,
            0,
            0,
            0.15
        );

}
/* =======================================================
   [12.6.8]
   Animated Link Foundation
======================================================= */

a{

    position:

        relative;

    text-decoration:

        none;

}

/* =======================================================
   [12.6.9]
   Animated Underline
======================================================= */

a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:100%;

    height:2px;

    background:

        #004f71;

    transform:

        scaleX(0);

    transform-origin:

        left;

    transition:

        transform
        var(--transition-standard);

}

/* =======================================================
   [12.6.10]
   Underline Reveal
======================================================= */

a:hover::after{

    transform:

        scaleX(1);

}

/* =======================================================
   [12.6.11]
   Heading Transition
======================================================= */

h1,
h2,
h3{

    transition:

        color
        var(--transition-standard);

}

/* =======================================================
   [12.6.12]
   Interactive Heading
======================================================= */

.interactive-house-section h2:hover,

.energy-dashboard-section h2:hover{

    color:#1ca3d6;

}

/* =======================================================
   [12.6.13]
   Section Reveal Base
======================================================= */

.reveal{

    opacity:0;

    transform:

        translateY(40px);

    transition:

        opacity
        0.7s ease,

        transform
        0.7s ease;

}

/* =======================================================
   [12.6.14]
   Section Reveal Active
======================================================= */

.reveal.active{

    opacity:1;

    transform:

        translateY(0);

}