/* ============================================================
   ANND LABS HOME — MOTION LAYER
   Loaded AFTER home.css.

   This file adds movement only. It intentionally does not
   replace the visual system in home.css.
============================================================ */


/* ============================================================
   HERO — LIVING GRID / DEPTH
============================================================ */

.lab-hero {
    --lab-grid-x: 0px;
    --lab-grid-y: 0px;
}

.lab-gridlines {
    transform:
        translate3d(
            var(--lab-grid-x),
            var(--lab-grid-y),
            0
        )
        scale(1.05);

    animation:
        lab-grid-drift
        18s
        linear
        infinite;

    will-change:
        transform,
        background-position;
}

.lab-gridlines::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(39, 183, 255, 0.02) 35%,
            rgba(68, 200, 255, 0.12) 50%,
            rgba(39, 183, 255, 0.02) 65%,
            transparent 100%
        );

    transform:
        translateX(-125%);

    animation:
        lab-grid-scan
        8s
        ease-in-out
        infinite;

    pointer-events: none;
}


@keyframes lab-grid-drift {

    0% {
        background-position:
            0 0,
            0 0;
    }

    100% {
        background-position:
            72px 72px,
            72px 72px;
    }

}


@keyframes lab-grid-scan {

    0%,
    60% {
        transform:
            translateX(-125%);

        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    88% {
        transform:
            translateX(125%);

        opacity: 1;
    }

    100% {
        transform:
            translateX(125%);

        opacity: 0;
    }

}


/* ============================================================
   HERO COPY — SEQUENCED ARRIVAL
============================================================ */

.lab-hero-copy > * {
    opacity: 0;

    transform:
        translateY(16px);

    animation:
        lab-hero-copy-in
        850ms
        cubic-bezier(.16, .8, .25, 1)
        forwards;
}

.lab-hero-copy > :nth-child(1) {
    animation-delay:
        90ms;
}

.lab-hero-copy > :nth-child(2) {
    animation-delay:
        180ms;
}

.lab-hero-copy > :nth-child(3) {
    animation-delay:
        300ms;
}

.lab-hero-copy > :nth-child(4) {
    animation-delay:
        420ms;
}

.lab-hero-copy > :nth-child(5) {
    animation-delay:
        540ms;
}


@keyframes lab-hero-copy-in {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ============================================================
   HERO STAGE — PARALLAX / ORBITS / FLOAT
============================================================ */

.lab-brand-stage {
    --lab-parallax-x: 0px;
    --lab-parallax-y: 0px;

    --lab-rotate-x: 0deg;
    --lab-rotate-y: 0deg;

    transform:
        perspective(1100px)
        translate3d(
            var(--lab-parallax-x),
            var(--lab-parallax-y),
            0
        )
        rotateX(
            var(--lab-rotate-x)
        )
        rotateY(
            var(--lab-rotate-y)
        );

    transform-style:
        preserve-3d;

    transition:
        transform
        700ms
        cubic-bezier(.2, .8, .2, 1);

    will-change:
        transform;
}


.lab-hero-logo {
    transform:
        translateZ(36px);

    animation:
        lab-arrive
        1.4s
        ease-out
        both,
        lab-logo-float
        6.4s
        ease-in-out
        1.4s
        infinite;

    will-change:
        transform,
        filter;
}

.lab-orbit-one {
    animation:
        lab-orbit-one
        24s
        linear
        infinite;
}

.lab-orbit-two {
    animation:
        lab-orbit-two
        33s
        linear
        infinite;
}

.lab-stage-corner {
    animation:
        lab-corner-pulse
        3.2s
        ease-in-out
        infinite;
}

.lab-corner-bottom {
    animation-delay:
        1.2s;
}

.lab-stage-caption span:first-child {
    animation:
        lab-caption-pulse
        4s
        ease-in-out
        infinite;
}

.lab-stage-caption span:last-child {
    animation:
        lab-caption-pulse
        4s
        ease-in-out
        1.8s
        infinite;
}


@keyframes lab-logo-float {

    0%,
    100% {
        transform:
            translateZ(36px)
            translateY(0)
            rotateZ(-0.15deg);

        filter:
            brightness(1)
            drop-shadow(
                0 0 0
                rgba(41, 181, 255, 0)
            );
    }

    50% {
        transform:
            translateZ(42px)
            translateY(-9px)
            rotateZ(0.25deg);

        filter:
            brightness(1.05)
            drop-shadow(
                0 10px 22px
                rgba(41, 181, 255, 0.09)
            );
    }

}


@keyframes lab-orbit-one {

    from {
        transform:
            rotate(-30deg)
            scaleY(.82)
            rotate(0deg);
    }

    to {
        transform:
            rotate(-30deg)
            scaleY(.82)
            rotate(360deg);
    }

}


@keyframes lab-orbit-two {

    from {
        transform:
            rotate(32deg)
            scaleY(.85)
            rotate(360deg);
    }

    to {
        transform:
            rotate(32deg)
            scaleY(.85)
            rotate(0deg);
    }

}


@keyframes lab-corner-pulse {

    0%,
    100% {
        opacity: .45;

        filter:
            drop-shadow(
                0 0 0
                rgba(65, 194, 255, 0)
            );
    }

    50% {
        opacity: 1;

        filter:
            drop-shadow(
                0 0 8px
                rgba(65, 194, 255, .35)
            );
    }

}


@keyframes lab-caption-pulse {

    0%,
    100% {
        color:
            #577890;
    }

    50% {
        color:
            #8acff4;
    }

}


/* ============================================================
   HERO CTA / SCROLL INDICATORS
============================================================ */

.lab-button {
    position: relative;

    overflow: hidden;

    isolation: isolate;
}

.lab-button::before {
    content: "";

    position: absolute;

    top: -80%;
    bottom: -80%;

    left: -50%;

    width: 34%;

    z-index: -1;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        none;
}

.lab-button:hover::before {
    animation:
        lab-button-shine
        650ms
        ease-out;
}

.lab-button > span {
    transition:
        transform
        220ms
        ease;
}

.lab-button:hover > span {
    transform:
        translate3d(
            3px,
            -2px,
            0
        );
}

.lab-hero-bottom a span,
.lab-button-outline[href="#capabilities"] > span {
    display: inline-block;

    animation:
        lab-scroll-nudge
        2s
        ease-in-out
        infinite;
}


@keyframes lab-button-shine {

    0% {
        left: -50%;

        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 130%;

        opacity: 0;
    }

}


@keyframes lab-scroll-nudge {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(4px);
    }

}


/* ============================================================
   SCROLL REVEALS
============================================================ */

.lab-reveal {
    opacity: 0;

    transform:
        translate3d(
            0,
            26px,
            0
        );

    transition:
        opacity
        800ms
        cubic-bezier(.16, .8, .25, 1)
        var(--lab-reveal-delay, 0ms),

        transform
        850ms
        cubic-bezier(.16, .8, .25, 1)
        var(--lab-reveal-delay, 0ms);
}

.lab-reveal.lab-in-view {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/* ============================================================
   PRODUCT CARDS — TILT / LIGHT FOLLOW
============================================================ */

.lab-product {
    --lab-card-x: 50%;
    --lab-card-y: 50%;
    --lab-card-rx: 0deg;
    --lab-card-ry: 0deg;

    position: relative;

    transform:
        perspective(900px)
        rotateX(
            var(--lab-card-rx)
        )
        rotateY(
            var(--lab-card-ry)
        )
        translateY(0);

    transform-style:
        preserve-3d;

    transition:
        border-color .2s,
        box-shadow .25s,
        transform .28s
        cubic-bezier(.2, .8, .2, 1);

    will-change:
        transform;
}

.lab-product::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 3;

    opacity: 0;

    pointer-events: none;

    background:
        radial-gradient(
            360px circle
            at
            var(--lab-card-x)
            var(--lab-card-y),
            rgba(49, 183, 255, .11),
            rgba(49, 183, 255, .025) 38%,
            transparent 70%
        );

    transition:
        opacity
        240ms
        ease;
}

.lab-product:hover {
    transform:
        perspective(900px)
        rotateX(
            var(--lab-card-rx)
        )
        rotateY(
            var(--lab-card-ry)
        )
        translateY(-7px);

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, .28),
        0 0 34px
        rgba(20, 153, 226, .08);
}

.lab-product:hover::before {
    opacity: 1;
}

.lab-product-image img {
    will-change:
        transform,
        filter;

    transition:
        transform
        650ms
        cubic-bezier(.2,.8,.2,1),

        filter
        400ms
        ease;
}

.lab-product:hover .lab-product-image img {
    transform:
        scale(1.055);

    filter:
        brightness(1.05)
        saturate(1.04);
}

.lab-product-index,
.lab-stock,
.lab-product-arrow {
    transform:
        translateZ(22px);
}

.lab-product-copy {
    position: relative;

    z-index: 4;

    transform:
        translateZ(10px);
}

.lab-product-arrow {
    transition:
        transform
        250ms
        ease,

        border-color
        250ms
        ease,

        color
        250ms
        ease,

        box-shadow
        250ms
        ease;
}

.lab-product:hover .lab-product-arrow {
    transform:
        translateZ(30px)
        translate3d(
            2px,
            -2px,
            0
        );

    border-color:
        #63cfff;

    color:
        #d9f5ff;

    box-shadow:
        0 0 18px
        rgba(45, 187, 255, .22);
}


/* ============================================================
   CAPABILITY PANELS
============================================================ */

.lab-capability {
    transition:
        transform
        420ms
        cubic-bezier(.2,.8,.2,1),

        border-color
        300ms
        ease,

        box-shadow
        350ms
        ease;
}

.lab-capability:hover {
    transform:
        translateY(-5px);

    border-color:
        #3d759b;

    box-shadow:
        0 24px 60px
        rgba(0,0,0,.24),
        0 0 34px
        rgba(38,173,245,.06);
}

.lab-art-grid {
    animation:
        lab-art-grid-drift
        14s
        linear
        infinite;
}


@keyframes lab-art-grid-drift {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            24px 24px,
            24px 24px;
    }

}


/* ============================================================
   CAD PART — DRAW ITSELF
============================================================ */

.lab-cad-path {
    stroke-dasharray:
        var(--lab-path-length);

    stroke-dashoffset:
        var(--lab-path-length);
}

.lab-cad-active .lab-cad-path {
    animation:
        lab-cad-draw
        1.9s
        cubic-bezier(.3,.65,.2,1)
        forwards;
}

.lab-cad-active .lab-cad-path:nth-child(2) {
    animation-delay:
        90ms;
}

.lab-cad-active .lab-cad-path:nth-child(3) {
    animation-delay:
        180ms;
}

.lab-cad-active .lab-cad-path:nth-child(4) {
    animation-delay:
        270ms;
}

.lab-printing .lab-part {
    animation:
        lab-part-hover
        5.4s
        ease-in-out
        infinite;
}


@keyframes lab-cad-draw {

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes lab-part-hover {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-6px);
    }

}


/* ============================================================
   SOFTWARE CARD — TERMINAL POWER-ON / SCAN
============================================================ */

.lab-software-window {
    overflow: hidden;

    opacity: .52;

    filter:
        brightness(.72)
        saturate(.75);

    transition:
        opacity
        700ms
        ease,

        filter
        800ms
        ease,

        transform
        800ms
        cubic-bezier(.16,.8,.25,1);
}

.lab-software-window::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: -30%;

    height: 24%;

    opacity: 0;

    pointer-events: none;

    background:
        linear-gradient(
            transparent,
            rgba(108, 194, 255, .14),
            rgba(153, 223, 255, .3),
            rgba(108, 194, 255, .14),
            transparent
        );
}

.lab-software-active
.lab-software-window {
    opacity: 1;

    filter:
        brightness(1)
        saturate(1);

    transform:
        perspective(700px)
        rotateY(-8deg)
        rotateX(5deg)
        translateY(0);
}

.lab-software-active
.lab-software-window::after {
    animation:
        lab-terminal-scan
        3.8s
        ease-in-out
        500ms
        infinite;
}

.lab-window-tiles span {
    opacity: .15;

    transform:
        translateY(7px);

    transition:
        opacity
        450ms
        ease,

        transform
        450ms
        ease,

        border-color
        450ms
        ease,

        color
        450ms
        ease;
}

.lab-software-active
.lab-window-tiles span {
    opacity: 1;

    transform:
        translateY(0);
}

.lab-software-active
.lab-window-tiles span:nth-child(1) {
    transition-delay:
        350ms;
}

.lab-software-active
.lab-window-tiles span:nth-child(2) {
    transition-delay:
        480ms;
}

.lab-software-active
.lab-window-tiles span:nth-child(3) {
    transition-delay:
        610ms;
}

.lab-window-chart i {
    transform-origin:
        bottom;

    transform:
        scaleY(.06);

    opacity: .3;
}

.lab-software-active
.lab-window-chart i {
    animation:
        lab-chart-rise
        850ms
        cubic-bezier(.2,.9,.25,1)
        forwards;
}

.lab-software-active
.lab-window-chart i:nth-child(1) {
    animation-delay: 650ms;
}

.lab-software-active
.lab-window-chart i:nth-child(2) {
    animation-delay: 720ms;
}

.lab-software-active
.lab-window-chart i:nth-child(3) {
    animation-delay: 790ms;
}

.lab-software-active
.lab-window-chart i:nth-child(4) {
    animation-delay: 860ms;
}

.lab-software-active
.lab-window-chart i:nth-child(5) {
    animation-delay: 930ms;
}

.lab-software-active
.lab-window-chart i:nth-child(6) {
    animation-delay: 1000ms;
}

.lab-software-active
.lab-window-chart i:nth-child(7) {
    animation-delay: 1070ms;
}

.lab-software-active
.lab-window-chart i:nth-child(8) {
    animation-delay: 1140ms;
}

.lab-software-active
.lab-window-chart i:nth-child(9) {
    animation-delay: 1210ms;
}

.lab-window-nav span {
    position: relative;

    overflow: hidden;
}

.lab-window-nav span::after {
    content: "";

    position: absolute;
    inset: 0;

    transform:
        translateX(-105%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(122, 196, 255, .75),
            transparent
        );
}

.lab-software-active
.lab-window-nav span::after {
    animation:
        lab-nav-pulse
        3.5s
        ease-in-out
        infinite;
}

.lab-software-active
.lab-window-nav span:nth-of-type(2)::after {
    animation-delay:
        .7s;
}

.lab-software-active
.lab-window-nav span:nth-of-type(3)::after {
    animation-delay:
        1.4s;
}


@keyframes lab-terminal-scan {

    0% {
        top: -30%;

        opacity: 0;
    }

    15% {
        opacity: .9;
    }

    75% {
        opacity: .65;
    }

    100% {
        top: 115%;

        opacity: 0;
    }

}


@keyframes lab-chart-rise {

    to {
        transform:
            scaleY(1);

        opacity: 1;
    }

}


@keyframes lab-nav-pulse {

    0%,
    55% {
        transform:
            translateX(-105%);
    }

    78%,
    100% {
        transform:
            translateX(105%);
    }

}


/* ============================================================
   CONTACT — SUBTLE AMBIENT GLOW
============================================================ */

.lab-contact::before {
    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

    left: -220px;
    bottom: -300px;

    border-radius: 50%;

    background:
        rgba(0, 135, 224, .15);

    filter:
        blur(110px);

    pointer-events: none;

    animation:
        lab-contact-breathe
        7s
        ease-in-out
        infinite;
}

.lab-contact-cross {
    animation:
        lab-cross-spin
        9s
        linear
        infinite;
}


@keyframes lab-contact-breathe {

    0%,
    100% {
        opacity: .28;

        transform:
            scale(.9);
    }

    50% {
        opacity: .7;

        transform:
            scale(1.08);
    }

}


@keyframes lab-cross-spin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   MOBILE — REDUCE POINTER-STYLE DEPTH
============================================================ */

@media (max-width: 750px) {

    .lab-brand-stage {
        transform: none !important;
    }

    .lab-product,
    .lab-product:hover {
        transform:
            translateY(0);
    }

    .lab-product:hover {
        box-shadow:
            0 15px 38px
            rgba(0,0,0,.22);
    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

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

    .lab-gridlines,
    .lab-gridlines::after,
    .lab-brand-stage,
    .lab-brand-stage::after,
    .lab-hero-logo,
    .lab-orbit,
    .lab-stage-corner,
    .lab-stage-caption span,
    .lab-hero-copy > *,
    .lab-button::before,
    .lab-hero-bottom a span,
    .lab-button-outline[href="#capabilities"] > span,
    .lab-reveal,
    .lab-product,
    .lab-product::before,
    .lab-product-image img,
    .lab-product-arrow,
    .lab-capability,
    .lab-art-grid,
    .lab-cad-path,
    .lab-part,
    .lab-software-window,
    .lab-software-window::after,
    .lab-window-tiles span,
    .lab-window-chart i,
    .lab-window-nav span::after,
    .lab-contact::before,
    .lab-contact-cross {
        animation: none !important;
        transition: none !important;
    }

    .lab-hero-copy > *,
    .lab-reveal,
    .lab-window-tiles span,
    .lab-window-chart i,
    .lab-software-window {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .lab-cad-path {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }

}