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

/* ─── 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 spin {
    to { transform: rotate(360deg); }
}