/* 7 light/dark swaps. Heavy glitch only when html.swap-tear (25%). */

html.is-swapping{
  cursor:wait;
}

::view-transition-group(root){
  animation-duration:0.72s;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-timing-function:cubic-bezier(.22,.7,.28,1);
  mix-blend-mode:normal;
}

html[data-swap="blend"]::view-transition-old(root){
  animation:swap-fade-out 0.85s ease both;
}
html[data-swap="blend"]::view-transition-new(root){
  animation:swap-fade-in 0.85s ease both;
}

html[data-swap="scan"]::view-transition-old(root){
  animation:none;
  z-index:1;
}
html[data-swap="scan"]::view-transition-new(root){
  animation:swap-clean-scan 0.7s cubic-bezier(.2,.8,.2,1) both;
  z-index:2;
}

html[data-swap="sweep"]::view-transition-old(root){
  animation:none;
  z-index:1;
}
html[data-swap="sweep"]::view-transition-new(root){
  animation:swap-clean-sweep 0.68s cubic-bezier(.2,.8,.2,1) both;
  z-index:2;
}

html[data-swap="iris"]::view-transition-old(root){
  animation:none;
  z-index:1;
}
html[data-swap="iris"]::view-transition-new(root){
  animation:swap-clean-iris 0.78s cubic-bezier(.16,.84,.44,1) both;
  z-index:2;
}

html[data-swap="glitch"]::view-transition-group(root){
  animation-duration:0.48s;
}
html[data-swap="glitch"]::view-transition-old(root){
  animation:swap-glitch-old 0.48s steps(2,end) both;
}
html[data-swap="glitch"]::view-transition-new(root){
  animation:swap-glitch-new 0.48s steps(2,end) both;
}

html[data-swap="shutter"]::view-transition-old(root){
  animation:none;
  z-index:1;
}
html[data-swap="shutter"]::view-transition-new(root){
  animation:swap-clean-shutter 0.7s cubic-bezier(.18,.82,.22,1) both;
  z-index:2;
}

html[data-swap="fold"]::view-transition-group(root){
  animation-duration:0.8s;
  perspective:1400px;
}
html[data-swap="fold"]::view-transition-old(root){
  animation:swap-clean-fold-out 0.8s ease-in both;
  transform-origin:center left;
}
html[data-swap="fold"]::view-transition-new(root){
  animation:swap-clean-fold-in 0.8s ease-out both;
  transform-origin:center right;
}

html.swap-tear::view-transition-old(root),
html.swap-tear::view-transition-new(root){
  animation-timing-function:steps(2,end);
}
html.swap-tear[data-swap="blend"]::view-transition-old(root){
  animation:swap-blend-old 0.7s steps(2,end) both;
}
html.swap-tear[data-swap="blend"]::view-transition-new(root){
  animation:swap-blend-new 0.7s steps(2,end) both;
}
html.swap-tear[data-swap="scan"]::view-transition-old(root){
  animation:swap-tear-old 0.64s steps(2,end) both;
  z-index:1;
}
html.swap-tear[data-swap="scan"]::view-transition-new(root){
  animation:swap-scan 0.64s steps(3,end) both;
  z-index:2;
}
html.swap-tear[data-swap="sweep"]::view-transition-old(root){
  animation:swap-tear-old 0.6s steps(2,end) both;
  z-index:1;
}
html.swap-tear[data-swap="sweep"]::view-transition-new(root){
  animation:swap-sweep 0.6s steps(3,end) both;
  z-index:2;
}
html.swap-tear[data-swap="iris"]::view-transition-old(root){
  animation:swap-tear-old 0.68s steps(2,end) both;
  z-index:1;
}
html.swap-tear[data-swap="iris"]::view-transition-new(root){
  animation:swap-iris 0.68s steps(3,end) both;
  z-index:2;
}
html.swap-tear[data-swap="shutter"]::view-transition-old(root){
  animation:swap-tear-old 0.62s steps(2,end) both;
  z-index:1;
}
html.swap-tear[data-swap="shutter"]::view-transition-new(root){
  animation:swap-shutter 0.62s steps(4,end) both;
  z-index:2;
}
html.swap-tear[data-swap="fold"]::view-transition-old(root){
  animation:swap-fold-out 0.7s steps(2,end) both;
}
html.swap-tear[data-swap="fold"]::view-transition-new(root){
  animation:swap-fold-in 0.7s steps(2,end) both;
}

@keyframes swap-fade-out{to{opacity:0;}}
@keyframes swap-fade-in{from{opacity:0;}}
@keyframes swap-clean-scan{
  from{clip-path:inset(0 0 100% 0);}
  to{clip-path:inset(0 0 0 0);}
}
@keyframes swap-clean-sweep{
  from{clip-path:inset(0 100% 0 0);}
  to{clip-path:inset(0 0 0 0);}
}
@keyframes swap-clean-iris{
  from{clip-path:circle(0 at var(--swap-x,50%) var(--swap-y,50%));}
  to{clip-path:circle(150vmax at var(--swap-x,50%) var(--swap-y,50%));}
}
@keyframes swap-clean-shutter{
  from{clip-path:inset(0 50% 0 50%);}
  to{clip-path:inset(0 0 0 0);}
}
@keyframes swap-clean-fold-out{
  to{transform:rotateY(-88deg); opacity:0;}
}
@keyframes swap-clean-fold-in{
  from{transform:rotateY(88deg); opacity:0;}
}

@keyframes swap-blend-old{
  0%{opacity:1; transform:none; filter:none;}
  14%{opacity:1; transform:translate(-3px,1px); filter:drop-shadow(-3px 0 #00FFF7) drop-shadow(3px 0 #FF2D6B);}
  28%{opacity:0.55; transform:translate(4px,-1px); clip-path:inset(18% 0 42% 0);}
  46%{opacity:0.85; transform:translate(-2px,0); filter:brightness(1.4) contrast(1.3);}
  62%{opacity:0.25; transform:translate(3px,1px); clip-path:inset(60% 0 8% 0);}
  100%{opacity:0; filter:none;}
}
@keyframes swap-blend-new{
  0%{opacity:0; transform:translate(5px,0); filter:drop-shadow(4px 0 #FF2D6B) drop-shadow(-4px 0 #00FFF7);}
  18%{opacity:0.7; clip-path:inset(8% 0 62% 0); transform:translate(-4px,1px);}
  36%{opacity:0.35; clip-path:inset(55% 0 10% 0); transform:translate(3px,0);}
  52%{opacity:1; clip-path:inset(0 0 0 0); transform:translate(-2px,0); filter:brightness(1.25);}
  70%{opacity:0.8; transform:translate(2px,-1px);}
  100%{opacity:1; transform:none; filter:none;}
}

@keyframes swap-tear-old{
  0%{opacity:1; transform:none; filter:none;}
  22%{transform:translate(-5px,0); filter:drop-shadow(-4px 0 #00FFF7) drop-shadow(4px 0 #FF2D6B);}
  44%{opacity:0.7; clip-path:inset(30% 0 40% 0); transform:translate(4px,1px);}
  70%{opacity:0.35; transform:translate(-2px,0);}
  100%{opacity:0;}
}

@keyframes swap-scan{
  0%{clip-path:inset(0 0 100% 0); transform:none; filter:drop-shadow(-3px 0 #00FFF7) drop-shadow(3px 0 #FF2D6B);}
  10%{clip-path:inset(0 0 78% 0); transform:translate(4px,0);}
  18%{clip-path:inset(0 0 86% 0); transform:translate(-3px,1px);}
  32%{clip-path:inset(0 0 52% 0); transform:translate(2px,0); filter:brightness(1.35);}
  40%{clip-path:inset(0 0 61% 0); transform:translate(-5px,0);}
  58%{clip-path:inset(0 0 24% 0); transform:translate(3px,-1px); clip-path:inset(12% 0 24% 0);}
  72%{clip-path:inset(0 0 8% 0); transform:translate(-2px,0); filter:drop-shadow(4px 0 #FF2D6B) drop-shadow(-4px 0 #00FFF7);}
  88%{clip-path:inset(0 0 0 0); transform:translate(1px,0);}
  100%{clip-path:inset(0 0 0 0); transform:none; filter:none;}
}

@keyframes swap-sweep{
  0%{clip-path:inset(0 100% 0 0); transform:none; filter:drop-shadow(-5px 0 #00FFF7) drop-shadow(5px 0 #FF2D6B);}
  12%{clip-path:inset(0 72% 0 0); transform:translate(-4px,1px);}
  20%{clip-path:inset(18% 80% 8% 0); transform:translate(5px,0);}
  34%{clip-path:inset(0 44% 0 0); transform:translate(-3px,-1px); filter:brightness(1.4);}
  42%{clip-path:inset(40% 38% 20% 0); transform:translate(4px,0);}
  60%{clip-path:inset(0 16% 0 0); transform:translate(-2px,1px);}
  78%{clip-path:inset(0 0 0 0); transform:translate(3px,0); filter:drop-shadow(3px 0 #FF2D6B);}
  100%{clip-path:inset(0 0 0 0); transform:none; filter:none;}
}

@keyframes swap-iris{
  0%{
    clip-path:circle(0 at var(--swap-x,50%) var(--swap-y,50%));
    transform:none;
    filter:drop-shadow(-4px 0 #00FFF7) drop-shadow(4px 0 #FF2D6B);
  }
  14%{
    clip-path:circle(12vmax at var(--swap-x,50%) var(--swap-y,50%));
    transform:translate(4px,0);
  }
  22%{
    clip-path:circle(7vmax at var(--swap-x,50%) var(--swap-y,50%));
    transform:translate(-5px,1px);
  }
  40%{
    clip-path:circle(38vmax at var(--swap-x,50%) var(--swap-y,50%));
    transform:translate(3px,-1px);
    filter:brightness(1.35);
  }
  52%{
    clip-path:circle(28vmax at var(--swap-x,50%) var(--swap-y,50%));
    transform:translate(-3px,0);
  }
  74%{
    clip-path:circle(90vmax at var(--swap-x,50%) var(--swap-y,50%));
    transform:translate(2px,0);
    filter:drop-shadow(5px 0 #FF2D6B) drop-shadow(-5px 0 #00FFF7);
  }
  100%{
    clip-path:circle(150vmax at var(--swap-x,50%) var(--swap-y,50%));
    transform:none;
    filter:none;
  }
}

@keyframes swap-glitch-old{
  0%{opacity:1; transform:none; filter:none;}
  10%{transform:translate(-8px,1px); filter:drop-shadow(-5px 0 #00FFF7) drop-shadow(5px 0 #FF2D6B);}
  22%{opacity:1; clip-path:inset(10% 0 60% 0); transform:translate(6px,-1px);}
  34%{opacity:0.4; clip-path:inset(55% 0 5% 0); transform:translate(-4px,0);}
  48%{opacity:1; clip-path:inset(70% 0 10% 0); transform:translate(5px,1px); filter:brightness(1.6);}
  62%{opacity:0.5; clip-path:inset(5% 0 80% 0); transform:translate(-6px,0);}
  80%{opacity:0.2; transform:translate(3px,0);}
  100%{opacity:0; filter:none;}
}
@keyframes swap-glitch-new{
  0%{opacity:0; transform:translate(8px,0); filter:drop-shadow(5px 0 #FF2D6B) drop-shadow(-5px 0 #00FFF7);}
  12%{opacity:0.9; clip-path:inset(35% 0 40% 0); transform:translate(-6px,1px);}
  24%{opacity:0.3; clip-path:inset(75% 0 5% 0); transform:translate(5px,0);}
  40%{opacity:1; clip-path:inset(15% 0 65% 0); transform:translate(-4px,-1px); filter:brightness(1.45);}
  56%{opacity:0.55; clip-path:inset(50% 0 20% 0); transform:translate(4px,0);}
  72%{opacity:1; clip-path:inset(0 0 0 0); transform:translate(-2px,0);}
  88%{transform:translate(2px,0);}
  100%{opacity:1; transform:none; filter:none;}
}

@keyframes swap-shutter{
  0%{clip-path:inset(0 50% 0 50%); transform:none; filter:drop-shadow(-4px 0 #00FFF7) drop-shadow(4px 0 #FF2D6B);}
  16%{clip-path:inset(8% 38% 12% 42%); transform:translate(-4px,0);}
  28%{clip-path:inset(0 48% 0 36%); transform:translate(5px,1px);}
  44%{clip-path:inset(18% 18% 22% 20%); transform:translate(-3px,0); filter:brightness(1.4);}
  58%{clip-path:inset(0 22% 0 8%); transform:translate(4px,-1px);}
  72%{clip-path:inset(6% 4% 0 10%); transform:translate(-2px,0); filter:drop-shadow(4px 0 #FF2D6B);}
  100%{clip-path:inset(0 0 0 0); transform:none; filter:none;}
}

@keyframes swap-fold-out{
  0%{transform:rotateY(0deg); filter:none;}
  18%{transform:rotateY(-18deg) translate(-4px,1px); filter:drop-shadow(-4px 0 #00FFF7) drop-shadow(4px 0 #FF2D6B);}
  36%{transform:rotateY(-12deg) translate(5px,0); clip-path:inset(20% 0 45% 0);}
  58%{transform:rotateY(-52deg) translate(-3px,0); filter:brightness(1.3);}
  100%{transform:rotateY(-88deg); opacity:0; filter:none;}
}
@keyframes swap-fold-in{
  0%{transform:rotateY(88deg); opacity:0; filter:drop-shadow(5px 0 #FF2D6B) drop-shadow(-5px 0 #00FFF7);}
  22%{transform:rotateY(64deg) translate(4px,0); opacity:0.7; clip-path:inset(10% 0 55% 0);}
  40%{transform:rotateY(70deg) translate(-5px,1px); opacity:0.4;}
  62%{transform:rotateY(22deg) translate(3px,0); opacity:1; filter:brightness(1.35);}
  80%{transform:rotateY(-4deg) translate(-2px,0);}
  100%{transform:rotateY(0deg); opacity:1; filter:none;}
}

#theme-swap-layer{
  position:fixed;
  inset:0;
  z-index:5000;
  pointer-events:none;
  background:var(--swap-from, #000);
}
#theme-swap-layer.is-out[data-swap="blend"]{animation:swap-fade-out 0.85s ease forwards;}
#theme-swap-layer.is-out[data-swap="scan"]{animation:swap-overlay-clean-scan 0.7s cubic-bezier(.2,.8,.2,1) forwards;}
#theme-swap-layer.is-out[data-swap="sweep"]{animation:swap-overlay-clean-sweep 0.68s cubic-bezier(.2,.8,.2,1) forwards;}
#theme-swap-layer.is-out[data-swap="iris"]{animation:swap-overlay-clean-iris 0.78s cubic-bezier(.16,.84,.44,1) forwards;}
#theme-swap-layer.is-out[data-swap="glitch"]{animation:swap-overlay-glitch 0.48s steps(2,end) forwards;}
#theme-swap-layer.is-out[data-swap="shutter"]{animation:swap-overlay-clean-shutter 0.7s cubic-bezier(.18,.82,.22,1) forwards;}
#theme-swap-layer.is-out[data-swap="fold"]{animation:swap-overlay-clean-fold 0.8s ease-in forwards; transform-origin:center left;}
#theme-swap-layer.swap-tear.is-out[data-swap="blend"]{animation:swap-overlay-glitch 0.7s steps(2,end) forwards;}
#theme-swap-layer.swap-tear.is-out[data-swap="scan"]{animation:swap-overlay-scan 0.64s steps(3,end) forwards;}
#theme-swap-layer.swap-tear.is-out[data-swap="sweep"]{animation:swap-overlay-sweep 0.6s steps(3,end) forwards;}
#theme-swap-layer.swap-tear.is-out[data-swap="iris"]{animation:swap-overlay-iris 0.68s steps(3,end) forwards;}
#theme-swap-layer.swap-tear.is-out[data-swap="shutter"]{animation:swap-overlay-shutter 0.62s steps(4,end) forwards;}
#theme-swap-layer.swap-tear.is-out[data-swap="fold"]{animation:swap-overlay-fold 0.7s steps(2,end) forwards; transform-origin:center left;}

@keyframes swap-overlay-clean-scan{
  from{clip-path:inset(0 0 0 0);}
  to{clip-path:inset(100% 0 0 0);}
}
@keyframes swap-overlay-clean-sweep{
  from{clip-path:inset(0 0 0 0);}
  to{clip-path:inset(0 0 0 100%);}
}
@keyframes swap-overlay-clean-iris{
  from{clip-path:circle(150vmax at var(--swap-x,50%) var(--swap-y,50%));}
  to{clip-path:circle(0 at var(--swap-x,50%) var(--swap-y,50%));}
}
@keyframes swap-overlay-clean-shutter{
  from{clip-path:inset(0 0 0 0);}
  to{clip-path:inset(0 50% 0 50%);}
}
@keyframes swap-overlay-clean-fold{
  to{transform:rotateY(-90deg); opacity:0;}
}

@keyframes swap-overlay-scan{
  0%{clip-path:inset(0 0 0 0); transform:none; filter:drop-shadow(-3px 0 #00FFF7) drop-shadow(3px 0 #FF2D6B);}
  16%{clip-path:inset(18% 0 0 0); transform:translate(4px,0);}
  28%{clip-path:inset(12% 0 0 0); transform:translate(-3px,0);}
  48%{clip-path:inset(46% 0 0 0); transform:translate(3px,1px);}
  62%{clip-path:inset(38% 0 0 0);}
  100%{clip-path:inset(100% 0 0 0); transform:none; filter:none;}
}
@keyframes swap-overlay-sweep{
  0%{clip-path:inset(0 0 0 0); filter:drop-shadow(-4px 0 #00FFF7) drop-shadow(4px 0 #FF2D6B);}
  20%{clip-path:inset(0 0 0 22%); transform:translate(-4px,0);}
  32%{clip-path:inset(14% 0 8% 16%); transform:translate(5px,0);}
  58%{clip-path:inset(0 0 0 58%);}
  100%{clip-path:inset(0 0 0 100%); transform:none; filter:none;}
}
@keyframes swap-overlay-iris{
  0%{clip-path:circle(150vmax at var(--swap-x,50%) var(--swap-y,50%)); filter:drop-shadow(-4px 0 #00FFF7) drop-shadow(4px 0 #FF2D6B);}
  18%{clip-path:circle(90vmax at var(--swap-x,50%) var(--swap-y,50%)); transform:translate(4px,0);}
  30%{clip-path:circle(110vmax at var(--swap-x,50%) var(--swap-y,50%)); transform:translate(-3px,0);}
  100%{clip-path:circle(0 at var(--swap-x,50%) var(--swap-y,50%)); transform:none; filter:none;}
}
@keyframes swap-overlay-glitch{
  0%{opacity:1; transform:none; filter:none;}
  16%{transform:translate(-6px,1px); filter:drop-shadow(-4px 0 #00FFF7) drop-shadow(4px 0 #FF2D6B);}
  32%{opacity:1; clip-path:inset(12% 0 55% 0); transform:translate(5px,0);}
  50%{opacity:0.45; clip-path:inset(60% 0 8% 0); transform:translate(-4px,0);}
  72%{opacity:0.8; transform:translate(3px,-1px); filter:brightness(1.4);}
  100%{opacity:0; filter:none;}
}
@keyframes swap-overlay-shutter{
  0%{clip-path:inset(0 0 0 0); filter:drop-shadow(-4px 0 #00FFF7) drop-shadow(4px 0 #FF2D6B);}
  24%{clip-path:inset(0 12% 0 18%); transform:translate(-4px,0);}
  40%{clip-path:inset(10% 8% 14% 10%); transform:translate(4px,0);}
  100%{clip-path:inset(0 50% 0 50%); transform:none; filter:none;}
}
@keyframes swap-overlay-fold{
  0%{transform:rotateY(0); filter:drop-shadow(-4px 0 #00FFF7) drop-shadow(4px 0 #FF2D6B);}
  28%{transform:rotateY(-20deg) translate(-4px,0);}
  46%{transform:rotateY(-8deg) translate(5px,0); clip-path:inset(22% 0 40% 0);}
  100%{transform:rotateY(-90deg); opacity:0; filter:none;}
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation:none !important;
  }
  #theme-swap-layer{display:none !important;}
}