/* ========================================
   STED ARCHBUILD — PREMIUM ANIMATIONS
   Fully self-contained. Zero changes to existing CSS.

   TO ROLLBACK: Delete this file + js/animations.js
   and remove the two include lines from header.php
   and footer.php
   ======================================== */

/* ========================================
   1. SCROLL REVEAL — Enhanced fade-in
   Replaces default .fade-in with richer variants
   ======================================== */

/* Base: hide elements before reveal */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.reveal.from-left {
    transform: translateX(-60px);
}

.reveal.from-right {
    transform: translateX(60px);
}

.reveal.from-scale {
    transform: scale(0.92);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* ========================================
   2. STAGGERED GRID ENTRANCE
   Children cascade in with delay
   ======================================== */

.stagger-children.visible > * {
    animation: staggerIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Stagger delays — set by JS via --stagger-index */
.stagger-children.visible > * {
    animation-delay: calc(var(--stagger-index, 0) * 0.1s);
}

@keyframes staggerIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   3. TEXT SPLIT REVEAL
   Section titles animate word-by-word
   ======================================== */

.text-reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.text-reveal-active .text-reveal-word {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   4. IMAGE REVEAL WIPE
   Black curtain slides away to reveal image
   ======================================== */

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

.img-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2;
}

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

/* Slight zoom on the image as curtain reveals */
.img-reveal img {
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.img-reveal.revealed img {
    transform: scale(1.04);
}

/* ========================================
   5. COUNTER ANIMATION
   Number elements get .counting class
   ======================================== */

.stat-number {
    transition: none;
}

/* ========================================
   6. MAGNETIC HOVER
   Cards tilt subtly toward cursor
   ======================================== */

.magnetic-hover {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* ========================================
   7. PARALLAX DEPTH
   Background elements move slower on scroll
   ======================================== */

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

/* ========================================
   8. SMOOTH PAGE LOAD
   Fade in entire page on load
   ======================================== */

.page-loading {
    opacity: 0;
}

.page-loaded {
    animation: pageReveal 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes pageReveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   LIGHTBOX SAFETY — Ensure animations never
   interfere with fixed-position overlays
   ======================================== */
.lightbox,
.lightbox * {
    animation: none !important;
    will-change: auto !important;
}

.lightbox.active {
    opacity: 1 !important;
    transform: none !important;
}

.gallery-item,
.gallery-item img,
.gallery-grid {
    will-change: auto !important;
}

/* ========================================
   NAV SCROLL REFINEMENT
   Shrink nav elegantly on scroll
   ======================================== */

nav.scrolled {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}

nav.scrolled .logo img {
    max-height: 40px;
    transition: max-height 0.3s ease;
}

/* ========================================
   HOVER ENHANCEMENTS
   Refined hover states for cards
   ======================================== */

/* Project cards — smooth lift */
.project-card {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s ease !important;
}

/* Why cards — elegant lift */
.why-card {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s ease !important;
}

/* Stat cards — refined */
.stat-card {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s ease,
                background 0.5s ease !important;
}

/* Team cards — graceful */
.team-card {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s ease !important;
}

/* ========================================
   RESPONSIVE — Reduce motion on mobile
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .text-reveal-word,
    .img-reveal::after,
    .img-reveal img,
    .stagger-children.visible > *,
    .page-loaded {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .img-reveal::after {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Simpler animations on mobile for performance */
    .reveal {
        transform: translateY(30px);
        transition-duration: 0.6s;
    }

    .reveal.from-left,
    .reveal.from-right {
        transform: translateY(30px);
    }

    .stagger-children.visible > * {
        animation-duration: 0.4s;
    }

    .img-reveal::after {
        transition-duration: 0.6s;
    }

    /* Disable magnetic hover on touch */
    .magnetic-hover {
        transform: none !important;
    }
}