/*
 * Shared ground rules for every variant.
 * House rules: nothing below 12px, no uppercase transforms, motion that
 * steps aside for prefers-reduced-motion.
 */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
small { font-size: max(12px, 0.8em); }

/* Guard against anything sneaking in as all caps. */
* { text-transform: none !important; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.skip-link {
    position: fixed;
    left: 16px;
    top: -60px;
    z-index: 1000;
    padding: 10px 16px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font: 600 14px/1 system-ui, sans-serif;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Reveal on scroll ---------------------------------------------------- */

.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s;
    transition-delay: calc(var(--delay, 0) * 1ms + var(--i, 0) * 70ms);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="left"] { transform: translate3d(-40px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(40px, 0, 0); }
.js [data-reveal="blur"] { filter: blur(12px); transform: translate3d(0, 16px, 0); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Sideways entrances would widen a phone's layout viewport before they land. */
@media (max-width: 760px) {
    .js [data-reveal="left"], .js [data-reveal="right"] { transform: translate3d(0, 28px, 0); }
}

[data-parallax] { will-change: transform; }

/* Variant switcher (only while the designs are being compared) -------- */

.variant-switcher {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 900;
    display: flex;
    gap: 2px;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    padding: 5px;
    border-radius: 999px;
    background: rgba(18, 18, 22, 0.82);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 12px 30px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
    font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    scrollbar-width: none;
}
.variant-switcher a {
    flex: none;
    padding: 9px 14px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.variant-switcher a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.variant-switcher a.is-current { color: #111; background: #fff; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .js [data-reveal] { opacity: 1; transform: none; filter: none; }
}