/* Event-only theme scan. No theme animation runs on first load. */
@property --theme-wipe-radius { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --theme-scan-radius { syntax: '<length>'; inherits: false; initial-value: 0px; }
.theme-scan {
  position: fixed; inset: 0; z-index: 2147483646; pointer-events: none;
  view-transition-name: theme-scan;
  background:
    radial-gradient(circle,rgba(208,249,255,.85) 0 1px,transparent 1.8px) 0 0 / 32px 32px,
    linear-gradient(90deg,rgba(132,222,249,.32) 1px,transparent 1px) 16px 16px / 32px 32px,
    linear-gradient(0deg,rgba(132,222,249,.32) 1px,transparent 1px) 16px 16px / 32px 32px,
    rgba(80,170,205,.035);
}
/* Snapshot both finished tile states, rather than capturing half of a CSS hover. */
:root[data-theme-wipe] #grid>.tile { transition: none !important; }
:root[data-theme-wipe]::view-transition { pointer-events: none; }
:root[data-theme-wipe]::view-transition-group(*) { animation:none;z-index:4; }
:root[data-theme-wipe]::view-transition-group(root) { animation: none;z-index:1; }
:root[data-theme-wipe]::view-transition-new(*) { animation:none;mix-blend-mode:normal; }
/* Feather the material change, not the page content itself. */
:root[data-theme-wipe="out"]::view-transition-new(root),
:root[data-theme-wipe="in"]::view-transition-old(root) {
  mask-image: radial-gradient(circle at var(--theme-origin-x) var(--theme-origin-y),
    #000 calc(var(--theme-wipe-radius) - var(--theme-edge-softness)),
    rgba(0,0,0,.88) calc(var(--theme-wipe-radius) - var(--theme-edge-softness) * .5),
    rgba(0,0,0,.5) var(--theme-wipe-radius),
    rgba(0,0,0,.12) calc(var(--theme-wipe-radius) + var(--theme-edge-softness) * .5),
    transparent calc(var(--theme-wipe-radius) + var(--theme-edge-softness)));
}
:root[data-theme-wipe="out"]::view-transition-new(root) { --theme-wipe-radius:calc(0px - var(--theme-edge-softness)); }
:root[data-theme-wipe="in"]::view-transition-old(root) { --theme-wipe-radius:var(--theme-wipe-max); }
.theme-card-scan {
  position:absolute;inset:0;z-index:9;pointer-events:none;box-sizing:border-box;border-radius:inherit;
  border:1.5px solid rgba(179,238,255,.95);
  box-shadow:0 0 10px rgba(132,222,249,.42),inset 0 0 7px rgba(132,222,249,.2);
}
:root[data-theme-wipe="in"] .theme-card-scan {
  border-color:rgba(183,143,88,.95);
  box-shadow:0 0 10px rgba(201,161,104,.38),inset 0 0 7px rgba(201,161,104,.2);
}
:root[data-theme-wipe]::view-transition-image-pair(root) { isolation: isolate; }
:root[data-theme-wipe]::view-transition-old(root),
:root[data-theme-wipe]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root[data-theme-wipe="out"]::view-transition-old(root) { z-index: 1; }
:root[data-theme-wipe="out"]::view-transition-new(root) { z-index: 2; }
:root[data-theme-wipe="in"]::view-transition-old(root) { z-index: 2; }
:root[data-theme-wipe="in"]::view-transition-new(root) { z-index: 1; }
:root[data-theme-wipe]::view-transition-group(theme-scan) {
  z-index: 3; animation: none;
  mask-image: radial-gradient(circle at var(--theme-origin-x) var(--theme-origin-y),
    transparent calc(var(--theme-scan-radius) - 100px),
    #000 calc(var(--theme-scan-radius) - 35px),
    #000 calc(var(--theme-scan-radius) + 10px),
    transparent calc(var(--theme-scan-radius) + 70px));
}
:root[data-theme-wipe]::view-transition-new(theme-scan) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  .theme-scan,.theme-card-scan { display: none; }
  :root[data-theme-wipe]::view-transition-group(*) { animation: none !important; }
}
@media print { .theme-scan,.theme-card-scan { display: none; } }
:root[data-theme-wipe] [data-paper-surface] { transition:none!important; }

.deck-enhanced .deck-card>.theme-card-scan { top:var(--glow-top,0px);bottom:auto;height:var(--glow-height,100%); }
.contact-dialog>.theme-card-scan { top:var(--paper-scroll-top,0px);bottom:auto;height:100%; }