/* ────────────────────────────────────────────────────────────────────────────
   8ball Solutions extras — animation primitives and component-level styles that
   replace the framer-motion behaviors used in the Next.js source.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Reveal on scroll-into-view (mirrors framer-motion whileInView) ──────── */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Kinetic word reveal (hero headline mask up) ───────────────────────── */
.kinetic-word {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--kw-delay, 0s);
}
.kinetic-word.is-visible,
body.is-loaded .kinetic-word {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .kinetic-word { transform: none; transition: none; }
}

/* ── Mobile menu open state ─────────────────────────────────────────────── */
#mobile-menu.is-open                            { display: block; }
#mobile-menu.is-open [data-mobile-menu-panel]   { transform: translateX(0); }

/* ── Sticky nav scrolled state ────────────────────────────────────────── */
#site-nav[data-scrolled="true"] {
    background-color: rgba(11, 11, 11, 0.95);
    border-bottom-color: var(--border);
}
@media (min-width: 768px) {
    #site-nav[data-scrolled="true"] {
        background-color: rgba(11, 11, 11, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* ── Contact form: kinetic underline on focus ─────────────────────────── */
.contact-field__underline {
    transform: scaleX(0);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contact-field.is-focused .contact-field__underline {
    transform: scaleX(1);
}

/* ── Section connector traveling dot (vanilla scroll-progress) ────────── */
.section-connector { position: relative; }
.section-connector__dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    transform: translate(-50%, -50%);
    transition: top 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
    .section-connector__dot { display: none; }
}

/* ── Phase flow rail glow already inside main.css; nothing extra here ── */