/* ==========================================================================
   Ophyn docs - shared visual layer
   Loaded AFTER each page's own <style>, so it refines the base look without
   touching the page markup. Everything here is optional polish: remove the
   <link> and the pages go back to the previous look.
   ========================================================================== */

:root {
    --accent: #4ade80;
    --accent-soft: rgba(74, 222, 128, 0.14);
    --line: #1c1c1f;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Base ---------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    scrollbar-width: thin;
    scrollbar-color: #2a2a31 transparent;
}
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-thumb { background: #26262c; border-radius: 10px; border: 2px solid #0c0c0e; }
html::-webkit-scrollbar-thumb:hover { background: #33333b; }

::selection { background: rgba(74, 222, 128, 0.28); color: #ffffff; }

body { position: relative; -webkit-font-smoothing: antialiased; }

/* soft ambient glow behind the page */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 38% at 50% -8%, rgba(74, 222, 128, 0.085), transparent 70%),
        radial-gradient(40% 30% at 100% 100%, rgba(99, 102, 241, 0.045), transparent 70%);
}

/* ---- Keyboard focus (the base pages removed every outline) --------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    border-radius: 8px;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 3000;
    padding: 8px 14px;
    background: #000;
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 10px;
    font-size: 14px;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---- Floating navbar ------------------------------------------------------ */
.navbar {
    position: sticky;
    top: 12px;
    z-index: 900;
    padding: 10px 16px;
    background: rgba(12, 12, 14, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.navbar.is-stuck {
    border-color: #26262b;
    background: rgba(8, 8, 10, 0.82);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}
.brand .logo-icon-img { transition: transform 0.35s var(--ease-out); }
.brand:hover .logo-icon-img { transform: rotate(-6deg) scale(1.06); }
.menu-panel { right: 0; border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); }
.menu-panel a { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.menu-badge,
.prop-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(74, 222, 128, 0.28);
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---- Reading progress + back to top -------------------------------------- */
.docs-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 3000;
    pointer-events: none;
}
.docs-progress span {
    display: block;
    height: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, #22c55e, #4ade80, #86efac);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
}

.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1500;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 18, 22, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid #26262d;
    border-radius: 50%;
    color: #d1d5db;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: opacity 0.25s ease, transform 0.35s var(--ease-out), visibility 0s linear 0.25s,
                background-color 0.2s, color 0.2s, border-color 0.2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: #1d1d23; color: #fff; border-color: #34343d; }
.to-top svg { width: 18px; height: 18px; }
/* toasts sit to the left of the button instead of under it */
.toast-container { right: 82px; }

/* ---- Page entrance --------------------------------------------------------- */
@keyframes docs-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
.card { animation: docs-rise 0.6s var(--ease-out) both; }
.card > * { animation: docs-rise 0.55s var(--ease-out) both; }
.card > *:nth-child(1) { animation-delay: 0.04s; }
.card > *:nth-child(2) { animation-delay: 0.08s; }
.card > *:nth-child(3) { animation-delay: 0.12s; }
.card > *:nth-child(4) { animation-delay: 0.16s; }
.card > *:nth-child(5) { animation-delay: 0.2s; }
.card > *:nth-child(6) { animation-delay: 0.24s; }
.card > *:nth-child(n+7) { animation-delay: 0.28s; }

.card {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 180px);
}

/* ---- Headings --------------------------------------------------------------- */
.section-header h1 {
    background: linear-gradient(180deg, #ffffff 30%, #bfbfc8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.content-body h2 { position: relative; scroll-margin-top: 96px; }
.h-anchor {
    margin-left: 10px;
    color: #4a4a52;
    text-decoration: none;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}
.content-body h2:hover .h-anchor,
.h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover { color: var(--accent); }
@media (hover: none) { .h-anchor { display: none; } }

/* ---- Code blocks ------------------------------------------------------------- */
/* The base pages set `* { font-family: Plus Jakarta Sans }`, which also hit the coloured tokens
   inside <code> and mixed serif words into monospace code. Tokens inherit again here. */
code, code *, .code-content, .code-content * {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.code-pill-container {
    transition: border-color 0.25s ease, background-color 0.25s ease;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 60px);
}
.code-pill-container:hover { border-color: #2a2a33; }
.copy-circle-btn.is-done { background-color: rgba(74, 222, 128, 0.16); color: var(--accent); }

/* ---- Property list ------------------------------------------------------------ */
.prop-group-label { display: flex; align-items: center; gap: 12px; }
.prop-group-label::after { content: ""; flex: 1; height: 1px; background: #17171b; }

.prop-item { transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--ease-out); }
.prop-item:hover { transform: translateX(2px); }
.prop-item.open { border-color: #2c4a39; background-color: #0c110e; transform: none; }
.prop-item.is-target { animation: docs-flash 1.6s ease 1; }
@keyframes docs-flash {
    0%, 55% { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.45); }
    100% { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0); }
}
.prop-toggle { flex-wrap: wrap; row-gap: 6px; }
.prop-toggle:hover .prop-name { color: #ffffff; }
.prop-item.open .prop-name { color: var(--accent); }
.prop-chevron { margin-left: auto; }

.prop-type[data-kind="method"] { color: #d2a8ff; background: #181226; border-color: #2d2147; }
.prop-type[data-kind="boolean"] { color: #ffa657; background: #24170b; border-color: #44290f; }
.prop-type[data-kind="table"],
.prop-type[data-kind="function"] { color: #7ee787; background: #0e2015; border-color: #1b3b27; }

.prop-example {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: visible;
}
.prop-example code {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.prop-example code::-webkit-scrollbar { display: none; }
.mini-copy {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1f;
    border: 1px solid #26262d;
    border-radius: 8px;
    color: #9a9aa3;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.mini-copy:hover { color: #fff; background: #222229; border-color: #33333c; }
.mini-copy.is-done { color: var(--accent); border-color: rgba(74, 222, 128, 0.35); }
.mini-copy svg { width: 15px; height: 15px; }

/* toolbar: search + expand/collapse */
.props-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.props-search { position: relative; flex: 1 1 220px; min-width: 0; }
.props-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: #6b6b73;
    pointer-events: none;
}
.props-search input {
    width: 100%;
    height: 42px;
    padding: 0 40px 0 40px;
    background: #0b0b0e;
    border: 1px solid #1c1c22;
    border-radius: 12px;
    color: #ffffff;
    font-size: 14px;
    transition: border-color 0.2s, background-color 0.2s;
}
.props-search input::placeholder { color: #5d5d66; }
.props-search input:hover { border-color: #2a2a34; }
.props-search input:focus { border-color: #2c4a39; background: #0c110e; }
.props-search kbd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #6b6b73;
    border: 1px solid #25252c;
    border-radius: 6px;
    padding: 1px 6px;
    pointer-events: none;
}
.props-search input:focus ~ kbd, .props-search input:not(:placeholder-shown) ~ kbd { opacity: 0; }
.props-btn {
    height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0b0b0e;
    border: 1px solid #1c1c22;
    border-radius: 12px;
    color: #c4c4cc;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.props-btn:hover { color: #fff; background: #101014; border-color: #2a2a34; }
.props-btn svg { width: 16px; height: 16px; }
.props-empty {
    padding: 26px 20px;
    text-align: center;
    color: #71717a;
    font-size: 15px;
    border: 1px dashed #24242b;
    border-radius: 14px;
}

/* ---- Footer navigation cards ---------------------------------------------------- */
.nav-card { transition: background-color 0.2s, transform 0.25s var(--ease-out), border-color 0.2s; }
.nav-card:hover { border-color: #26262d; }
.nav-card-icon { transition: transform 0.25s var(--ease-out); }
.nav-card.next:hover .nav-card-icon { transform: translateX(4px); }
.nav-card.prev:hover .nav-card-icon { transform: translateX(-4px); }

/* ---- Notes ---- */
.docs-note {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #0b0f14;
    border: 1px solid #172433;
    border-radius: 14px;
    color: #9bb4cf;
    font-size: 14px;
    line-height: 1.55;
}
.docs-note svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: #60a5fa; }
.docs-note a { color: #bcd7f5; }
.docs-note code, .content-body code.inline, .prop-desc code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88em;
    color: #d4d4d8;
    background: #16161b;
    border: 1px solid #23232b;
    padding: 1px 6px;
    border-radius: 6px;
}

/* ---- Small screens ------------------------------------------------------------------ */
@media (max-width: 768px) {
    html { scroll-padding-top: 78px; }
    .navbar { top: 8px; padding: 8px 12px; border-radius: 14px; }
    .to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
    .toast-container { right: 16px; left: 16px; bottom: 68px; }
    .props-btn span { display: none; }
    .props-btn { padding: 0 13px; }
    .prop-item:hover { transform: none; }
    .props-search kbd { display: none; }
}

/* ---- Reduced motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
    }
}

/* the `hidden` attribute must win over the display values set above */
[hidden] { display: none !important; }

/* body text used on the Tabs page */
.docs-text { font-size: 16px; color: #a1a1aa; line-height: 1.65; }
.docs-text a { color: var(--accent); text-decoration: none; font-weight: 600; }
.docs-text a:hover { text-decoration: underline; }
@media (max-width: 768px) { .docs-text { font-size: 14px; } }

/* ==========================================================================
   v2 interface: new typeface, header buttons, menu, changelog
   ========================================================================== */
:root { --surface: #060608; --surface-2: #0d0d10; --line-2: #232329; }

body { background-color: #09090b; letter-spacing: -0.005em; }

.card {
    background: linear-gradient(180deg, #08080a 0%, #000000 220px);
    border-color: #1f1f24;
    border-radius: 26px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 30px 80px rgba(0, 0, 0, 0.45);
}
.section-header h1 { font-weight: 800; letter-spacing: -0.035em; }
.section-header p { font-weight: 500; }
.content-body h2 { font-weight: 700; letter-spacing: -0.02em; }
.logo-text { font-weight: 800; letter-spacing: -0.03em; }
.divider { background: linear-gradient(90deg, transparent, #26262c 20%, #26262c 80%, transparent); }
.code-pill-container, .code-tabs { border-radius: 20px; }
.code-tab { font-weight: 600; letter-spacing: -0.01em; }
.nav-card { border-radius: 18px; }

/* ---- Header buttons (bell + menu share the same square) ------------------- */
.nav-actions { gap: 10px; }
.icon-btn,
.menu-btn {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    color: #a1a1aa;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
}
.icon-btn:hover,
.menu-btn:hover,
.menu-btn[aria-expanded="true"],
.icon-btn[aria-expanded="true"] {
    color: #ffffff;
    background: #141418;
    border-color: #34343c;
}
.icon-btn:active,
.menu-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover svg { animation: bell-ring 0.7s ease 1; transform-origin: 50% 0; }
@keyframes bell-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(14deg); }
    40% { transform: rotate(-11deg); }
    60% { transform: rotate(7deg); }
    80% { transform: rotate(-4deg); }
}
.icon-btn .dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--surface-2), 0 0 10px rgba(74, 222, 128, 0.7);
}
.icon-btn .dot[hidden] { display: none; }

/* hamburger: the two icons cross-fade and turn instead of popping */
.menu-btn svg {
    position: absolute;
    inset: 0;
    margin: auto;
    display: block !important;
    transition: opacity 0.22s ease, transform 0.35s var(--ease-out);
}
.menu-btn .icon-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.menu-btn[aria-expanded="true"] .icon-menu { opacity: 0; transform: rotate(90deg) scale(0.6); }
.menu-btn[aria-expanded="true"] .icon-close { opacity: 1; transform: none; }

/* ---- Menu panel ---------------------------------------------------------------- */
.menu-panel {
    width: min(272px, calc(100vw - 32px));
    padding: 8px;
    gap: 3px;
    border-color: var(--line-2);
    border-radius: 18px;
    background: rgba(5, 5, 7, 0.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transform-origin: top right;
    transform: translateY(-8px) scale(0.97);
}
.menu-panel.open { transform: none; }
.menu-panel > * {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
}
.menu-panel.open > * { opacity: 1; transform: none; }
.menu-panel.open > *:nth-child(2) { transition-delay: 0.03s; }
.menu-panel.open > *:nth-child(3) { transition-delay: 0.05s; }
.menu-panel.open > *:nth-child(4) { transition-delay: 0.07s; }
.menu-panel.open > *:nth-child(5) { transition-delay: 0.09s; }
.menu-panel.open > *:nth-child(6) { transition-delay: 0.11s; }
.menu-panel.open > *:nth-child(7) { transition-delay: 0.13s; }
.menu-panel.open > *:nth-child(8) { transition-delay: 0.15s; }
.menu-panel a { padding: 11px 14px; border-radius: 11px; font-weight: 600; letter-spacing: -0.01em; }
.menu-panel a[aria-current="page"] { background: #15151a; box-shadow: inset 2px 0 0 var(--accent); }

.menu-github {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    margin-bottom: 4px;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: 13px !important;
}
.menu-github:hover { border-color: #3a3a43; background: #141418 !important; }
.menu-github .gh-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #ffffff;
    color: #0a0a0c;
}
.menu-github .gh-icon svg { width: 20px; height: 20px; }
.menu-github .gh-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.menu-github .gh-text b { font-size: 14px; font-weight: 700; color: #fff; }
.menu-github .gh-text small { font-size: 12px; font-weight: 500; color: #8a8a93; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-github .gh-arrow { margin-left: auto; width: 16px; height: 16px; color: #6b6b73; transition: transform 0.2s var(--ease-out), color 0.2s; }
.menu-github:hover .gh-arrow { transform: translate(2px, -2px); color: #fff; }
.menu-sep { height: 1px; margin: 4px 6px 6px; background: #17171b; }

/* ---- Changelog ------------------------------------------------------------------- */
.cl-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.cl-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; }
.cl-panel {
    width: min(460px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #060608;
    border-left: 1px solid var(--line-2);
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55);
    transform: translateX(36px);
    transition: transform 0.45s var(--ease-out);
}
.cl-overlay.open .cl-panel { transform: none; }
.cl-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid #141417;
}
.cl-head .cl-badge {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--accent-soft);
    border: 1px solid rgba(74, 222, 128, 0.28);
    color: var(--accent);
}
.cl-head .cl-badge svg { width: 19px; height: 19px; }
.cl-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.cl-head p { font-size: 13px; color: #8a8a93; margin-top: 1px; }
.cl-close { margin-left: auto; }
.cl-body { flex: 1; overflow-y: auto; padding: 22px 22px 40px; scrollbar-width: thin; scrollbar-color: #2a2a31 transparent; }
.cl-release { position: relative; padding-left: 22px; padding-bottom: 28px; }
.cl-release::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: -4px; width: 1px; background: #1c1c21; }
.cl-release:last-child::before { display: none; }
.cl-release::after {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3f3f46;
    box-shadow: 0 0 0 3px #060608;
}
.cl-release.is-latest::after { background: var(--accent); box-shadow: 0 0 0 3px #060608, 0 0 12px rgba(74, 222, 128, 0.7); }
.cl-release h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 12px; }
.cl-release ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cl-release li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: #a1a1aa; }
.cl-release li code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #d4d4d8; background: #121215; border: 1px solid #1f1f25; padding: 1px 6px; border-radius: 6px; }
.cl-tag {
    flex-shrink: 0;
    margin-top: 2px;
    min-width: 62px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid;
}
.cl-tag.new { color: #4ade80; background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.3); }
.cl-tag.improved { color: #60a5fa; background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.3); }
.cl-tag.removed { color: #f87171; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); }
body.cl-lock { overflow: hidden; }

@media (max-width: 768px) {
    .navbar { padding: 8px 10px; }
    .icon-btn, .menu-btn { width: 38px; height: 38px; }
    .cl-head { padding: 16px; }
    .cl-body { padding: 18px 16px 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .menu-panel, .menu-panel > *, .cl-panel, .cl-overlay { transition: none !important; }
    .icon-btn:hover svg { animation: none; }
}