/*
 * x.ai /bot + home hero opening entrance
 *
 * Signature blur-in (production x.ai JS — HeroTitleReveal / data-safari-no-blur):
 *   enter:   { opacity: 0, y: …, filter: "blur(4px)" }
 *   visible: { opacity: 1, y: 0,  filter: "blur(0px)" }
 *   ease:    cubic-bezier(0.16, 1, 0.3, 1)
 *
 * Element timings (home hero framer-motion, with blur added to match /bot):
 *   Pill:   y 8→0,   duration 0.32s, delay 0.32s  + blur(4px)→0
 *   Title:  each word opacity 0→1, rotateX -40→0, y 45%→0,
 *           duration 0.65s, delay baseDelay(0.1) + 0.055*index
 *           parent perspective: 1200px
 *   Subhead: y 16→0, duration 0.38s, delay 0.58s + blur(4px)→0
 *   CTAs:   parent delayChildren 0.66, staggerChildren 0.07
 *           each: opacity 0→1, y 12→0, duration 0.38s
 *   Cards:  opacity 0→1, blur(4px)→0, duration 1.25s, delay 0.76s
 *
 * Initial hidden state prevents FOUC; JS (hero-entrance.js) runs WAAPI.
 */

.ame-hero-section.xai-hero-pending .xai-enter-pill,
.ame-hero-section.xai-hero-pending .xai-enter-word,
.ame-hero-section.xai-hero-pending .xai-enter-sub,
.ame-hero-section.xai-hero-pending .xai-enter-cta,
.ame-hero-section.xai-hero-pending .xai-enter-card,
.ame-hero-section.xai-hero-pending .xai-enter-bg {
    opacity: 0;
    will-change: opacity, transform, filter;
}

/* Pill / sub / card: start blurred (x.ai blur-in signature) */
.ame-hero-section.xai-hero-pending .xai-enter-pill,
.ame-hero-section.xai-hero-pending .xai-enter-sub,
.ame-hero-section.xai-hero-pending .xai-enter-card {
    filter: blur(4px);
}

.ame-hero-section.xai-hero-pending .xai-enter-pill {
    transform: translateY(8px);
}

.ame-hero-section.xai-hero-pending .xai-enter-sub {
    transform: translateY(16px);
}

/* Grid/shimmer bg: opacity only (no rise / blur) — fades in last */
.ame-hero-section.xai-hero-pending .xai-enter-bg {
    will-change: opacity;
    filter: none;
}

/* After entrance (or if WAAPI is skipped): keep shimmer rails visible */
.ame-hero-section.xai-hero-ready .xai-enter-bg,
.ame-hero-section:not(.xai-hero-pending) .xai-enter-bg {
    opacity: 1;
}

/*
 * Safari: filter:blur on text is a known paint bug (x.ai uses the same guard).
 * hanging-punctuation is Safari-only — disable blur, keep opacity/y motion.
 */
@supports (hanging-punctuation: first) {
    [data-safari-no-blur],
    .ame-hero-section.xai-hero-pending .xai-enter-pill[data-safari-no-blur],
    .ame-hero-section.xai-hero-pending .xai-enter-sub[data-safari-no-blur],
    .ame-hero-section.xai-hero-pending .xai-enter-card[data-safari-no-blur] {
        filter: none !important;
    }
}

/*
 * Video library opening entrance — same ease language as hero.
 * Hidden until hero-entrance.js plays (staggered after headline/stats).
 * !important beats older home-library-reveal “always visible” rules on the title.
 */
#video-library.xai-library-pending .xai-enter-lib {
    opacity: 0 !important;
    transform: translateY(14px);
    will-change: opacity, transform;
}

#video-library.xai-library-pending .xai-enter-lib[data-lib-enter="filter"] {
    transform: translateY(12px);
}

#video-library.xai-library-pending .xai-enter-lib[data-lib-enter="feed"] {
    transform: translateY(18px);
}

/* Title word units — match x.ai HeroTitleRevealUnit */
.ame-hero-copy .ame-hero__title {
    perspective: 1200px;
}

.ame-hero-copy .xai-enter-word {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    transform-origin: center bottom;
    transform-style: preserve-3d;
}

/* Dynamic line keeps inline-flex layout (typewriter + underline) */
.ame-hero-copy .xai-enter-word.ame-hero__dynamic-unit {
    display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
    .ame-hero-section.xai-hero-pending .xai-enter-pill,
    .ame-hero-section.xai-hero-pending .xai-enter-word,
    .ame-hero-section.xai-hero-pending .xai-enter-sub,
    .ame-hero-section.xai-hero-pending .xai-enter-cta,
    .ame-hero-section.xai-hero-pending .xai-enter-card,
    .ame-hero-section.xai-hero-pending .xai-enter-bg {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        will-change: auto;
    }

    #video-library.xai-library-pending .xai-enter-lib {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto;
    }
}