/*!
 * yh-motion.css — build-free premium motion + storytelling layer for YallowHost.
 *
 * Hand-authored, loaded with a plain <link> AFTER yh-polish.css (no Vite/SCSS
 * build). Reuses the existing --yh-* design tokens so it stays on-brand. Pure
 * progressive enhancement: every effect is transform/opacity only, and ALL
 * motion is gated behind the `.yh-motion` class that yh-motion.js adds ONLY when
 * IntersectionObserver is supported and the user has NOT requested reduced
 * motion. With no JS / reduced motion / script failure, content renders fully
 * visible and unmoved. Safe to remove by deleting this file + its <link>.
 */

/* ============================================================= Scroll reveal */
/* Hidden-initial state applies ONLY under .yh-motion, so content is never
   trapped hidden when JS is off or reduced motion is on. */
.yh-motion .yh-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
.yh-motion .yh-reveal-2 { transition-delay: 0.08s; }
.yh-motion .yh-reveal-3 { transition-delay: 0.16s; }
.yh-motion .yh-reveal.is-visible { opacity: 1; transform: none; }

/* Stagger: reveal a container's direct children in sequence. */
.yh-motion .yh-stagger > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
}
.yh-motion .yh-stagger.is-visible > * { opacity: 1; transform: none; }
.yh-motion .yh-stagger.is-visible > *:nth-child(2) { transition-delay: 0.06s; }
.yh-motion .yh-stagger.is-visible > *:nth-child(3) { transition-delay: 0.12s; }
.yh-motion .yh-stagger.is-visible > *:nth-child(4) { transition-delay: 0.18s; }
.yh-motion .yh-stagger.is-visible > *:nth-child(5) { transition-delay: 0.24s; }
.yh-motion .yh-stagger.is-visible > *:nth-child(n+6) { transition-delay: 0.30s; }

/* ===================================================== Animated gradient text */
@keyframes yh-gradient-pan {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.yh-motion .yh-anim-gradient {
    background-size: 200% auto;
    animation: yh-gradient-pan 9s linear infinite alternate;
}

/* ============================================ Floating network nodes (hero) */
/* Decorative, non-interactive. Drop a `.yh-nodes` element (aria-hidden) inside
   a position:relative container; it paints behind content (z-index:0). */
.yh-nodes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.yh-nodes > span {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(var(--yh-accent-rgb), 0.35);
    box-shadow: 0 0 0 6px rgba(var(--yh-accent-rgb), 0.06);
}
.yh-nodes > span:nth-child(1) { top: 16%; left: 12%; }
.yh-nodes > span:nth-child(2) { top: 64%; left: 22%; width: 0.35rem; height: 0.35rem; }
.yh-nodes > span:nth-child(3) { top: 28%; left: 78%; }
.yh-nodes > span:nth-child(4) { top: 72%; left: 84%; width: 0.4rem; height: 0.4rem; }
.yh-nodes > span:nth-child(5) { top: 44%; left: 52%; width: 0.3rem; height: 0.3rem; }
@keyframes yh-drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}
.yh-motion .yh-nodes > span { animation: yh-drift 14s ease-in-out infinite; }
.yh-motion .yh-nodes > span:nth-child(2) { animation-duration: 18s; animation-delay: -3s; }
.yh-motion .yh-nodes > span:nth-child(3) { animation-duration: 16s; animation-delay: -6s; }
.yh-motion .yh-nodes > span:nth-child(4) { animation-duration: 20s; animation-delay: -2s; }
.yh-motion .yh-nodes > span:nth-child(5) { animation-duration: 22s; animation-delay: -9s; }

/* ====================================== Efficient-cooling gradient (sustainability) */
/* Cool teal/blue drift paired with the warm brand accent — purely decorative,
   evokes efficient cooling without depicting any real facility. aria-hidden. */
.yh-cool {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(60% 80% at 18% 30%, rgba(45, 160, 180, 0.16), transparent 70%),
        radial-gradient(55% 75% at 85% 75%, rgba(var(--yh-accent-rgb), 0.12), transparent 70%);
}
@keyframes yh-cool-pan {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, -2%, 0) scale(1.05); }
}
.yh-motion .yh-cool { animation: yh-cool-pan 20s ease-in-out infinite alternate; }

/* ============================================================ Hover polish */
/* Cards already lift via app.scss .yh-card:hover; add a soft accent glow. */
.yh-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }

/* Hero primary CTA: a touch more presence than the standard button lift. */
.yh-cta-hero { transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease; }
.yh-cta-hero:hover { transform: translateY(-2px) scale(1.015); }

/* ============================================== Reduced motion — hard stop */
@media (prefers-reduced-motion: reduce) {
    .yh-motion .yh-reveal,
    .yh-motion .yh-reveal.is-visible,
    .yh-motion .yh-stagger > *,
    .yh-motion .yh-stagger.is-visible > *,
    .yh-motion .yh-anim-gradient,
    .yh-motion .yh-nodes > span,
    .yh-motion .yh-cool,
    .yh-cta-hero {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}