/* =====================================================================
   6ixtony Digital — animations.css
   Reveal gating, 3D depth, keyframes, reduced-motion
   ===================================================================== */

/* --- Pre-hide reveal targets ONLY when JS is active AND motion is allowed.
       Prevents flash before GSAP runs; never hides for reduced-motion users
       or when JS is unavailable. --- */
@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] { opacity: 0; }
    .js [data-stagger] > * { opacity: 0; }
    .js .hero-title { opacity: 0; }
    .js [data-hero] .hero-sub,
    .js [data-hero] .hero-btns,
    .js [data-hero] .chips,
    .js [data-hero] .eyebrow { opacity: 0; }
}

/* If GSAP fails to load, reveal everything (graceful degradation) */
.no-anim [data-reveal],
.no-anim [data-stagger] > *,
.no-anim .hero-title,
.no-anim [data-hero] * { opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* --- Hero headline: word-mask rise --- */
.hero-title .word-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.hero-title .word { display: inline-block; will-change: transform; }

/* --- 3D depth for tilt cards (service flip cards use their own perspective) --- */
.grid:not(.services-grid), .featured-project { perspective: 1500px; }
.tilt.is-tilting .tilt-layer { transform: translateZ(38px); }
.tilt.is-tilting .svc-icon.tilt-layer { transform: translateZ(60px); }
.tilt.is-tilting h3.tilt-layer,
.tilt.is-tilting h4.tilt-layer { transform: translateZ(30px); }

/* --- Ambient slow drift --- */
@keyframes floatA { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, -40px) scale(1.12); } }
@keyframes floatB { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-50px, 50px) scale(1.1); } }
.ambient-blob-1 { animation: floatA 26s ease-in-out infinite alternate; }
.ambient-blob-2 { animation: floatB 32s ease-in-out infinite alternate; }
.ambient-blob-3 { animation: floatA 38s -10s ease-in-out infinite alternate; }

/* --- About AI avatar --- */
.avatar { animation: avatarFloat 6s ease-in-out infinite; }
.avatar .scanline { animation: avatarScan 3.6s ease-in-out infinite; }
@keyframes avatarFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes avatarScan {
    0% { transform: translateY(14px); opacity: 0; }
    12% { opacity: 0.75; }
    50% { transform: translateY(150px); opacity: 0.75; }
    88% { opacity: 0.7; }
    100% { transform: translateY(226px); opacity: 0; }
}

/* --- Reduced motion: stop all motion, keep everything visible --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .ambient-blob { animation: none !important; }
    .hero-img-blur { filter: blur(26px) brightness(0.7); }
}

/* --- Touch / no fine pointer: no tilt depth, keep layout clean --- */
@media (hover: none), (pointer: coarse) {
    .card-shine { display: none; }
    .tilt, .tilt-layer { transform: none !important; }
}