/* Motion (docs/branding.md "Motion"). Loaded on every page after the page styles; js/fx.js adds
   the classes used here. Only transform/translate and opacity move. The site's global
   reduced-motion rule (style.css) stops every animation and transition below, and the hidden
   "before" state of the reveal only exists with motion allowed, so nothing can stay invisible. */

/* --- colours of the landing hero's light motes (js/fx.js), as "r g b" ---
   Normal: violet with some pale veil-white. Night of the Veil (html.season-halloween, set by
   mu.applySeason in js/site.js): ember orange, with the violet kept in a third of the motes. */
:root {
    --fx-mote: 168 150 255;
    --fx-mote-alt: 226 220 255;
}
.season-halloween {
    --fx-mote: 251 146 60;
    --fx-mote-alt: 143 123 255;
}

.hero-motes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.6s ease;
}
.hero-motes.on { opacity: 1; }

/* --- scroll reveal (js/fx.js reveal): fade and rise once --- */
@media (prefers-reduced-motion: no-preference) {
    .fx-reveal {
        opacity: 0;
        translate: 0 14px;
    }
    /* panels blur what is behind them (backdrop-filter): they only fade, moving one would re-blur */
    .panel.fx-reveal { translate: none; }
    .fx-reveal.fx-in {
        opacity: 1;
        translate: none;
        transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
        transition-delay: var(--fx-delay, 0ms);
    }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
    .fx-reveal { translate: 0 10px; }
}
@media print {
    .fx-reveal { opacity: 1 !important; translate: none !important; }
}

/* --- count-up numbers (js/fx.js count): the ticking digits keep the final width --- */
.fx-num {
    display: inline-block;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.fx-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- light sweep across the primary buttons, once per hover or keyboard focus ---
   A narrow skewed band crosses the button; it only moves on the way in, so leaving the button
   doesn't play it backwards. (The hero title's one sweep on load is in css/index.css.) */
.btn-primary,
button[type="submit"] {
    position: relative;
    overflow: hidden;
}
.btn-primary::after,
button[type="submit"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
    transform: translateX(-160%) skewX(-18deg);
}
.btn-primary:not(:disabled):hover::after,
.btn-primary:not(:disabled):focus-visible::after,
button[type="submit"]:not(:disabled):hover::after,
button[type="submit"]:not(:disabled):focus-visible::after {
    transform: translateX(340%) skewX(-18deg);
    transition: transform 0.85s cubic-bezier(0.45, 0, 0.25, 1);
}