/* =========================================================
   COSHIFT STUDIO
   Motion and Interaction System
   ========================================================= */


/* =========================================================
   1. SCROLL REVEALS
   ========================================================= */

[data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1), transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal="left"] {
    transform: translateX(-42px);
}

[data-reveal="right"] {
    transform: translateX(42px);
}

[data-reveal="scale"] {
    transform: scale(0.94);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

[data-reveal-delay="1"] {
    transition-delay: 80ms;
}

[data-reveal-delay="2"] {
    transition-delay: 160ms;
}

[data-reveal-delay="3"] {
    transition-delay: 240ms;
}

[data-reveal-delay="4"] {
    transition-delay: 320ms;
}

[data-reveal-delay="5"] {
    transition-delay: 400ms;
}


/* =========================================================
   2. INTERACTIVE LIFT
   ========================================================= */

.interactive-lift {
    transition: transform var(--transition-standard), box-shadow var(--transition-standard), border-color var(--transition-standard);
}

    .interactive-lift:hover {
        transform: translateY(-8px);
        border-color: rgba(74, 103, 232, 0.32);
        box-shadow: var(--shadow-medium);
    }


/* =========================================================
   3. FLOATING ELEMENTS
   ========================================================= */

.float-slow {
    animation: floatSlow 7s ease-in-out infinite;
}

.float-medium {
    animation: floatMedium 5s ease-in-out infinite;
}

.float-reverse {
    animation: floatReverse 6.5s ease-in-out infinite;
}

@keyframes floatSlow {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -16px, 0);
    }
}

@keyframes floatMedium {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -11px, 0) rotate(1deg);
    }
}

@keyframes floatReverse {
    0%, 100% {
        transform: translate3d(0, -8px, 0);
    }

    50% {
        transform: translate3d(0, 8px, 0);
    }
}


/* =========================================================
   4. AMBIENT ORBS
   ========================================================= */

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(8px);
    opacity: 0.45;
}

.ambient-orb--blue {
    background: radial-gradient( circle, rgba(74, 103, 232, 0.44) 0%, rgba(74, 103, 232, 0) 72% );
}

.ambient-orb--teal {
    background: radial-gradient( circle, rgba(47, 156, 149, 0.38) 0%, rgba(47, 156, 149, 0) 72% );
}

.ambient-orb--coral {
    background: radial-gradient( circle, rgba(224, 122, 95, 0.28) 0%, rgba(224, 122, 95, 0) 72% );
}

.drift-one {
    animation: driftOne 14s ease-in-out infinite alternate;
}

.drift-two {
    animation: driftTwo 17s ease-in-out infinite alternate;
}

@keyframes driftOne {
    from {
        transform: translate3d(-10px, -8px, 0) scale(1);
    }

    to {
        transform: translate3d(28px, 20px, 0) scale(1.08);
    }
}

@keyframes driftTwo {
    from {
        transform: translate3d(18px, 16px, 0) scale(1.08);
    }

    to {
        transform: translate3d(-26px, -18px, 0) scale(0.95);
    }
}


/* =========================================================
   5. STATUS PULSE
   ========================================================= */

.status-dot {
    position: relative;
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--teal);
}

    .status-dot::after {
        position: absolute;
        inset: -5px;
        border: 1px solid rgba(47, 156, 149, 0.55);
        border-radius: 50%;
        content: "";
        animation: statusPulse 2.2s ease-out infinite;
    }

@keyframes statusPulse {
    0% {
        transform: scale(0.7);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}


/* =========================================================
   6. SHIMMER AND LIGHT SWEEP
   ========================================================= */

.shimmer-line {
    position: relative;
    overflow: hidden;
}

    .shimmer-line::after {
        position: absolute;
        inset: 0;
        transform: translateX(-110%);
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.42), transparent );
        content: "";
        animation: shimmerSweep 4.5s ease-in-out infinite;
    }

@keyframes shimmerSweep {
    0%, 35% {
        transform: translateX(-110%);
    }

    70%, 100% {
        transform: translateX(110%);
    }
}


/* =========================================================
   7. MOVING GRADIENT
   ========================================================= */

.animated-gradient {
    background-size: 220% 220%;
    animation: gradientShift 10s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* =========================================================
   8. CONNECTOR LINE
   ========================================================= */

.motion-line {
    position: relative;
    overflow: hidden;
    background: rgba(74, 103, 232, 0.17);
}

    .motion-line::after {
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient( 90deg, transparent, var(--blue), var(--teal), transparent );
        content: "";
        animation: lineTravel 3.8s linear infinite;
    }

@keyframes lineTravel {
    to {
        transform: translateX(100%);
    }
}


/* =========================================================
   9. MARQUEE
   ========================================================= */

.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
}

.marquee__track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 34px;
    min-width: max-content;
    animation: marqueeMove 28s linear infinite;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

@keyframes marqueeMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =========================================================
   10. VISUAL TILT
   ========================================================= */

.tilt-card {
    transform-style: preserve-3d;
    transition: transform 180ms ease, box-shadow 280ms ease;
}

    .tilt-card:hover {
        box-shadow: var(--shadow-large);
    }

.tilt-card__content {
    transform: translateZ(18px);
}


/* =========================================================
   11. PAGE PROGRESS BAR
   ========================================================= */

.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: 0;
    height: 3px;
    background: var(--gradient-progress);
    box-shadow: 0 0 14px rgba(74, 103, 232, 0.46);
}


/* =========================================================
   12. ATTENTION RING
   ========================================================= */

.attention-ring {
    position: relative;
}

    .attention-ring::after {
        position: absolute;
        inset: -8px;
        border: 1px solid rgba(224, 122, 95, 0.4);
        border-radius: inherit;
        content: "";
        animation: attentionRing 2.8s ease-out infinite;
    }

@keyframes attentionRing {
    0% {
        transform: scale(0.96);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.08);
        opacity: 0;
    }
}


/* =========================================================
   13. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .marquee__track {
        animation: none;
    }
}