/* EN / JP switch (Kira, 2026-10-15): see lang-transition.js. Only active while html.tcs-lang-vt is set, so the page
   navigation transition in experience.css is untouched. Timings live in the variables below (the view-transition
   pseudo-elements inherit them from <html>); per-block stagger delays are written by lang-transition.js.
   2026-10-15 retune after Kotaro: "too fast, not buttery" — about twice as long, wider overlap, a longer focus-in. */
html{
  --tcs-lang-out:.62s;                          /* old words soften away */
  --tcs-lang-in:1s;                             /* new words come into focus */
  --tcs-lang-lag:.16s;                          /* new words start while the old are still fading */
  --tcs-lang-move:1.05s;                        /* a block gliding to its new place */
  --tcs-lang-fade:.95s;                         /* root and photos: one even cross-fade */
  --tcs-lang-ease-out:cubic-bezier(.37,0,.63,1);
  --tcs-lang-ease-in:cubic-bezier(.16,1,.3,1);
  --tcs-lang-ease-move:cubic-bezier(.32,.72,0,1);
  --tcs-lang-ease-fade:cubic-bezier(.45,0,.55,1);
}

/* Text blocks: the old words soften and fade while the new ones drift up into focus at their natural size (no scaling
   when a Japanese line is shorter than the English one), and the box glides to its new place. */
html.tcs-lang-vt::view-transition-group(*){animation-duration:var(--tcs-lang-move);animation-timing-function:var(--tcs-lang-ease-move)}
html.tcs-lang-vt::view-transition-old(*),
html.tcs-lang-vt::view-transition-new(*){width:100%;height:100%;object-fit:none;overflow:visible}
html.tcs-lang-vt::view-transition-old(*){animation:tcs-lang-out var(--tcs-lang-out) var(--tcs-lang-ease-out) both}
html.tcs-lang-vt::view-transition-new(*){animation:tcs-lang-in var(--tcs-lang-in) var(--tcs-lang-ease-in) var(--tcs-lang-lag) both}
@keyframes tcs-lang-out{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(7px)}}
@keyframes tcs-lang-in{from{opacity:0;filter:blur(9px);translate:0 .32em}to{opacity:1;filter:blur(0);translate:0 0}}

/* Root: a pure cross-fade with identical timing on both sides, so unchanged pixels (backgrounds, rules) hold still.
   These come after the (*) rules so those don't override them. */
html.tcs-lang-vt::view-transition-group(root){animation:none}
html.tcs-lang-vt::view-transition-old(root),
html.tcs-lang-vt::view-transition-new(root){width:auto;height:auto;object-fit:fill;filter:none;translate:none}
html.tcs-lang-vt::view-transition-old(root){animation:tcs-lang-fade-out var(--tcs-lang-fade) var(--tcs-lang-ease-fade) both}
html.tcs-lang-vt::view-transition-new(root){animation:tcs-lang-fade-in var(--tcs-lang-fade) var(--tcs-lang-ease-fade) both}

/* Media (photos, icons, round controls): same pixels on both sides, so the identical cross-fade reads as one solid
   object gliding. lang-transition.js applies these per block. */
@keyframes tcs-lang-fade-out{from{opacity:1}to{opacity:0}}
@keyframes tcs-lang-fade-in{from{opacity:0}to{opacity:1}}

/* The EN / JP marker itself eases between states once the page is live again. */
.swap-lang span{transition:opacity .6s var(--tcs-lang-ease-in),color .6s var(--tcs-lang-ease-in)}

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