/* ============================================================
   Scroll Animations & Transitions — GrabClip Landing
   ============================================================ */

/* --- Fade Up --- */
[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-up"].visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Fade Down --- */
[data-animate="fade-down"] {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-down"].visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Fade Left --- */
[data-animate="fade-left"] {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-left"].visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- Fade Right --- */
[data-animate="fade-right"] {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-right"].visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- Scale In --- */
[data-animate="scale-in"] {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="scale-in"].visible {
    opacity: 1;
    transform: scale(1);
}

/* --- Blur In --- */
[data-animate="blur-in"] {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="blur-in"].visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* --- Hero sequential line-by-line reveal --- */
@keyframes heroLineIn {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        filter: blur(6px);
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0% 0 0);
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes accentGlow {
    0%   { text-shadow: 0 0 20px rgba(255, 61, 26, 0); }
    100% { text-shadow: 0 0 30px rgba(255, 61, 26, 0.25), 0 0 60px rgba(255, 61, 26, 0.1); }
}

/* Every hero child: hidden by default, revealed one by one */
.hero-logo-mark,
.hero-badge,
.hero-title .title-line,
.hero-subtitle,
.hero-cta,
.hero-gumroad-note,
.hero-stats,
.hero-trust-line,
.hero-preview,
.scroll-indicator {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(6px);
    transform: translateY(10px);
    animation: heroLineIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Line 1 — Logo */
.hero-logo-mark          { animation-delay: 0.1s; }
/* Line 2 — Badge */
.hero-badge              { animation-delay: 0.4s; }
/* Line 3 — Title line 1 */
.hero-title .title-line:nth-child(1) { animation-delay: 0.7s; }
/* Line 4 — Title line 2 (accent) */
.hero-title .title-line:nth-child(2) { animation-delay: 1.1s; }
/* Line 5 — Subtitle */
.hero-subtitle           { animation-delay: 1.5s; }
/* Line 6 — CTA buttons */
.hero-cta                { animation-delay: 1.9s; }
/* Line 7 — Gumroad note */
.hero-gumroad-note       { animation-delay: 2.2s; }
/* Line 8 — Stats */
.hero-stats              { animation-delay: 2.5s; }
/* Line 8b — Trust line */
.hero-trust-line         { animation-delay: 2.7s; }
/* Line 9 — Preview slider */
.hero-preview            { animation-delay: 2.9s; }
/* Line 10 — Scroll indicator */
.scroll-indicator        { animation-delay: 3.3s; }

/* Title lines must be block for separate animation */
.hero-title .title-line {
    display: block;
}

/* Accent glow pulse — loops after reveal finishes */
.hero-title .title-accent {
    animation: heroLineIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards,
               accentGlow 3s ease-in-out 3.5s infinite alternate;
}

/* --- Hero mobile: faster sequence --- */
@media (max-width: 768px) {
    .hero-logo-mark          { animation-delay: 0.05s; }
    .hero-badge              { animation-delay: 0.2s; }
    .hero-title .title-line:nth-child(1) { animation-delay: 0.4s; }
    .hero-title .title-line:nth-child(2) { animation-delay: 0.7s; }
    .hero-subtitle           { animation-delay: 0.9s; }
    .hero-cta                { animation-delay: 1.1s; }
    .hero-gumroad-note       { animation-delay: 1.25s; }
    .hero-stats              { animation-delay: 1.4s; }
    .hero-trust-line         { animation-delay: 1.5s; }
    .hero-preview            { animation-delay: 1.7s; }
    .scroll-indicator        { animation-delay: 2.0s; }

    .hero-title .title-accent {
        animation: heroLineIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards,
                   accentGlow 3s ease-in-out 2.5s infinite alternate;
    }
}

/* --- Stagger delays --- */
[data-delay="50"]  { transition-delay: 50ms !important; }
[data-delay="80"]  { transition-delay: 80ms !important; }
[data-delay="100"] { transition-delay: 100ms !important; }
[data-delay="150"] { transition-delay: 150ms !important; }
[data-delay="160"] { transition-delay: 160ms !important; }
[data-delay="200"] { transition-delay: 200ms !important; }
[data-delay="250"] { transition-delay: 250ms !important; }
[data-delay="300"] { transition-delay: 300ms !important; }
[data-delay="350"] { transition-delay: 350ms !important; }
[data-delay="400"] { transition-delay: 400ms !important; }
[data-delay="500"] { transition-delay: 500ms !important; }
[data-delay="600"] { transition-delay: 600ms !important; }
[data-delay="700"] { transition-delay: 700ms !important; }

/* --- Hover micro-interactions --- */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* --- Smooth link underline --- */
.link-underline {
    position: relative;
    display: inline-block;
}

.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.link-underline:hover::after {
    width: 100%;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}