/* ============================================================
   custom.css
   Holds reveal animations, focus polish, and print styles.
   Keep this file small. Theme colors live in index.html :root vars.
   ============================================================ */

/* ---------- Reveal-on-scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.125s ease, transform 1.125s ease;
    will-change: opacity, transform;
}

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

/*
 * SITE-WIDE REVEAL — controlled by SITE_WIDE_REVEAL in main.js.
 * Soft page entrance, then each section fades in on scroll.
 * Set SITE_WIDE_REVEAL = false in main.js to disable (no CSS change needed).
 */
html.reveal-pending:not(.page-ready) main,
html.reveal-pending:not(.page-ready) body > footer {
    opacity: 0;
}

html.reveal-pending.page-ready main,
html.reveal-pending.page-ready body > footer {
    opacity: 1;
    transition: opacity 0.75s ease;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html.reveal-pending main,
    html.reveal-pending body > footer {
        opacity: 1 !important;
        transition: none !important;
    }
}

/* ---------- Focus polish (accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand-primary, #1c1917);
    outline-offset: 2px;
}

/* ---------- Form status states ---------- */
#formStatus {
    padding: 0.75rem 1rem;
    border: 1px solid var(--brand-border, #e7e5e4);
    margin-top: 0.5rem;
}
#formStatus.is-success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
#formStatus.is-error   { color: #991b1b; background: #fef2f2; border-color: #fecaca; }

/* ---------- Print (clients sometimes print the menu) ---------- */
@media print {
    header,
    #contact,
    #gallery,
    footer,
    .reveal { opacity: 1 !important; transform: none !important; }

    body { background: #fff; color: #000; }
    a[href]::after { content: ""; }
    section { page-break-inside: avoid; }
}