/* The outgoing page remains fully lit beneath the incoming page. A short
   crossfade is used only when both documents have presentable content. */
@view-transition { navigation: auto; }
html[data-page-transition="native"] { view-transition-name: page-surface !important; }
html[data-page-transition="native"] :is(#app-main, #view-root, #parameters-layer, .mobile-bottom-nav) { view-transition-name: none !important; }
html[data-page-transition="native"]::view-transition { pointer-events: none; }
::view-transition-group(page-surface) { animation: none; }
::view-transition-image-pair(page-surface) { isolation: isolate; }
::view-transition-old(page-surface) { animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-new(page-surface) { animation: page-crossfade .22s cubic-bezier(.2,.75,.25,1) both; mix-blend-mode: normal; }
@keyframes page-crossfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html[data-page-entry="soft"] .hero-copy { animation: page-content-settle .48s cubic-bezier(.2,.75,.25,1) both; }
}
@keyframes page-content-settle { from { opacity: .82; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* A delayed line gives real network waits a quiet signal without shifting
   content, taking focus or blocking a click. It never reports invented %. */
#af-navigation-progress { position: fixed; inset: 0 0 auto; z-index: 1800; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; background: #a38adb0c; transition: opacity .16s ease; }
#af-navigation-progress > i { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(.08); background: linear-gradient(90deg, #ad91ef, #9bbcf5 65%, #83d6ca); box-shadow: 0 0 12px #a895ee66; }
html[data-navigation-state="loading"] #af-navigation-progress { opacity: 1; }
html[data-navigation-state="loading"] #af-navigation-progress > i { animation: af-navigation-drift 1.6s cubic-bezier(.2,.65,.35,1) infinite; }
html[data-navigation-state="complete"] #af-navigation-progress { opacity: 0; transition-delay: .08s; }
html[data-navigation-state="complete"] #af-navigation-progress > i { transform: scaleX(1); transition: transform .16s ease; }
@keyframes af-navigation-drift { 0% { transform: translateX(-60%) scaleX(.6); } 100% { transform: translateX(100%) scaleX(.6); } }

/* Structured placeholders share the dimensions and rhythm of story cards.
   They are loading surfaces, never the old form or an unrelated preview. */
[data-content-placeholder] { min-width: 0; padding: clamp(24px, 4vw, 44px); border: 1px solid #ad98da12; border-radius: 24px; background: linear-gradient(130deg, #a38adb09, #85bfcb03); }
[data-content-placeholder] :is(.af-content-skeleton-heading, .af-content-skeleton-cards, .af-content-skeleton-lines) { min-width: 0; }
[data-content-placeholder] i { display: block; height: 9px; border-radius: 20px; background: #b5a5d812; }
.af-content-skeleton-heading { display: grid; gap: 18px; max-width: 540px; margin-bottom: 32px; }
.af-content-skeleton-heading i:first-child { width: 26%; height: 7px; }
.af-content-skeleton-heading i:last-child { width: 68%; height: 22px; background: #b5a5d81b; }
.af-content-skeleton-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.af-content-skeleton-cards > div { display: grid; align-content: center; gap: 13px; min-height: 110px; padding: 20px; border: 1px solid #b5a5d80b; border-radius: 16px; background: #b5a5d804; }
.af-content-skeleton-cards i:first-child { width: 42%; height: 14px; }
.af-content-skeleton-cards i:last-child { width: 72%; }
.af-content-skeleton-lines { display: grid; gap: 14px; max-width: 760px; margin-top: 30px; }
.af-content-skeleton-lines i:last-child { width: 62%; }
body[data-story-mounted="true"] #page-content-loader { display: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-content-placeholder] :is(.af-content-skeleton-heading, .af-content-skeleton-cards, .af-content-skeleton-lines) { animation: af-content-breathe 1.8s ease-in-out infinite alternate; }
  .af-content-skeleton-cards { animation-delay: .15s !important; }
}
@keyframes af-content-breathe { from { opacity: .6; } to { opacity: 1; } }
@media (max-width: 640px) {
  [data-content-placeholder] { padding: 24px; border-radius: 20px; }
  .af-content-skeleton-heading { gap: 15px; margin-bottom: 24px; }
  .af-content-skeleton-heading i:last-child { width: 90%; height: 18px; }
  .af-content-skeleton-cards { grid-template-columns: 1fr; gap: 12px; }
  .af-content-skeleton-cards > div { min-height: 72px; padding: 16px; gap: 10px; }
  .af-content-skeleton-cards > div:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(page-surface), ::view-transition-old(page-surface), ::view-transition-new(page-surface) { animation: none !important; }
  #af-navigation-progress > i, [data-content-placeholder] * { animation: none !important; }
  html[data-navigation-state="loading"] #af-navigation-progress > i { transform: scaleX(.7); }
}
html[data-motion-paused="true"] :is(.hero-copy, #af-navigation-progress > i, [data-content-placeholder] *) { animation: none !important; }
html[data-motion-paused="true"][data-navigation-state="loading"] #af-navigation-progress > i { transform: scaleX(.7); }
@media print { #af-navigation-progress, #af-navigation-status, [data-content-placeholder] { display: none !important; } }