/*
 * Shared styles for Dioad holding and error pages.
 * Self-contained: no external requests. Referenced root-absolute (/holding.css, /fonts/...)
 * because error documents are served at whatever URL was requested, however deep.
 * Palette and rules follow https://assets.dioadconsulting.com/ (style guide).
 */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600.woff2") format("woff2"); }

:root {
    color-scheme: dark;
    --bg: #232323;
    --text: #ffffff;
    --muted: #cccccc;
    --accent: #ffac00;
    --on-accent: #232323;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--on-accent); }

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

h1, p { margin: 0; text-wrap: balance; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Logo (inline SVG; fills come from these classes) ---------- */
.logo { width: min(32rem, 100%); }
.logo svg { display: block; width: 100%; height: auto; }
.logo-lab { width: min(22rem, 80%); }
.logo-mark-background { fill: #ffac00; }
.logo-mark-fill { fill: #ffffff; }
.logo-word-dioad { fill: #ffffff; }
.logo-word-consulting { fill: #cccccc; }

/* ---------- Holding copy ---------- */
.tagline { font-size: clamp(1.125rem, 0.9rem + 1vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; }
.contact { color: var(--muted); }

.site-footer { padding: 1.5rem; text-align: center; font-size: 0.8125rem; color: var(--muted); }
.site-footer p { margin: 0 auto; max-width: 64ch; }

/* ---------- Error pages ---------- */
.error-mark { width: 3.5rem; height: 3.5rem; }
.error-mark svg { display: block; width: 100%; height: 100%; }
.error-code { font-size: clamp(5rem, 3rem + 14vw, 11rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; color: var(--accent); }
.error-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.error-message { color: var(--muted); max-width: 36rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.75rem; padding: 0.55rem 1.5rem;
    border-radius: 999px; background: var(--accent); color: var(--on-accent);
    font: inherit; font-weight: 600; text-decoration: none;
    transition: transform 150ms var(--ease-out), filter 150ms var(--ease-out);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* ---------- Entrance: staggered, transform and opacity only ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
main > * { animation: rise 600ms var(--ease-out) both; }
main > :nth-child(2) { animation-delay: 80ms; }
main > :nth-child(3) { animation-delay: 160ms; }
main > :nth-child(4) { animation-delay: 240ms; }
main > :nth-child(5) { animation-delay: 320ms; }
main > :nth-child(6) { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    main > * { animation: none; }
    .btn { transition: none; }
    .btn:hover { transform: none; }
}