/* INKABIT — Premium motion layer (iOS-safe) */

html.inkabit-motion {
    scroll-behavior: auto;
}

html.inkabit-motion.motion-reduce,
html.inkabit-motion.motion-fallback,
html.inkabit-motion.is-ios {
    scroll-behavior: auto;
}

/* Lenis (desktop only) */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
    overflow: clip;
}

/* FOUC guard — only before motion boots; never leave content invisible after */
html.inkabit-motion:not(.motion-ready):not(.motion-reduce) .hp-hero .hp-badge,
html.inkabit-motion:not(.motion-ready):not(.motion-reduce) .hp-hero__line,
html.inkabit-motion:not(.motion-ready):not(.motion-reduce) .hp-hero__actions,
html.inkabit-motion:not(.motion-ready):not(.motion-reduce) .hp-dash-preview {
    opacity: 0;
}

html.inkabit-motion:not(.motion-reduce) .reveal {
    transition: none;
}

/* After ready: never force-hide. GSAP owns temporary opacity via inline styles. */
html.inkabit-motion.motion-ready .reveal,
html.inkabit-motion.motion-fallback .reveal,
html.inkabit-motion.motion-reduce .reveal {
    opacity: 1;
    transform: none;
    visibility: visible;
}

html.inkabit-motion.motion-ready .hp-hero .hp-badge,
html.inkabit-motion.motion-ready .hp-hero__line,
html.inkabit-motion.motion-ready .hp-hero__actions,
html.inkabit-motion.motion-ready .hp-dash-preview {
    /* Inline GSAP styles still win during the intro tween */
    visibility: visible;
}

/* iOS: disable FOUC hide entirely — safer than opaque intro */
html.inkabit-motion.is-ios:not(.motion-ready) .hp-hero .hp-badge,
html.inkabit-motion.is-ios:not(.motion-ready) .hp-hero__line,
html.inkabit-motion.is-ios:not(.motion-ready) .hp-hero__actions,
html.inkabit-motion.is-ios:not(.motion-ready) .hp-dash-preview,
html.inkabit-motion.is-ios:not(.motion-ready) .reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Gradient emphasis — keep fill transparent only when clip is supported */
body.home-premium .hp-hero__line--focus {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Timeline connector */
.hp-success__timeline {
    position: relative;
}

.hp-success__motion-line {
    position: absolute;
    left: 50%;
    top: 8%;
    bottom: 8%;
    width: 1px;
    margin-left: -0.5px;
    background: linear-gradient(
        180deg,
        rgba(66, 245, 200, 0) 0%,
        rgba(66, 245, 200, 0.35) 20%,
        rgba(29, 209, 255, 0.35) 80%,
        rgba(29, 209, 255, 0) 100%
    );
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top center;
}

@media (max-width: 900px) {
    .hp-success__motion-line {
        display: none;
    }
}

html.inkabit-motion:not(.motion-reduce) .hp-modal__panel {
    animation: none;
}

html.inkabit-motion:not(.motion-reduce) .btn {
    transition:
        background 0.25s var(--ease),
        border-color 0.25s var(--ease),
        color 0.25s var(--ease),
        box-shadow 0.25s var(--ease);
}

html.inkabit-motion:not(.motion-reduce) .hp-ta-card__media,
html.inkabit-motion:not(.motion-reduce) .post-card__media {
    overflow: hidden;
}

html.inkabit-motion .site-header {
    transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

html.inkabit-motion .site-header.is-scrolled {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
}

html.inkabit-motion:not(.motion-reduce) .hp-service-card {
    transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

html.inkabit-motion:not(.motion-reduce) .hp-service-card:hover {
    border-color: rgba(66, 245, 200, 0.35);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(66, 245, 200, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    html.inkabit-motion .reveal,
    html.inkabit-motion .hp-hero .hp-badge,
    html.inkabit-motion .hp-hero__line,
    html.inkabit-motion .hp-hero__actions,
    html.inkabit-motion .hp-dash-preview {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}