/* ArkifiBusiness — scroll reveals, 3D-style depth, stagger. Respects prefers-reduced-motion. */

@media (prefers-reduced-motion: reduce) {
    .lp-observe,
    .lp-observe-feature-grid .lp-feature-cols > [class*="col-"],
    .lp-observe-steps-grid .lp-step-cols > [class*="col-"],
    .lp-observe-pr-grid .lp-pr-cols > [class*="col-"],
    .lp-observe-fe-categories .container > .fe-category,
    .lp-depth-orb,
    [data-lp-tilt] {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ---- Scroll reveal (3D “rise into frame”) ---- */
.lp-observe {
    opacity: 0;
    transform: translate3d(0, 48px, -100px) rotateX(8deg);
    transform-origin: 50% 80%;
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.lp-observe.lp-observe--in {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
    will-change: auto;
}

.lp-observe--soft {
    transform: translate3d(0, 28px, -40px) rotateX(4deg);
}

/* Staggered columns when section is in */
@keyframes lpStaggerRise {
    from {
        opacity: 0;
        transform: translate3d(0, 36px, -60px) rotateX(6deg) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    }
}

.lp-observe-feature-grid.lp-observe--in .lp-feature-cols > [class*="col-"],
.lp-observe-steps-grid.lp-observe--in .lp-step-cols > [class*="col-"],
.lp-observe-pr-grid.lp-observe--in .lp-pr-cols > [class*="col-"] {
    opacity: 0;
    animation: lpStaggerRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lp-observe-feature-grid.lp-observe--in .lp-feature-cols > [class*="col-"]:nth-child(1) { animation-delay: 0.04s; }
.lp-observe-feature-grid.lp-observe--in .lp-feature-cols > [class*="col-"]:nth-child(2) { animation-delay: 0.1s; }
.lp-observe-feature-grid.lp-observe--in .lp-feature-cols > [class*="col-"]:nth-child(3) { animation-delay: 0.16s; }
.lp-observe-feature-grid.lp-observe--in .lp-feature-cols > [class*="col-"]:nth-child(4) { animation-delay: 0.22s; }
.lp-observe-feature-grid.lp-observe--in .lp-feature-cols > [class*="col-"]:nth-child(5) { animation-delay: 0.28s; }
.lp-observe-feature-grid.lp-observe--in .lp-feature-cols > [class*="col-"]:nth-child(6) { animation-delay: 0.34s; }
.lp-observe-feature-grid.lp-observe--in .lp-feature-cols > [class*="col-"]:nth-child(7) { animation-delay: 0.4s; }
.lp-observe-feature-grid.lp-observe--in .lp-feature-cols > [class*="col-"]:nth-child(8) { animation-delay: 0.46s; }
.lp-observe-feature-grid.lp-observe--in .lp-feature-cols > [class*="col-"]:nth-child(9) { animation-delay: 0.52s; }

.lp-observe-steps-grid.lp-observe--in .lp-step-cols > [class*="col-"]:nth-child(1) { animation-delay: 0.06s; }
.lp-observe-steps-grid.lp-observe--in .lp-step-cols > [class*="col-"]:nth-child(2) { animation-delay: 0.14s; }
.lp-observe-steps-grid.lp-observe--in .lp-step-cols > [class*="col-"]:nth-child(3) { animation-delay: 0.22s; }

.lp-observe-pr-grid.lp-observe--in .lp-pr-cols > [class*="col-"]:nth-child(1) { animation-delay: 0.05s; }
.lp-observe-pr-grid.lp-observe--in .lp-pr-cols > [class*="col-"]:nth-child(2) { animation-delay: 0.1s; }
.lp-observe-pr-grid.lp-observe--in .lp-pr-cols > [class*="col-"]:nth-child(3) { animation-delay: 0.15s; }
.lp-observe-pr-grid.lp-observe--in .lp-pr-cols > [class*="col-"]:nth-child(4) { animation-delay: 0.2s; }
.lp-observe-pr-grid.lp-observe--in .lp-pr-cols > [class*="col-"]:nth-child(5) { animation-delay: 0.25s; }
.lp-observe-pr-grid.lp-observe--in .lp-pr-cols > [class*="col-"]:nth-child(6) { animation-delay: 0.3s; }

/* Feature page: category blocks stagger */
.lp-observe-fe-categories.lp-observe--in .container > .fe-category {
    opacity: 0;
    animation: lpStaggerRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lp-observe-fe-categories.lp-observe--in .container > .fe-category:nth-child(1) { animation-delay: 0.04s; }
.lp-observe-fe-categories.lp-observe--in .container > .fe-category:nth-child(2) { animation-delay: 0.1s; }
.lp-observe-fe-categories.lp-observe--in .container > .fe-category:nth-child(3) { animation-delay: 0.16s; }
.lp-observe-fe-categories.lp-observe--in .container > .fe-category:nth-child(4) { animation-delay: 0.22s; }
.lp-observe-fe-categories.lp-observe--in .container > .fe-category:nth-child(5) { animation-delay: 0.28s; }
.lp-observe-fe-categories.lp-observe--in .container > .fe-category:nth-child(6) { animation-delay: 0.34s; }
.lp-observe-fe-categories.lp-observe--in .container > .fe-category:nth-child(7) { animation-delay: 0.4s; }
.lp-observe-fe-categories.lp-observe--in .container > .fe-category:nth-child(8) { animation-delay: 0.46s; }

/* ---- Ambient depth orbs (hero) ---- */
.lp-motion-hero {
    position: relative;
    overflow: hidden;
}

.lp-depth-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    opacity: 0.32;
    pointer-events: none;
    z-index: 0;
    animation: lpOrbDrift 16s ease-in-out infinite;
}

.lp-depth-orb--a {
    width: min(320px, 55vw);
    height: min(320px, 55vw);
    background: radial-gradient(circle, rgba(255, 222, 89, 0.55) 0%, transparent 70%);
    top: -5%;
    left: -8%;
}

.lp-depth-orb--b {
    width: min(260px, 45vw);
    height: min(260px, 45vw);
    background: radial-gradient(circle, rgba(122, 59, 168, 0.45) 0%, transparent 70%);
    bottom: 0;
    right: -6%;
    animation-delay: -8s;
}

@keyframes lpOrbDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(18px, -22px) scale(1.06); }
    66% { transform: translate(-14px, 12px) scale(0.98); }
}

/* Hero mock float polish */
.lp-hero .lp-mock-float {
    animation: lpMockFloat 5s ease-in-out infinite;
}

.lp-hero .lp-mock-float.lp-mock-bills {
    animation-delay: -2.2s;
}

@keyframes lpMockFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---- 3D tilt target (mouse; applied via inline style from JS) ---- */
[data-lp-tilt] {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
}

[data-lp-tilt].lp-tilt-ready {
    will-change: transform;
}

/* Cards: subtle hover depth when revealed */
.lp-observe--in .feature-card,
.lp-observe--in .ca-card,
.lp-observe--in .fe-item {
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.lp-observe--in .feature-card:hover,
.lp-observe--in .ca-card:hover {
    transform: translateY(-4px) translateZ(0);
}