/* Base - all animated elements start hidden */

.fade-up,
.slide-left,
.slide-right {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Fade up */

.fade-up {
    transform: translateY(40px);
}

/* Slide in from left */

.slide-left {
    transform: translateX(-120vw);
}

/* Slide in from right */

.slide-right {
    transform: translateX(120vw);
}

/* Visible state - applies to all three */

.fade-up.visible,
.slide-left.visible,
.slide-right.visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Stagger delays */

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* Hero amber pulse - slow amber glow, positioned relative to the headline box so it tracks the box wherever it sits. top adds --space-hero-line-shift to offset the box's own upward nudge (components.css), keeping the glow's on-screen position fixed while the box and text above it move up. */

.hero-glow {
    position: absolute;
    top: calc(69% + var(--space-hero-line-shift));
    left: 50%;
    width: 60vw;
    height: 60vw;
    max-width: 800px;
    max-height: 800px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    animation: hero-pulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes hero-pulse {
    0%, 100% {
        opacity: 0.17;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.345;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Hero scroll indicator glow - same hero-pulse animation, applied to a smaller glow behind the scroll-down arrow so it reads as the same effect rather than a new one. Deliberate, explicit exception to the "no animation on the hero" rule in 08-Design-Brief.md/CLAUDE.md, agreed with Lee - does not extend to any other part of the hero. */

.hero-scroll-icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    animation: hero-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

/* Diagram arrow draw-in (Hy-Tek flow diagram) - travelling dash that solidifies on arrival */

.diagram-arrow {
    fill: none;
    stroke-dasharray: 0.06 1;
    stroke-dashoffset: 1;
}

.fade-up.visible .diagram-arrow-top {
    animation: diagram-arrow-draw 1s ease-out 3s forwards;
}

.fade-up.visible .diagram-arrow-bottom {
    animation: diagram-arrow-draw 1s ease-out 5s forwards;
}

@keyframes diagram-arrow-draw {
    0% {
        stroke-dasharray: 0.06 1;
        stroke-dashoffset: 1;
    }
    65% {
        stroke-dasharray: 0.06 1;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 1 0;
        stroke-dashoffset: 0;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .slide-left,
    .slide-right {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .diagram-arrow {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        animation: none !important;
    }

    .hero-glow,
    .hero-scroll-icon-glow {
        animation: none;
        opacity: 0.2;
    }

    .hero-scroll-indicator {
        transition: none;
    }

    .divider-scanner {
        animation: none;
        display: none;
    }

    .lightbox,
    .lightbox.is-open {
        transition: none;
    }
}