/* The glass silhouette, brand and reading landmarks each own their movement.
   Native snapshots are a code-driven fallback while WebGL initializes. */
html[data-home-transition] {
  --home-passage:780ms;
  --home-flight:cubic-bezier(.38,0,.2,1);
  --home-settle:cubic-bezier(.18,.8,.22,1);
  --home-passage-paper:#fff;
}
html[data-home-transition="cover"] { --home-passage:560ms; }
html[data-theme="dark"][data-home-transition] { --home-passage-paper:#101820; }
@media(prefers-color-scheme:dark) {
  html[data-theme="auto"][data-home-transition] { --home-passage-paper:#101820; }
}
html[data-home-transition] .site-main { animation:none !important; }
html[data-home-transition]::view-transition { pointer-events:none; background:var(--home-passage-paper); }
html[data-home-transition]::view-transition-group(*) {
  animation-duration:var(--home-passage);
  animation-timing-function:var(--home-settle);
}
html[data-home-transition]::view-transition-image-pair(*) { isolation:auto; }
html[data-home-transition]::view-transition-old(*),
html[data-home-transition]::view-transition-new(*) { mix-blend-mode:normal; opacity:1; }

html[data-home-transition]::view-transition-group(root) { z-index:0; }
html[data-home-transition="library"]::view-transition-old(root),
html[data-home-transition="cover"]::view-transition-new(root) { animation:none; opacity:0; }
html[data-home-transition="library"]::view-transition-new(root) {
  animation:home-reading-arrive 260ms 60ms var(--home-settle) both;
}
html[data-home-transition="cover"]::view-transition-old(root) {
  animation:home-reading-leave 180ms ease-in both;
}

/* The captured artwork is transparent outside its actual silhouette. Its
   curved flight opens space, rather than wiping the page with an ellipse. */
html[data-home-transition]::view-transition-group(home-art) { z-index:3; }
html[data-home-transition]::view-transition-old(home-art),
html[data-home-transition]::view-transition-new(home-art) { transform-origin:38% 24%; }
html[data-home-transition="library"]::view-transition-old(home-art) {
  animation:home-glass-flight var(--home-passage) var(--home-flight) both;
}
html[data-home-transition="cover"]::view-transition-new(home-art) {
  animation:home-glass-return var(--home-passage) cubic-bezier(.12,.8,.2,1) both;
}
html[data-home-transition]::view-transition-group(home-entry) { z-index:4; }
html[data-home-transition]::view-transition-old(home-entry) { animation:home-entry-depart 140ms ease-in both; }
html[data-home-transition]::view-transition-new(home-entry) { animation:home-entry-arrive 160ms 310ms var(--home-settle) both; }

/* Short, overlapping arrivals establish the reading order. The full catalog
   remains in root; no per-card layers grow with the amount of content. */
html[data-home-transition]::view-transition-group(home-heading),
html[data-home-transition]::view-transition-group(home-rail),
html[data-home-transition]::view-transition-group(home-header) { z-index:1; }
html[data-home-transition]::view-transition-new(home-heading) { animation:home-landmark-arrive 440ms 90ms var(--home-settle) both; }
html[data-home-transition]::view-transition-new(home-rail) { animation:home-rail-arrive 460ms 150ms var(--home-settle) both; }
html[data-home-transition]::view-transition-new(home-header) { animation:home-landmark-arrive 400ms 110ms var(--home-settle) both; }
html[data-home-transition]::view-transition-old(home-heading),
html[data-home-transition]::view-transition-old(home-rail),
html[data-home-transition]::view-transition-old(home-header) { animation:home-reading-leave 300ms ease-in both; }
html[data-home-transition]::view-transition-group(home-brand) { z-index:5; animation-duration:400ms; }
html[data-home-transition]::view-transition-old(home-brand) { animation:none; opacity:0; }
html[data-home-transition]::view-transition-new(home-brand) { animation:none; height:100%; }

@keyframes home-glass-flight {
  /* One transform interval: easing each intermediate pose separately made
     the cold-start fallback brake to a stop at 20%, 50% and 80%.
     This accelerating curve keeps the original scale landmarks while the
     opacity-only keyframe starts the final dissolve independently. */
  0% { transform:scale(1) rotate(0);opacity:1;animation-timing-function:cubic-bezier(.6,0,.8,.35); }
  80% { opacity:1;animation-timing-function:var(--home-flight); }
  100% { transform:scale(7) rotate(-7.5deg);opacity:0; }
}
@keyframes home-glass-return {
  from { transform:scale(3.4) rotate(-5deg);opacity:0; }
  24% { opacity:1; }
  to { transform:scale(1) rotate(0);opacity:1; }
}
@keyframes home-reading-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes home-landmark-arrive { from { opacity:0; transform:translate3d(0,24px,0); } to { opacity:1; transform:none; } }
@keyframes home-rail-arrive { from { opacity:0; transform:translate3d(-18px,12px,0); } to { opacity:1; transform:none; } }
@keyframes home-reading-leave { to { opacity:0; transform:translate3d(0,32px,0); } }
@keyframes home-entry-depart { to { opacity:0; transform:translateY(12px); } }
@keyframes home-entry-arrive { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) {
  html[data-home-transition]::view-transition-group(*),
  html[data-home-transition]::view-transition-old(*),
  html[data-home-transition]::view-transition-new(*) { animation:none !important; }
}

/* Live glass stays outside the swapped main; only this bounded viewport layer
   owns it for the duration of the pose animation. Navigation remains clickable. */
.home-passage-live,.home-passage-retiring {
  position:fixed;inset:0;overflow:hidden;pointer-events:none;contain:layout paint;
}
.home-passage-retiring { z-index:900; }
.home-passage-live { z-index:1000; }
.home-passage-paper,.home-passage-veil { position:absolute;inset:0;width:100%;height:100%; }
.home-passage-paper { fill:var(--site-home-paper,#fff);overflow:hidden;contain:strict;will-change:opacity; }
.home-passage-veil { background:var(--site-home-paper,#fff); }
.home-passage-veil { z-index:0;pointer-events:none;will-change:opacity; }
html[data-theme="dark"] .home-passage-paper { fill:#101820; }
html[data-theme="dark"] .home-passage-veil { background:#101820; }
@media(prefers-color-scheme:dark) {
  html[data-theme="auto"] .home-passage-paper { fill:#101820; }
  html[data-theme="auto"] .home-passage-veil { background:#101820; }
}
html[data-home-live-passage] body .site-header {
  z-index:1001;background:transparent;border-color:transparent;backdrop-filter:none;transition:none;
}
.home-passage-live .home-artwork { pointer-events:none;will-change:opacity; }