/* ==========================================================================
   ASI CONSTRUCT - Animations (Enhanced)
   Dynamic scroll motion, fades, and micro-interactions
   ========================================================================== */

/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */

.reveal {
    opacity: 0;
    transition: all var(--duration-reveal) var(--ease-out-expo);
}

/* Reveal Up - Primary */
.reveal-up {
    transform: translateY(80px);
}

/* Reveal Down */
.reveal-down {
    transform: translateY(-80px);
}

/* Reveal Left */
.reveal-left {
    transform: translateX(80px);
}

/* Reveal Right */
.reveal-right {
    transform: translateX(-80px);
}

/* Reveal Scale */
.reveal-scale {
    transform: scale(0.85);
}

/* Reveal Rotate */
.reveal-rotate {
    transform: rotate(-5deg) translateY(40px);
}

/* Reveal Blur */
.reveal-blur {
    filter: blur(10px);
    transform: translateY(40px);
}

/* Character-by-character reveal */
.reveal-chars .char {
    display: inline-block;
    opacity: 0.5;
    filter: blur(5px);
    transition: opacity 0.4s ease-out, filter 0.4s ease-out;
}

.reveal-chars.visible .char {
    opacity: 1;
    filter: blur(0);
}

/* Reveal Fade Only */
.reveal-fade {
    /* Just opacity, no transform */
}

/* Active State */
.reveal.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1) rotate(0);
    filter: blur(0);
}

/* Delay Classes - Extended */
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }
.delay-5 { transition-delay: 500ms; }
.delay-6 { transition-delay: 600ms; }
.delay-7 { transition-delay: 700ms; }
.delay-8 { transition-delay: 800ms; }

/* Stagger for Lists (use on parent) */
.stagger-children > * {
    opacity: 0;
    transform: translateY(60px);
    transition: all var(--duration-reveal) var(--ease-out-expo);
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(7) { transition-delay: 600ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(8) { transition-delay: 700ms; opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Parallax Scroll Effects (CSS-only with scroll-behavior)
   ========================================================================== */

.parallax-slow {
    will-change: transform;
    transition: transform 0.1s linear;
}

.parallax-container {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ==========================================================================
   Text Reveal Animations
   ========================================================================== */

/* Clip reveal - text slides up from behind a mask */
.reveal-clip {
    overflow: hidden;
}

.reveal-clip > * {
    transform: translateY(110%);
    transition: transform 1.2s var(--ease-out-expo);
}

.reveal-clip.visible > * {
    transform: translateY(0);
}

/* Split text animation wrapper */
.split-text {
    overflow: hidden;
    display: inline-block;
}

.split-text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.6s var(--ease-out-expo);
}

.split-text.visible .char {
    opacity: 1;
    transform: translateY(0);
}

/* Character stagger delays */
.split-text.visible .char:nth-child(1) { transition-delay: 0ms; }
.split-text.visible .char:nth-child(2) { transition-delay: 30ms; }
.split-text.visible .char:nth-child(3) { transition-delay: 60ms; }
.split-text.visible .char:nth-child(4) { transition-delay: 90ms; }
.split-text.visible .char:nth-child(5) { transition-delay: 120ms; }
.split-text.visible .char:nth-child(6) { transition-delay: 150ms; }
.split-text.visible .char:nth-child(7) { transition-delay: 180ms; }
.split-text.visible .char:nth-child(8) { transition-delay: 210ms; }
.split-text.visible .char:nth-child(9) { transition-delay: 240ms; }
.split-text.visible .char:nth-child(10) { transition-delay: 270ms; }

/* ==========================================================================
   Hover Animations
   ========================================================================== */

/* Lift on Hover */
.hover-lift {
    transition: transform var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Scale on Hover */
.hover-scale {
    transition: transform var(--duration-normal) var(--ease-out-expo);
}

.hover-scale:hover {
    transform: scale(1.03);
}

/* Glow on Hover */
.hover-glow {
    transition: box-shadow var(--duration-normal);
}

.hover-glow:hover {
    box-shadow: 0 0 60px rgba(0, 71, 171, 0.4);
}

/* Border Color on Hover */
.hover-border {
    transition: border-color var(--duration-normal);
}

.hover-border:hover {
    border-color: var(--color-accent);
}

/* Magnetic hover effect (enhanced) */
.hover-magnetic {
    transition: transform 0.3s var(--ease-out-expo);
}

/* Underline grow from center */
.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: all 0.4s var(--ease-out-expo);
    transform: translateX(-50%);
}

.hover-underline:hover::after {
    width: 100%;
}

/* ==========================================================================
   Continuous Animations
   ========================================================================== */

/* Pulse */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Float */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(1deg); }
    75% { transform: translateY(-5px) rotate(-1deg); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 20s linear infinite;
}

/* Gradient Shift */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

/* Breathe */
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.02); opacity: 1; }
}

.animate-breathe {
    animation: breathe 4s ease-in-out infinite;
}

/* ==========================================================================
   Line/Border Animations
   ========================================================================== */

/* Line expand from left */
@keyframes line-expand-left {
    from { width: 0; }
    to { width: 100%; }
}

.line-expand {
    animation: line-expand-left 1.5s var(--ease-out-expo) forwards;
}

/* Line expand from center */
@keyframes line-expand-center {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.line-expand-center {
    transform-origin: center;
    animation: line-expand-center 1s var(--ease-out-expo) forwards;
}

/* Border draw animation */
@keyframes border-draw {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    25% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    50% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
    }
    75% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* ==========================================================================
   Glitch & Distortion Effects
   ========================================================================== */

@keyframes glitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-3px, 3px); }
    40% { transform: translate(-3px, -3px); }
    60% { transform: translate(3px, 3px); }
    80% { transform: translate(3px, -3px); }
}

.animate-glitch:hover {
    animation: glitch 0.3s ease-in-out;
}

/* Digital noise flicker */
@keyframes noise-flicker {
    0%, 100% { opacity: 0.03; }
    50% { opacity: 0.06; }
}

.animate-noise {
    animation: noise-flicker 0.15s infinite;
}

/* ==========================================================================
   Scroll Progress Indicator
   ========================================================================== */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--color-accent);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 9999;
    transition: transform 0.1s linear;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

@keyframes skeleton {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0px,
        rgba(255, 255, 255, 0.05) 40px,
        rgba(255, 255, 255, 0.02) 80px
    );
    background-size: 200px 100%;
    animation: skeleton 1.5s ease-in-out infinite;
}

/* ==========================================================================
   Scroll Indicator
   ========================================================================== */

@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(15px); opacity: 0.5; }
}

.scroll-indicator {
    animation: scroll-bounce 2s ease-in-out infinite;
}

/* ==========================================================================
   Page Transition
   ========================================================================== */

@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-enter {
    animation: page-enter 0.6s var(--ease-out-expo) forwards;
}

/* ==========================================================================
   Counter Animation (for stats)
   ========================================================================== */

.counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Image Reveal
   ========================================================================== */

.img-reveal {
    overflow: hidden;
    position: relative;
}

.img-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-void);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 1.2s var(--ease-out-expo);
}

.img-reveal.visible::after {
    transform: scaleX(0);
}

.img-reveal img {
    transform: scale(1.2);
    transition: transform 1.5s var(--ease-out-expo);
}

.img-reveal.visible img {
    transform: scale(1);
}

/* ==========================================================================
   Smooth Scroll Snap (optional sections)
   ========================================================================== */

.scroll-snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.scroll-snap-section {
    scroll-snap-align: start;
    min-height: 100vh;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .stagger-children > * {
        opacity: 1;
        transform: none;
    }
}