/* ============================================================
   SG Animations — Linear/Stripe-style scroll reveals + micro-interactions
   Lightweight, IntersectionObserver-powered, respects reduced-motion.
   ============================================================ */

/* ---- Base reveal state (applied via JS .sg-reveal class) ---- */
.sg-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.sg-reveal.sg-in {
    opacity: 1;
    transform: translateY(0);
}

/* Slight variants */
.sg-reveal-left { transform: translateX(-32px); }
.sg-reveal-left.sg-in { transform: translateX(0); }
.sg-reveal-right { transform: translateX(32px); }
.sg-reveal-right.sg-in { transform: translateX(0); }
.sg-reveal-scale { transform: scale(0.94); }
.sg-reveal-scale.sg-in { transform: scale(1); }

/* Stagger delays for grids — applied via :nth-child */
.sg-stagger > *:nth-child(1) { transition-delay: 0ms; }
.sg-stagger > *:nth-child(2) { transition-delay: 80ms; }
.sg-stagger > *:nth-child(3) { transition-delay: 160ms; }
.sg-stagger > *:nth-child(4) { transition-delay: 240ms; }
.sg-stagger > *:nth-child(5) { transition-delay: 320ms; }
.sg-stagger > *:nth-child(6) { transition-delay: 400ms; }
.sg-stagger > *:nth-child(7) { transition-delay: 480ms; }
.sg-stagger > *:nth-child(8) { transition-delay: 560ms; }

/* ---- Smooth scrolling (anchor links + Cmd+Home) ---- */
html { scroll-behavior: smooth; }

/* ---- Stat counter — base style for animation target ---- */
.sg-stat-num { transition: none; }

/* ---- Button micro-interactions ---- */
.sg-btn,
.elementor-button,
.sg-direct-form-btn {
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.sg-btn:active,
.elementor-button:active,
.sg-direct-form-btn:active {
    transform: translateY(1px) scale(0.99);
}

/* Subtle underline-grow on text links */
.sg-post-content a,
.sg-svc-faq .sg-faq-answer a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    text-decoration: none;
    transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sg-post-content a:hover,
.sg-svc-faq .sg-faq-answer a:hover {
    background-size: 100% 1px;
}

/* ---- Image hover lift inside portfolio + svc cards (already partially set) ---- */
.sg-port-card-img img,
.sg-svc-hero-art img,
.sg-about-hero-art img,
.sg-story-art img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Header subtle shrink on scroll (applied via JS) ---- */
.header-section.sg-header-shrunk,
header.sg-header-shrunk {
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    background: #ffffff;
    transition: box-shadow 0.3s ease;
}

/* ---- Reduced motion: disable everything ---- */
@media (prefers-reduced-motion: reduce) {
    .sg-reveal,
    .sg-reveal-left,
    .sg-reveal-right,
    .sg-reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    html { scroll-behavior: auto; }
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}