/* =============================================================
   NovAI Animations CSS
   
   - CSS keyframes for all motion
   - Intersection Observer fade-up system
   - Glow pulses, typing cursor, marquee
   - No external animation library required
   ============================================================= */

/* =============================================================
   FADE-UP ON SCROLL SYSTEM
   
   Elements with class .fade-up start invisible and slide up
   when they enter the viewport. The IntersectionObserver in
   main.js adds .is-visible when elements scroll into view.
   ============================================================= */

.fade-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
    will-change: opacity, transform;
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delay variants */
.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }
.fade-up-delay-5 { transition-delay: 0.5s; }

/* Fade-in only (no movement) */
.fade-in {
    opacity: 0;
    transition: opacity 0.7s ease;
}
.fade-in.is-visible { opacity: 1; }

/* Slide in from left */
.slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide in from right */
.slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale up on entry */
.scale-up {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scale-up.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* =============================================================
   CTA BUTTON GLOW PULSE
   ============================================================= */

.btn-glow {
    position: relative;
}

.btn-glow::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--radius-md) + 3px);
    background: var(--gradient-accent);
    z-index: -1;
    opacity: 0;
    filter: blur(8px);
    animation: glowPulse 3s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

.btn-glow:hover::after { opacity: 0.6; }

@keyframes glowPulse {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50%       { opacity: 0.45; transform: scale(1.04); }
}

/* =============================================================
   HERO ORB PULSE
   ============================================================= */

@keyframes orbPulse {
    0%   { transform: translateX(-50%) scale(1) rotate(0deg);   opacity: 0.3; }
    50%  { transform: translateX(-50%) scale(1.1) rotate(3deg); opacity: 0.45; }
    100% { transform: translateX(-50%) scale(0.95) rotate(-2deg); opacity: 0.25; }
}

/* ORB 2 doesn't need translateX */
.hero-orb-2 {
    animation-name: orbPulse2 !important;
}

@keyframes orbPulse2 {
    0%   { transform: scale(1) rotate(0deg);   opacity: 0.2; }
    50%  { transform: scale(1.15) rotate(5deg); opacity: 0.3; }
    100% { transform: scale(0.9) rotate(-3deg); opacity: 0.15; }
}

/* =============================================================
   TYPING CURSOR BLINK
   ============================================================= */

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* =============================================================
   BADGE STATUS DOT BLINK
   ============================================================= */

@keyframes dotBlink {
    0%, 100% { box-shadow: 0 0 8px var(--color-success), 0 0 0 0 rgba(34,197,94,0.4); }
    50%       { box-shadow: 0 0 12px var(--color-success), 0 0 0 6px rgba(34,197,94,0); }
}

/* =============================================================
   SCROLL LINE ANIMATION (hero scroll hint)
   ============================================================= */

@keyframes scrollLineAnim {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
    40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    60%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* =============================================================
   TRUSTED BY MARQUEE SCROLL
   ============================================================= */

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.trusted-marquee:hover { animation-play-state: paused; }

/* =============================================================
   FLOATING BADGE ANIMATION (hero mockup badges)
   ============================================================= */

@keyframes badgeFloat {
    from { transform: translateY(0px); }
    to   { transform: translateY(-8px); }
}

/* =============================================================
   SHIMMER EFFECT (used on loading states)
   ============================================================= */

@keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
}

.shimmer {
    background: linear-gradient(
        90deg,
        var(--color-border) 25%,
        var(--color-surface-2) 50%,
        var(--color-border) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* =============================================================
   CARD HOVER LIFT (applied globally to cards)
   ============================================================= */

.feature-card,
.pricing-card,
.testimonial-card,
.integration-item {
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* =============================================================
   PAGE LOAD ANIMATION — hero content
   ============================================================= */

.hero-inner > * {
    animation: heroFadeIn 0.8s ease both;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-badge             { animation-delay: 0.1s; }
.hero-headline          { animation-delay: 0.25s; }
.hero-sub               { animation-delay: 0.4s; }
.hero-ctas              { animation-delay: 0.55s; }
.hero-micro-proof       { animation-delay: 0.65s; }
.hero-visual            { animation-delay: 0.75s; }

/* =============================================================
   PRICING TOGGLE ANIMATION
   ============================================================= */

/* Animate price number change */
.price-amount {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.price-amount.changing {
    opacity: 0;
    transform: translateY(-4px);
}

/* =============================================================
   NAV SCROLL STATE
   ============================================================= */

.site-header {
    transition:
        background-color 0.3s ease,
        backdrop-filter 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* =============================================================
   MOBILE MENU ANIMATION
   ============================================================= */

.nav-menu-wrap {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

/* Hamburger lines transform to X when open */
.nav-hamburger.is-open .hamburger-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger.is-open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-hamburger.is-open .hamburger-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.hamburger-line {
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease;
}

/* =============================================================
   FAQ ACCORDION ANIMATION
   ============================================================= */

.faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer:not([hidden]) {
    max-height: 400px;
}

/* When using the hidden attribute, JS removes it for animation */
.faq-answer[data-expanded="true"] {
    max-height: 400px;
}

/* =============================================================
   FOCUS RING — accessibility
   ============================================================= */

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Remove focus ring for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}