/* Home page motion, driven by wwwroot/js/home-effects.js. One showpiece (the hero lattice) plus
   feedback that answers the user (search focus, sticky toolbar). Without JS the page is static. */

/* ---- Aurora (React Bits) seen only through the lattice: light drifts along the star lines ---- */
.role-page .hp-aurora {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    /* Same 96px tile as the SVG pattern, both anchored at the panel's top-left, so the lines line up. */
    -webkit-mask: url("../assets/home/girih-mask.svg") 0 0 / 96px 96px repeat;
    mask: url("../assets/home/girih-mask.svg") 0 0 / 96px 96px repeat;
}
.role-page .hp-aurora.is-ready { opacity: 1; }
.role-page .hp-aurora canvas { display: block; width: 100%; height: 100%; }

/* Lattice draw-in (GSAP sets the dash offset; the class just prepares the dash). */
.role-page .hp-girih.is-drawing .hp-girih-line { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---- Border Beam (Magic UI): a light runs around the search box while it has focus ---- */
@property --hp-beam {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.role-page .hp-search { position: relative; isolation: isolate; }
.role-page .hp-search::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 2;
    padding: 2px;
    border-radius: 14px;
    pointer-events: none;
    background: conic-gradient(from var(--hp-beam), transparent 0deg 250deg, #7fd3e0 300deg, #fff 340deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity .25s ease;
}
.role-page .hp-search:focus-within::before { opacity: 1; animation: hp-beam 3.2s linear infinite; }
@keyframes hp-beam { to { --hp-beam: 360deg; } }

.sr-only-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .role-page .hp-aurora { transition: none; }
    .role-page .hp-search:focus-within::before {
        animation: none;
        background: linear-gradient(90deg, #7fd3e0, #fff);
    }
    .role-page .hp-countdown.is-urgent { animation: none; }
}