/* Homepage adaptation of the extension's opening signal. */
.hero-opening { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .hero-opening {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 0.5rem;
        background: var(--m-bg);
        color: var(--m-brand);
        animation: hero-opening-reveal 2.2s ease-out both;
    }

    .hero-opening strong {
        letter-spacing: 0.16em;
        padding-inline-start: 0.16em;
        animation: opening-identity-in 0.5s 0.7s ease-out both;
    }

    @keyframes hero-opening-reveal {
        0%, 76% { opacity: 1; }
        100% { opacity: 0; visibility: hidden; }
    }
    .opening-network{overflow:visible;animation:opening-network-out 1.3s both}
    .opening-network path{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.35;stroke-dasharray:160;stroke-dashoffset:160;animation:opening-network-draw 0.55s 0.08s ease-out both}
    .opening-network circle{fill:currentColor;animation:opening-network-converge 1.2s ease-in-out both}
    .opening-identity{animation:opening-identity-in 0.5s 0.7s ease-out both}
    .opening-wake-top{transform-origin:465px 280px;animation:opening-wake-top 0.65s 1.2s ease-in-out both}
    .opening-wake-left,.opening-wake-right{transform-origin:465px 650px}
    .opening-wake-left{animation:opening-wake-left 0.65s 1.2s ease-in-out both}
    .opening-wake-right{animation:opening-wake-right 0.65s 1.2s ease-in-out both}
    @keyframes opening-network-draw{to{stroke-dashoffset:0}}
    @keyframes opening-network-out{0%,65%{opacity:1}100%{opacity:0}}
    @keyframes opening-network-converge{0%{opacity:0;transform:translate(0,0) scale(.7)}20%,50%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
    @keyframes opening-identity-in{from{opacity:0}to{opacity:1}}
    @keyframes opening-wake-top{0%,100%{transform:rotate(0)}45%{transform:rotate(2deg)}}
    @keyframes opening-wake-left{0%,100%{transform:rotate(0)}45%{transform:rotate(-3deg)}}
    @keyframes opening-wake-right{0%,100%{transform:rotate(0)}45%{transform:rotate(3deg)}}
}