/* =============================================
   PRAXIS ENGINEERING — SCROLL ANIMATIONS
   ============================================= */

/* --- Reveal Base States (hidden until JS triggers) --- */
.reveal {
    opacity:    0;
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

.reveal.visible {
    opacity:   1;
    transform: none !important;
}

/* Directional variants */
.reveal-up    { transform: translateY(48px); }
.reveal-down  { transform: translateY(-48px); }
.reveal-left  { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-scale { transform: scale(0.92); }
.reveal-fade  { transform: none; }

/* Stagger delays for child elements */
.stagger > *:nth-child(1)  { transition-delay: 0ms; }
.stagger > *:nth-child(2)  { transition-delay: 100ms; }
.stagger > *:nth-child(3)  { transition-delay: 200ms; }
.stagger > *:nth-child(4)  { transition-delay: 300ms; }
.stagger > *:nth-child(5)  { transition-delay: 400ms; }
.stagger > *:nth-child(6)  { transition-delay: 500ms; }
.stagger > *:nth-child(7)  { transition-delay: 600ms; }
.stagger > *:nth-child(8)  { transition-delay: 700ms; }
.stagger > *:nth-child(9)  { transition-delay: 800ms; }
.stagger > *:nth-child(10) { transition-delay: 900ms; }
.stagger > *:nth-child(11) { transition-delay: 1000ms; }
.stagger > *:nth-child(12) { transition-delay: 1100ms; }

/* Apply reveal to staggered children */
.stagger > * {
    opacity:    0;
    transform:  translateY(36px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* --- Hero Content Animation --- */
.hero-content .hero-eyebrow,
.hero-content .hero-title,
.hero-content .hero-subtitle,
.hero-content .hero-cta-group {
    opacity:   0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-content.animate-in .hero-eyebrow   { opacity: 1; transform: none; transition-delay: 200ms; }
.hero-content.animate-in .hero-title     { opacity: 1; transform: none; transition-delay: 400ms; }
.hero-content.animate-in .hero-subtitle  { opacity: 1; transform: none; transition-delay: 600ms; }
.hero-content.animate-in .hero-cta-group { opacity: 1; transform: none; transition-delay: 800ms; }

/* --- Nav scroll transform --- */
.site-header {
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled {
    background-color: var(--secondary);
    box-shadow:       0 4px 24px rgba(0,0,0,0.2);
    /* backdrop-filter intentionally removed — the header background is already
       solid #212D3A so blur has nothing to show through and is visually
       imperceptible. More importantly, backdrop-filter creates a new containing
       block on iOS Safari that breaks position:fixed children (the mobile nav
       overlay), causing it to mis-position at every scroll depth on every page.
       Removing it permanently fixes the mobile nav on all browsers and devices. */
}

/* --- Parallax Layers --- */
[data-parallax] {
    will-change: transform;
}

/* --- Counter Animation --- */
.counter-wrap {
    overflow: hidden;
}

.stat-number {
    display:      block;
    line-height:  1;
}

/* --- Service Card Entrance --- */
.service-card {
    opacity:    0;
    transform:  translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card.visible {
    opacity:   1;
    transform: none;
}

.service-card:nth-child(1) { transition-delay: 0ms; }
.service-card:nth-child(2) { transition-delay: 150ms; }
.service-card:nth-child(3) { transition-delay: 300ms; }

/* --- Team Card Entrance --- */
.team-card,
.team-bio-card {
    opacity:    0;
    transform:  translateY(32px);
    transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.3s ease;
}

.team-card.visible,
.team-bio-card.visible {
    opacity:   1;
    transform: none;
}

/* Stagger for team cards */
.team-grid .team-card:nth-child(1),
.team-bio-grid .team-bio-card:nth-child(1)  { transition-delay: 0ms; }
.team-grid .team-card:nth-child(2),
.team-bio-grid .team-bio-card:nth-child(2)  { transition-delay: 80ms; }
.team-grid .team-card:nth-child(3),
.team-bio-grid .team-bio-card:nth-child(3)  { transition-delay: 160ms; }
.team-grid .team-card:nth-child(4),
.team-bio-grid .team-bio-card:nth-child(4)  { transition-delay: 240ms; }
.team-grid .team-card:nth-child(5),
.team-bio-grid .team-bio-card:nth-child(5)  { transition-delay: 320ms; }
.team-grid .team-card:nth-child(6),
.team-bio-grid .team-bio-card:nth-child(6)  { transition-delay: 400ms; }
.team-bio-grid .team-bio-card:nth-child(7)  { transition-delay: 480ms; }
.team-bio-grid .team-bio-card:nth-child(8)  { transition-delay: 560ms; }
.team-bio-grid .team-bio-card:nth-child(9)  { transition-delay: 640ms; }
.team-bio-grid .team-bio-card:nth-child(10) { transition-delay: 720ms; }
.team-bio-grid .team-bio-card:nth-child(11) { transition-delay: 800ms; }
.team-bio-grid .team-bio-card:nth-child(12) { transition-delay: 880ms; }

/* --- Project Card Entrance --- */
.project-card {
    opacity:    0;
    transform:  scale(0.96) translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.project-card.visible {
    opacity:   1;
    transform: none;
}

.projects-grid .project-card:nth-child(1) { transition-delay: 0ms; }
.projects-grid .project-card:nth-child(2) { transition-delay: 100ms; }
.projects-grid .project-card:nth-child(3) { transition-delay: 200ms; }
.projects-grid .project-card:nth-child(4) { transition-delay: 300ms; }
.projects-grid .project-card:nth-child(5) { transition-delay: 400ms; }
.projects-grid .project-card:nth-child(6) { transition-delay: 500ms; }

/* --- Stat Item Entrance --- */
.stat-item {
    opacity:    0;
    transform:  translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.3s ease;
}

.stat-item.visible {
    opacity:   1;
    transform: none;
}

.stats-grid .stat-item:nth-child(1) { transition-delay: 0ms; }
.stats-grid .stat-item:nth-child(2) { transition-delay: 120ms; }
.stats-grid .stat-item:nth-child(3) { transition-delay: 240ms; }
.stats-grid .stat-item:nth-child(4) { transition-delay: 360ms; }

/* --- Horizontal Rule Accent --- */
.section-divider {
    width:            60px;
    height:           4px;
    background-color: var(--primary);
    margin:           24px auto 0;
    border-radius:    2px;
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.6s ease 0.3s;
}

.section-header.visible .section-divider,
.reveal.visible .section-divider {
    transform: scaleX(1);
}

/* --- Line Draw for section-category-title --- */
.service-category-title {
    position: relative;
}

.service-category-title::after {
    content:          '';
    position:         absolute;
    bottom:           -3px;
    left:             0;
    width:            100%;
    height:           3px;
    background-color: var(--primary);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.6s ease;
}

.service-category.visible .service-category-title::after {
    transform: scaleX(1);
}

/* --- Video Sections Fade In --- */
.video-bg-section .video-bg-content > * {
    opacity:    0;
    transform:  translateY(32px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.video-bg-section.visible .video-bg-content > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 200ms; }
.video-bg-section.visible .video-bg-content > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 400ms; }
.video-bg-section.visible .video-bg-content > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 600ms; }

/* --- Scroll Progress Bar --- */
.scroll-progress {
    position:         fixed;
    top:              0;
    left:             0;
    height:           3px;
    background-color: var(--primary);
    z-index:          9999;
    width:            0%;
    transition:       width 0.1s linear;
}

/* --- Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .service-card,
    .team-card,
    .team-bio-card,
    .project-card,
    .stat-item,
    .stagger > *,
    .hero-content .hero-eyebrow,
    .hero-content .hero-title,
    .hero-content .hero-subtitle,
    .hero-content .hero-cta-group {
        opacity:    1 !important;
        transform:  none !important;
        transition: none !important;
    }
}