/* Real document navigation: keep the paper and navigation outside the ink dissolve. */
@view-transition{navigation:auto}
:root{--fate-page-duration:560ms}
.app>.bg{view-transition-name:fate-paper}
/* Only isolate the nav while capturing a transition. A permanent named ancestor
   prevents its glass child from sampling the page behind it at rest. */
html.fate-capturing #tabbar{view-transition-name:fate-nav}
/* A named element is snapshotted on its own: its backdrop-filter has nothing behind it, so the
   captured glass would be see-through. The glass material is untouched; instead the snapshot's
   group supplies the same frost over the transitioning page, clipped to the glass shell (the
   ask button, icons and ink pad are their own groups, so nothing visible is cut). */
::view-transition-group(fate-nav){
  -webkit-backdrop-filter:var(--lg-frost);backdrop-filter:var(--lg-frost);
  clip-path:inset(0 60px 0 0 round 999px)
}
#devbar{view-transition-name:fate-dev}
#tabbar .nav-ink-pill{position:absolute;top:4px;bottom:4px;border-radius:999px;background:rgba(255,255,255,.54);pointer-events:none;z-index:-1;view-transition-name:fate-pill}
html[data-fate-system="app"] #tabbar:has(.nav-ink-pill) .tab-item.on::before{display:none}
#tabbar a:nth-of-type(1) svg{view-transition-name:fate-today}
#tabbar a:nth-of-type(2) svg{view-transition-name:fate-course}
#tabbar a:nth-of-type(3) svg{view-transition-name:fate-people}
#tabbar a:nth-of-type(4) svg{view-transition-name:fate-mall}
#tabbar a.tab-ask{view-transition-name:fate-ask}
::view-transition-group(*){animation-duration:var(--fate-page-duration);animation-timing-function:var(--ease-out)}
::view-transition-old(root){animation:fate-ink-out var(--fate-page-duration) ease-out both;mix-blend-mode:normal}
::view-transition-new(root){
  animation:fate-ink-in var(--fate-page-duration) ease-out both;
  mix-blend-mode:normal;
  mask-image:radial-gradient(ellipse at center,#000 28%,#0009 43%,transparent 66%),radial-gradient(ellipse at center,#000 24%,#0007 48%,transparent 68%),radial-gradient(ellipse at center,#000 26%,#0008 45%,transparent 67%);
  mask-position:24% 28%,76% 48%,42% 84%;mask-repeat:no-repeat;
}
/* Blur only the captured content, never live text or the shared navigation. */
@keyframes fate-ink-in{
  from{opacity:0;filter:blur(10px);mask-size:0% 0%}
  35%{opacity:.65;filter:blur(8px)}
  65%{opacity:.95;filter:blur(4px)}
  to{opacity:1;filter:blur(0);mask-size:420% 420%}
}
@keyframes fate-ink-out{
  from{opacity:1;filter:blur(0)}
  40%{opacity:.45;filter:blur(6px)}
  to{opacity:0;filter:blur(10px)}
}
/* The shared glass shell does not fade or bounce; only its selected ink pad travels. */
::view-transition-old(fate-nav),::view-transition-old(fate-paper),::view-transition-old(fate-dev){animation:none;opacity:0}
::view-transition-new(fate-nav),::view-transition-new(fate-paper),::view-transition-new(fate-dev){animation:none}
/* 禪意動效（L 2026-09-26）：墨色膠囊平順滑到新分頁，不過衝、不擠壓回彈。 */
::view-transition-group(fate-pill){animation-timing-function:var(--zen-ease,cubic-bezier(.22,.61,.36,1));z-index:2}
::view-transition-old(fate-pill){animation:none;opacity:0}
::view-transition-new(fate-pill){animation:none}
::view-transition-group(fate-nav){z-index:1}
::view-transition-group(fate-today),::view-transition-group(fate-course),::view-transition-group(fate-people),::view-transition-group(fate-mall),::view-transition-group(fate-ask){z-index:3}
::view-transition-group(fate-dev){z-index:4}
/* Header question pill (L 2026-09-27「the button is glitched」): inside the root snapshot the ink dissolve smeared the old
   page's red + into a pink ghost beside the new pill (it sits lower on Today than on the other tabs). Captured on its own
   it never blurs: the old copy hides and the new one glides to its spot, like the nav's ink pad. Named only while
   capturing, for the same reason as the nav: a permanent name would stop its glass from sampling the page at rest.
   ui.js paints the pill before the first await so the new page has it when the transition captures. */
html.fate-capturing .main-header-quota{view-transition-name:fate-quota}
::view-transition-group(fate-quota){animation-timing-function:var(--zen-ease,cubic-bezier(.22,.61,.36,1));z-index:2}
::view-transition-old(fate-quota){animation:none;opacity:0}
::view-transition-new(fate-quota){animation:none}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}