/*
 * Shared motion + branding layer for all /labs/ pages.
 * Loaded AFTER each page's inline <style>, so its rules override.
 *
 * Provides:
 *   - Brand variables (--orange*) used by btn-primary
 *   - Scroll progress bar (top of viewport)
 *   - fade-up / fade-up-stagger entry animations
 *   - Cursor-tracking spotlight in .hero
 *   - Form focus ring (orange)
 *   - prefers-reduced-motion overrides at bottom
 *
 * The homepage (index.html) keeps its motion inline for now; this file is
 * for the inner pages (online-presence, automation, about, custom-builds).
 */

:root {
    --orange: #FF7A3D;
    --orange-dark: #e5682d;
    --orange-soft: #fff4ee;
}

/* Primary CTA button — orange-on-white with subtle shadow + lift on hover.
   Uses body-prefix to win the specificity battle against inline page CSS. */
body .btn-primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 1px 2px rgba(255, 122, 61, 0.2), 0 0 0 1px rgba(255, 122, 61, 0.04);
    transition: background 0.15s, box-shadow 0.2s, transform 0.15s;
}
body .btn-primary:hover {
    background: var(--orange-dark);
    box-shadow: 0 4px 12px rgba(255, 122, 61, 0.28);
    transform: translateY(-1px);
}

/* Scroll progress bar — width updated from motion.js */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--orange));
    z-index: 200;
    pointer-events: none;
    transition: width 80ms linear;
}

/* Cursor-tracking spotlight in hero — subtle teal radial gradient */
.hero { position: relative; overflow: hidden; }
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        480px circle at var(--mx, 50%) var(--my, 50%),
        rgba(13, 148, 136, 0.05),
        transparent 60%
    );
    transition: background 0.15s linear;
    z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

/* Scroll-triggered entry animations.
   `.fade-up` slides up a single element.
   `.fade-up-stagger` cascades through its direct children. */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.in-view { opacity: 1; transform: translateY(0); }
.fade-up-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-up-stagger.in-view > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.fade-up-stagger.in-view > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
.fade-up-stagger.in-view > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.16s; }
.fade-up-stagger.in-view > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
.fade-up-stagger.in-view > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
.fade-up-stagger.in-view > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

/* Form focus ring — orange glow on inputs/textareas/selects */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.25);
}

/* Cards get GPU-accelerated hover lifts (tilt added via motion.js) */
.service-card, .starter-card, .ex-card, .item-block, .step, .fit-card, .faq-item {
    will-change: transform;
}

/* Reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
    .scroll-progress { display: none; }
    .fade-up, .fade-up-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* Visible keyboard focus — last so it beats the input:focus outline reset above */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent, #0d9488);
    outline-offset: 2px;
}