/* ─── Default reveal state (no JS active) ────────────────────── */
.js-reveal {
    opacity: 1;
}

/* ─── Ambient background layer ───────────────────────────────── */
.page-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ambient-orb,
.ambient-grid {
    position: absolute;
}

.ambient-orb {
    width: 32rem;
    height: 32rem;
    border-radius: 50%;
    filter: blur(42px);
    opacity: 0.24;
    animation: ambientFloat 16s ease-in-out infinite;
}

.ambient-orb-a {
    top: -9rem;
    left: -7rem;
    background: radial-gradient(circle, rgba(78, 164, 255, 0.48) 0%, rgba(78, 164, 255, 0.1) 42%, transparent 70%);
}

.ambient-orb-b {
    right: -9rem;
    bottom: -10rem;
    background: radial-gradient(circle, rgba(59, 232, 255, 0.36) 0%, rgba(59, 232, 255, 0.08) 44%, transparent 72%);
    animation-delay: -6s;
}

.ambient-grid {
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 86px 86px;
    mask-image: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.9), transparent 82%);
    opacity: 0.25;
    transform: translateY(calc(var(--scroll-shift, 0px) * 0.35));
}

/* ─── Hero entrance animation ────────────────────────────────── */
.hero-content > * {
    transition: transform 0.55s ease, opacity 0.55s ease;
}

body.js-ready .hero-content > * {
    opacity: 0;
    transform: translateY(18px);
}

body.page-loaded .hero-content > * {
    opacity: 1;
    transform: translateY(0);
}

body.page-loaded .hero-content > *:nth-child(2) { transition-delay: 0.08s; }
body.page-loaded .hero-content > *:nth-child(3) { transition-delay: 0.16s; }
body.page-loaded .hero-content > *:nth-child(4) { transition-delay: 0.24s; }
body.page-loaded .hero-content > *:nth-child(5) { transition-delay: 0.32s; }

/* ─── Scroll reveal states ───────────────────────────────────── */
body.js-ready .js-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

body.js-ready .js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.js-ready .timeline-item.js-reveal {
    transform: translateX(18px);
}

body.js-ready .timeline-item.js-reveal.is-visible {
    transform: translateX(0);
}

/* ─── Contact form loading state ─────────────────────────────── */
.page-contact .contact-form-panel button.is-loading {
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 26px rgba(59, 232, 255, 0.26);
}

.page-contact .contact-form-panel button.is-loading::after {
    content: "";
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 0.55rem;
    border: 2px solid rgba(2, 16, 30, 0.26);
    border-top-color: #02101f;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* ─── Keyframes ──────────────────────────────────────────────── */
@keyframes ambientFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, 18px, 0) scale(1.08); }
}

@keyframes pulseTrack {
    0%, 100% { opacity: 0.35; transform: scaleX(0.92); }
    50% { opacity: 1; transform: scaleX(1); }
}

@keyframes flowMarker {
    0% { left: 10%; opacity: 0.3; }
    50% { left: 72%; opacity: 1; }
    100% { left: 10%; opacity: 0.3; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}