/* Global layer over MudBlazor: design tokens, the MudBlazor overrides every page shares and the shared motion pieces.
   Colours mirror Config/Theme.cs: graphite neutrals, the logo's violet as the only brand colour, teal for data and
   "live", amber only for warnings. Feature sheets read these tokens instead of writing colours, radii, shadows or
   curves of their own. Shapes are angular but quiet: small radii, and one cut corner (.pn-cut) only on the pieces
   that stand out (a hero, a level card, a call to action). */

/* ---------- Tokens ---------- */

:root {
    /* Brand: --pn-brand fills (buttons), --pn-brand-text is the readable violet for text on the page, and
       --pn-brand-on-dark is the violet for text on the top bar and the dark heroes, which are dark in both modes. */
    --pn-brand: #6646f0;
    --pn-brand-rgb: 102, 70, 240;
    --pn-brand-text: #5a3ae6;
    --pn-brand-soft: rgba(102, 70, 240, .10);
    --pn-brand-on-dark: #a897ff;
    --pn-data: #0d7f72;

    /* The surfaces that stay dark in both modes (top bar, home hero and its live band): Graphite Ink under them,
       Text On Dark on them, and the night teal for data and "live" there. */
    --pn-ink: #0b0b10;
    --pn-ink-rgb: 11, 11, 16;
    --pn-on-dark: #ededf2;
    /* What sits on those dark surfaces: softer text (still over 10:1 on the bar), the wash behind a control, the wash
       of a hovered or current one, its hairline and a stronger one on hover; the scrim keeps the bar readable while
       it floats over the home hero. */
    --pn-on-dark-soft: rgba(255, 255, 255, .84);
    --pn-on-dark-wash: rgba(255, 255, 255, .08);
    --pn-on-dark-hover: rgba(255, 255, 255, .13);
    --pn-on-dark-line: rgba(255, 255, 255, .18);
    --pn-on-dark-line-strong: rgba(255, 255, 255, .36);
    --pn-scrim: rgba(8, 10, 16, .62);
    --pn-data-on-dark: #2dd4bf;
    --pn-brand-night: #8b72ff;
    --pn-brand-night-rgb: 139, 114, 255;

    /* Lines and shadows (cards are flat with a border; only floating things cast a shadow) */
    --pn-line: #e2e2ea;
    --pn-line-strong: #cbcbd6;
    --pn-shadow-raised: 0 1px 2px rgba(11, 11, 16, .06), 0 2px 6px rgba(11, 11, 16, .06);
    --pn-shadow-float: 0 4px 12px rgba(11, 11, 16, .10), 0 12px 32px rgba(11, 11, 16, .12);
    --pn-shadow-modal: 0 8px 24px rgba(11, 11, 16, .14), 0 24px 64px rgba(11, 11, 16, .20);

    /* Radii: 4 small pieces, 6 controls, 8 cards, 999 pills; --pn-cut is the size of the cut corner */
    --pn-radius-sm: 4px;
    --pn-radius-md: 6px;
    --pn-radius: 8px;
    --pn-radius-pill: 999px;
    --pn-cut: 16px;

    /* Glow: only for key moments (live, level or rank up, an achievement, the donate call to action); the staff
       tools turn it off (.pn-surface-tool). */
    --pn-glow: 0 0 0 1px rgba(var(--pn-brand-rgb), .35), 0 8px 26px -8px rgba(var(--pn-brand-rgb), .6);

    /* Rajdhani for titles and big numbers (the gaming voice), Outfit for everything you read, mono for ids. */
    --pn-font-display: "Rajdhani", "Outfit", system-ui, sans-serif;
    --pn-font-text: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pn-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", SFMono-Regular, Consolas, monospace;

    /* Content width of a page (PageContainer: MudContainer ExtraLarge minus its 24px sides); the home hero and the
       footer use it so their edges line up with the pages. */
    --pn-page-max: calc(1920px - 48px);

    /* Motion tokens: strong ease-out for things that enter or answer the user, ease-in-out for things that move on
       screen. UI motion stays under ~250 ms; presses are faster still. */
    --pn-ease-out: cubic-bezier(.23, 1, .32, 1);
    --pn-ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --pn-ease-drawer: cubic-bezier(.32, .72, 0, 1);
    --pn-dur-press: 140ms;
    --pn-dur-fast: 180ms;
    --pn-dur: 240ms;

    /* Switching tabs (customjs/shell.js reads these too): the new content comes in from the side of the chosen tab,
       this far and this fast. */
    --pn-tab-shift: 16px;
    --pn-dur-tab: 220ms;

    /* Height the main content leaves for the fixed top bar (MudBlazor: 7/8 of the bar below 600px). */
    --pn-appbar-h: calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 8)
}

/* Dark tokens: on <html data-theme> too, because popovers and dialogs render outside the layout (.pn-dark). */
html[data-theme="dark"], .pn-dark {
    --pn-brand: #8b72ff;
    --pn-brand-rgb: 139, 114, 255;
    --pn-brand-text: #a897ff;
    --pn-brand-soft: rgba(139, 114, 255, .14);
    --pn-data: #2dd4bf;

    --pn-line: #26262f;
    --pn-line-strong: #34343f;
    --pn-shadow-raised: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .25);
    --pn-shadow-float: 0 0 0 1px #26262f, 0 12px 32px rgba(0, 0, 0, .5);
    --pn-shadow-modal: 0 0 0 1px #2c2c36, 0 24px 64px rgba(0, 0, 0, .6);

    --pn-glow: 0 0 0 1px rgba(var(--pn-brand-rgb), .45), 0 0 30px -6px rgba(var(--pn-brand-rgb), .55)
}

/* The staff tools keep the same colours but never glow, and their tabs move a little less (they switch all day). */
.pn-surface-tool {
    --pn-glow: none;
    --pn-tab-shift: 10px;
    --pn-dur-tab: 180ms
}

@media (min-width: 600px) {
    :root {
        --pn-appbar-h: var(--mud-appbar-height, 64px)
    }
}

/* Anchors (/servers#unirse, /normas#n-2-3) land below the fixed top bar. */
/* No global smooth scrolling: Blazor scrolls to the top on every navigation and that must be instant. */
html {
    scroll-padding-top: calc(var(--pn-appbar-h) + 12px)
}

body {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/* Avatars come from other hosts: an <img data-avatar> that fails is marked data-broken (inline script in App.razor),
   then it hides and the .pn-avatar-alt sibling (the initial) shows instead of the broken-image icon. */
img[data-avatar][data-broken] {
    display: none !important
}

img[data-avatar]:not([data-broken]) ~ .pn-avatar-alt {
    display: none !important
}

::selection {
    background: rgba(var(--pn-brand-rgb), .28)
}

code, kbd, samp {
    font-family: var(--pn-font-mono)
}

/* Numbers that count up (shell.js) never jiggle while they change. */
[data-count] {
    font-variant-numeric: tabular-nums
}

/* Staff tools: the big display headings of the public pages are toned down. */
.pn-surface-tool .mud-typography-h3 { font-size: clamp(1.5rem, 2.6vw, 1.875rem) }
.pn-surface-tool .mud-typography-h4 { font-size: clamp(1.3125rem, 2.2vw, 1.5rem) }

/* ---------- Surfaces ---------- */

.mud-card, .mud-paper, .mud-expansion-panel {
    box-shadow: none !important;
    border-radius: var(--pn-radius) !important;
    border: 1px solid var(--pn-line)
}

.mud-card {
    position: relative;
    overflow: hidden
}

.mud-paper {
    transition: background-color var(--pn-dur) ease, border-color var(--pn-dur) ease
}

.mud-popover.mud-paper, .mud-popover .mud-paper {
    border-radius: var(--pn-radius-md) !important;
    box-shadow: var(--pn-shadow-float) !important
}

.mud-card-header {
    padding: 20px 20px 12px;
    border-bottom: 1px solid var(--pn-line)
}

.mud-card-header .mud-card-header-avatar {
    margin-right: 16px
}

.mud-card-content {
    padding: 16px 20px
}

.mud-card-actions {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--pn-line)
}

.mud-expansion-panel {
    transition: margin var(--pn-dur) var(--pn-ease-out), border-color var(--pn-dur) ease
}

.mud-expansion-panel.mud-expanded {
    margin: 16px 0;
    border-color: var(--pn-line-strong)
}

/* ---------- Controls ---------- */

.mud-button {
    transition: background-color var(--pn-dur-fast) ease, box-shadow var(--pn-dur-fast) ease, border-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
    letter-spacing: .01em;
    font-weight: 600;
    border-radius: var(--pn-radius-md) !important;
    position: relative;
    overflow: hidden
}

.mud-button-filled {
    box-shadow: var(--pn-shadow-raised)
}

/* Pressing gives instant feedback. */
.mud-button:active, .mud-icon-button:active {
    transform: scale(.97)
}

.mud-chip.mud-clickable:active {
    transform: scale(.96)
}

/* Rows of a menu or a list answer the press at once (no scale: the text must not move). */
.mud-nav-link:active, .mud-list-item-clickable:active {
    background-color: rgba(var(--mud-palette-primary-rgb), .1) !important;
    transition-duration: 0s
}

.mud-button, .mud-icon-button, .mud-nav-link {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation
}

.mud-icon-button {
    transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
    border-radius: 50%
}

/* Keyboard focus is the brand colour everywhere (and glows on the public pages). */
.mud-button:focus-visible, .mud-icon-button:focus-visible, .mud-chip:focus-visible, a:focus-visible,
button:focus-visible, [role="radio"]:focus-visible, [role="tab"]:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px
}

.mud-input, .mud-select {
    border-radius: var(--pn-radius-md)
}

.mud-input .mud-input-label, .mud-select .mud-input-label {
    font-weight: 500
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), .14)
}

.mud-input-outlined-border {
    transition: border-color var(--pn-dur-fast) ease, box-shadow var(--pn-dur-fast) ease
}

.mud-chip {
    height: 32px;
    border-radius: var(--pn-radius-pill);
    font-weight: 600;
    transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out)
}

.mud-badge {
    font-weight: 700
}

.mud-switch .mud-switch-track, .mud-switch .mud-switch-thumb {
    transition-duration: var(--pn-dur-fast);
    transition-timing-function: var(--pn-ease-out)
}

.mud-progress-linear {
    border-radius: var(--pn-radius-sm);
    overflow: hidden
}

.mud-tooltip {
    border-radius: var(--pn-radius-sm);
    font-weight: 500;
    box-shadow: var(--pn-shadow-float) !important;
    color: var(--mud-palette-background) !important;
    background-color: var(--mud-palette-text-primary) !important
}

/* ---------- Tabs ---------- */

.mud-tabs-toolbar {
    border-radius: var(--pn-radius) var(--pn-radius) 0 0;
    border-bottom: 1px solid var(--pn-line);
    padding: 0 12px;
    background: var(--mud-palette-surface)
}

.mud-tab {
    position: relative;
    transition: opacity var(--pn-dur-fast) ease, background-color var(--pn-dur-fast) ease;
    opacity: .72;
    border-radius: var(--pn-radius-sm) var(--pn-radius-sm) 0 0;
    margin: 0 2px
}

.mud-tab:hover {
    opacity: .9;
    background: rgba(var(--mud-palette-primary-rgb), .05)
}

.mud-tab.mud-selected {
    opacity: 1;
    background: rgba(var(--mud-palette-primary-rgb), .07)
}

/* Same length as the content's slide, so the indicator and the panel land together. */
.mud-tabs .mud-tab-slider {
    transition: left var(--pn-dur-tab) var(--pn-ease-out), width var(--pn-dur-tab) var(--pn-ease-out) !important
}

/* The panel of the chosen tab comes in from the side of that tab (customjs/shell.js sets data-tab-dir on the tabs:
   1 when the new tab is to the right, -1 to the left), its pieces one after another; the tab bar itself never moves.
   Only during a switch the user made: shell.js puts data-tab-in on the bar's own panels (not on nested bars) and
   data-tab-old on the pieces on screen until Blazor swaps them, and takes both off once the slide ends. A page that
   opens on a tab only fades in like any page, and content that loads later in the panel does not slide again.
   The active panel is display: contents, so its children carry the animation. Tabs that change the address and draw
   their content after the bar (LinkTabs) are animated by shell.js itself. */
.mud-tabs[data-tab-dir="-1"] { --pn-tab-dir: -1 }

.mud-tabs-panels[data-tab-in] > .mud-tab-panel-active > :not([data-tab-old]) {
    animation: pn-slide-in var(--pn-dur-tab) var(--pn-ease-out) backwards
}

.mud-tabs-panels[data-tab-in] > .mud-tab-panel-active > :nth-child(2) { animation-delay: 30ms }
.mud-tabs-panels[data-tab-in] > .mud-tab-panel-active > :nth-child(3) { animation-delay: 60ms }
.mud-tabs-panels[data-tab-in] > .mud-tab-panel-active > :nth-child(n + 4) { animation-delay: 90ms }

@media (prefers-reduced-motion: reduce) {
    .mud-tabs-panels[data-tab-in] > .mud-tab-panel-active > :not([data-tab-old]) { animation: none }
}

/* While a tab switch settles the page keeps the height it had (shell.js), so the footer does not jump up and the
   scroll is not cut short while the new content loads. */
html[data-tab-lock] #main {
    min-height: var(--pn-tab-lock)
}

/* A tab bar drawn anew (another page of the same tabs) hides its indicator until shell.js slides it over from where
   the old one was. */
.mud-tabs[data-tab-hold] .mud-tab-slider {
    opacity: 0;
    transition: none !important
}

/* ---------- Tables ---------- */

.mud-table, .mud-table-container {
    overflow: hidden;
    border-radius: var(--pn-radius);
    border: 1px solid var(--pn-line)
}

.mud-table {
    box-shadow: none !important
}

.mud-table-head {
    font-weight: 700;
    background: rgba(var(--mud-palette-primary-rgb), .03)
}

.mud-table-cell {
    padding: 12px 16px
}

.mud-table-dense .mud-table-cell {
    padding: 6px 12px
}

.mud-table-body .mud-table-row {
    transition: background-color var(--pn-dur-fast) ease
}

.mud-table-body .mud-table-row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), .05) !important
}

/* New rows (a page loads, the next page of results) come in one after another; past the tenth they all come at once.
   Opacity only, so the columns never move. */
.mud-table-body .mud-table-row {
    animation: pn-fade var(--pn-dur) ease-out both
}

.mud-table-body .mud-table-row:nth-child(2) { animation-delay: 18ms }
.mud-table-body .mud-table-row:nth-child(3) { animation-delay: 36ms }
.mud-table-body .mud-table-row:nth-child(4) { animation-delay: 54ms }
.mud-table-body .mud-table-row:nth-child(5) { animation-delay: 72ms }
.mud-table-body .mud-table-row:nth-child(6) { animation-delay: 90ms }
.mud-table-body .mud-table-row:nth-child(7) { animation-delay: 108ms }
.mud-table-body .mud-table-row:nth-child(8) { animation-delay: 126ms }
.mud-table-body .mud-table-row:nth-child(9) { animation-delay: 144ms }
.mud-table-body .mud-table-row:nth-child(n+10) { animation-delay: 162ms }

/* ---------- Shell pieces MudBlazor draws (the top bar itself is styled in layout.css) ---------- */

.mud-drawer {
    transition: transform var(--pn-dur) var(--pn-ease-drawer), width var(--pn-dur) var(--pn-ease-drawer)
}

.mud-drawer.mud-drawer-open {
    box-shadow: none !important;
    border-right: 1px solid var(--pn-line)
}

/* ---------- Dialogs and menus ---------- */

@keyframes pn-dialog-in {
    from { opacity: 0; transform: scale(.96) translateY(8px) }
}

.mud-dialog {
    border-radius: var(--pn-radius) !important;
    border: 1px solid var(--pn-line);
    box-shadow: var(--pn-shadow-modal) !important;
    overflow: hidden;
    animation: pn-dialog-in var(--pn-dur) var(--pn-ease-out)
}

.mud-dialog-title {
    padding: 24px 28px 8px;
    font-weight: 700
}

.mud-dialog-content {
    padding: 16px 28px 24px
}

.mud-overlay-dialog .mud-overlay-scrim {
    backdrop-filter: blur(2px);
    animation: pn-fade var(--pn-dur) ease-out
}

/* Snackbars come up from their corner (MudBlazor fades them; this adds the movement). */
@keyframes pn-snack-in {
    from { transform: translateY(12px) scale(.98) }
}

.mud-snackbar {
    border-radius: var(--pn-radius-md);
    box-shadow: var(--pn-shadow-float);
    animation: pn-snack-in var(--pn-dur) var(--pn-ease-out)
}

/* ---------- Brand pieces ---------- */

/* The cut corner: the top right corner is clipped and its diagonal drawn, so a bordered card keeps a continuous edge.
   Only for the pieces that stand out. It uses ::after; a filled button that needs no diagonal uses .pn-cut-fill. */
.pn-cut, .pn-cut-fill {
    clip-path: polygon(0 0, calc(100% - var(--pn-cut)) 0, 100% var(--pn-cut), 100% 100%, 0 100%)
}

.pn-cut {
    position: relative
}

.pn-cut::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--pn-cut);
    height: var(--pn-cut);
    pointer-events: none;
    background: linear-gradient(to bottom left, transparent calc(50% - .75px), var(--pn-cut-line, var(--pn-line)) 50%, transparent calc(50% + .75px))
}

/* [data-flip] lists (shell.js) measure their children against themselves. */
[data-flip] {
    position: relative
}

/* Small uppercase label above a title or a number (kickers, stat captions). */
.pn-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary)
}

/* ---------- Phone ---------- */

@media (max-width: 600px) {
    :root {
        --pn-cut: 12px
    }

    .mud-card-header {
        padding: 16px 16px 8px
    }

    .mud-card-content {
        padding: 12px 16px
    }

    .mud-card-actions {
        padding: 8px 16px 12px
    }

    .mud-button-root {
        min-height: 44px;
        font-size: .9em
    }

    .mud-icon-button {
        padding: 12px
    }

    .mud-table-cell {
        padding: 10px 12px
    }

    .mud-dialog-title {
        padding: 20px 20px 6px
    }

    .mud-dialog-content {
        padding: 12px 20px 20px
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

/* ---------- Shared motion pieces ----------
   One vocabulary for the whole panel; feature sheets use these instead of defining their own:
   pn-fade (opacity), pn-rise (from below), pn-drop (from above), pn-pop (scale in), pn-bump (a small nudge of
   something already there), pn-fill (bars, with transform-origin left), pn-ring (a ring that spreads once; colour from
   --pn-ring-rgb, primary by default). */

@keyframes pn-fade {
    from { opacity: 0 }
    to { opacity: 1 }
}

@keyframes pn-rise {
    from { opacity: 0; transform: translateY(8px) }
}

/* Rise with a small grow: list items coming in one after another ([data-stagger]). */
@keyframes pn-rise-pop {
    from { opacity: 0; transform: translateY(12px) scale(.96) }
}

/* The next two use "translate", so they never fight the element's own transform. pn-slide-in is the tab switch:
   sideways by default, along y where the tabs are a vertical list (--pn-tab-dx: 0; --pn-tab-dy: 10px). */
@keyframes pn-slide-in {
    from {
        opacity: 0;
        translate: calc(var(--pn-tab-dir, 1) * var(--pn-tab-dx, var(--pn-tab-shift))) calc(var(--pn-tab-dir, 1) * var(--pn-tab-dy, 0px))
    }
}

@keyframes pn-reveal-in {
    from { opacity: 0; translate: 0 12px }
}

@keyframes pn-drop {
    from { opacity: 0; transform: translateY(-4px) }
}

@keyframes pn-pop {
    from { opacity: 0; transform: scale(.9) }
    to { opacity: 1; transform: none }
}

@keyframes pn-bump {
    0% { transform: scale(.94) }
    55% { transform: scale(1.02) }
    100% { transform: scale(1) }
}

@keyframes pn-fill {
    from { transform: scaleX(0) }
}

@keyframes pn-ring {
    0% { box-shadow: 0 0 0 0 rgba(var(--pn-ring-rgb, var(--mud-palette-primary-rgb)), .5) }
    100% { box-shadow: 0 0 0 10px rgba(var(--pn-ring-rgb, var(--mud-palette-primary-rgb)), 0) }
}

/* Sections that rise in the first time they come into view (customjs/shell.js). Nothing is ever hidden while it
   waits: a section is drawn like any other content, and only once it is revealed (in view on its first paint, or
   just before it scrolls in) do its pieces rise one after another (title first, then each card, 60 ms apart). So a
   blocked script, a screenshot or a slow observer never shows blank space. data-reveal="own" only marks the moment
   (the section runs its own animation on [data-revealed], like the home podium or heat map). An animation, not a transition, on the
   pieces: a transition here would replace their own (hover) transitions. */
.pn-reveal-on [data-reveal]:not([data-reveal="own"])[data-revealed] > :not(style, script) {
    animation: pn-reveal-in .45s var(--pn-ease-out) calc(var(--pn-reveal-i, 0) * 60ms) backwards
}

.pn-reveal-on [data-reveal] > :nth-child(2) { --pn-reveal-i: 1 }
.pn-reveal-on [data-reveal] > :nth-child(3) { --pn-reveal-i: 2 }
.pn-reveal-on [data-reveal] > :nth-child(4) { --pn-reveal-i: 3 }
.pn-reveal-on [data-reveal] > :nth-child(5) { --pn-reveal-i: 4 }
.pn-reveal-on [data-reveal] > :nth-child(n + 6) { --pn-reveal-i: 5 }

@media (prefers-reduced-motion: reduce) {
    .pn-reveal-on [data-reveal][data-revealed] > :not(style, script) { animation: none }
}

/* "Live" marker: a teal dot (the data colour) with a soft ring that breathes (status of servers, players online). */
@keyframes pn-live-ring {
    0% { box-shadow: 0 0 0 0 rgba(var(--mud-palette-secondary-rgb), .55) }
    70%, 100% { box-shadow: 0 0 0 7px rgba(var(--mud-palette-secondary-rgb), 0) }
}

.pn-live-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-secondary);
    animation: pn-live-ring 2.4s ease-out infinite
}

/* Menus grow out of the button that opened them (start = anchored left, end = anchored right). */
.mud-popover.pn-popover {
    transform: scale(.96) translateY(-4px);
    transform-origin: top center;
    transition-property: opacity, transform !important;
    transition-duration: var(--pn-dur-fast) !important;
    transition-timing-function: var(--pn-ease-out) !important
}

.mud-popover.pn-popover-start { transform-origin: top left }
.mud-popover.pn-popover-end { transform-origin: top right }

.mud-popover.pn-popover.mud-popover-open {
    transform: none
}

@media (prefers-reduced-motion: reduce) {
    .mud-popover.pn-popover { transform: none }
}

/* ---------- View transition (customjs/shell.js) ----------
   Only light/dark uses one (html[data-vt="theme"]); without the API or with reduced motion the switch is instant. */

/* Light/dark: the new colours spread in a circle from the option that was clicked. */
@keyframes pn-vt-reveal {
    from { clip-path: circle(0 at var(--vt-x, 100%) var(--vt-y, 0)) }
    to { clip-path: circle(150vmax at var(--vt-x, 100%) var(--vt-y, 0)) }
}

html[data-vt="theme"]::view-transition-old(root) {
    animation: none
}

html[data-vt="theme"]::view-transition-new(root) {
    animation: pn-vt-reveal 480ms var(--pn-ease-in-out)
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important
    }
}