/* Full-screen feedback is reserved for boot and failures, always in light mode. */
:root {
  --loader-surface: #f7f4ee;
  --loader-card: #fff;
  --loader-text: #63707a;
  --loader-ink: #07111b;
  --loader-line: #ded8ce;
}
html[data-route-loading="true"] #app > .view { display: none !important; }
#route-loading-state { display: none; }
html[data-route-loading="true"] #route-loading-state,
html[data-loader-phase="exiting"] #route-loading-state {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 47%, rgb(255 122 0 / 7%), transparent min(40vw, 320px)),
    var(--loader-surface);
  color: var(--loader-text);
  color-scheme: light;
  text-align: center;
}
html[data-loader-stage="initial"][data-route-loading="true"] .header-shell,
html[data-loader-stage="initial"][data-route-loading="true"] #site-footer,
html[data-loader-stage="initial"][data-route-loading="true"] #cookie-consent-container,
html[data-loader-stage="initial"][data-route-loading="true"] #support-chat-launcher { visibility: hidden; }
.route-loader-art {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.2vw, 26px);
  width: min(82vw, 340px);
}
.route-loader-logo-stage {
  position: relative;
  isolation: isolate;
  width: clamp(226px, 24vw, 292px);
  aspect-ratio: 2871 / 1954;
  contain: layout paint;
  filter: drop-shadow(0 18px 28px rgb(7 17 27 / 8%));
  transform-origin: 50% 67%;
}
.route-loader-logo-stage::after {
  position: absolute;
  z-index: -1;
  right: 16%;
  bottom: 2%;
  left: 16%;
  height: 8%;
  border-radius: 50%;
  background: rgb(7 17 27 / 9%);
  content: "";
  filter: blur(12px);
  transform: scaleX(.84);
}
.route-loader-logo,
.route-loader-logo-parts,
.route-loader-piece,
.route-loader-piece img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.route-loader-logo,
.route-loader-piece img { display: block; object-fit: contain; }
.route-loader-logo-parts,
.route-loader-piece { pointer-events: none; }
.route-loader-piece { overflow: hidden; transform-box: border-box; }
.route-loader-speed-lines { clip-path: inset(14% 69% 39% 0); }
.route-loader-mascot { clip-path: inset(0 18% 42% 20%); transform-origin: 52% 48%; }
.route-loader-wheel-left { clip-path: inset(56% 55% 32.5% 34%); transform-origin: 39.5% 64%; }
.route-loader-wheel-right { clip-path: inset(56% 35% 32.5% 54%); transform-origin: 59.5% 64%; }
.route-loader-cursor { clip-path: inset(34% 0 34% 68%); transform-origin: 82% 55%; }
.route-loader-wordmark { clip-path: inset(67% 0 0 0); }
.route-loader-logo-final { opacity: 0; }
.route-loader-click-pulse {
  position: absolute;
  z-index: 2;
  top: 47%;
  left: 80%;
  width: 24px;
  height: 24px;
  border: 2px solid #ff7a00;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.55);
}
.route-loader-caption {
  color: #69747d;
  font-size: clamp(.76rem, 1.4vw, .86rem);
  line-height: 1.5;
  letter-spacing: .015em;
}
html[data-loader-phase="pending"] .route-loader-art { opacity: 0; }
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-art {
  animation: route-art-arrive .18s ease-out both;
}
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-speed-lines {
  animation: route-speed-lines .34s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-mascot {
  animation: route-mascot-arrive .48s cubic-bezier(.22, 1, .36, 1) .1s both;
}
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-wheel-left,
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-wheel-right {
  animation: route-wheel-settle .48s cubic-bezier(.22, 1, .36, 1) .14s both;
}
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-cursor {
  animation: route-cursor-click .34s cubic-bezier(.22, 1, .36, 1) .46s both;
}
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-click-pulse {
  animation: route-click-pulse .3s ease-out .57s both;
}
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-wordmark {
  animation: route-wordmark-reveal .36s cubic-bezier(.22, 1, .36, 1) .7s both;
}
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-logo-final {
  animation: route-logo-finalize .14s ease-out 1.04s both;
}
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-logo-parts {
  animation: route-parts-finish .12s ease-out 1.04s both;
}
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-caption {
  animation: route-caption-arrive .32s ease-out .92s both;
}
html[data-loader-stage="initial"][data-loader-phase="visible"] #route-loading-state[data-motion="css"] .route-loader-logo-stage {
  animation: route-logo-breathe 3s ease-in-out 1.45s infinite;
}
html[data-loader-stage="route"] #route-loading-state:not([data-error]) { pointer-events: none; }
html[data-loader-phase="exiting"] #route-loading-state { opacity: 0; transition: opacity .28s ease-out; pointer-events: none; }
html[data-loader-stage="route"][data-loader-phase="exiting"] #route-loading-state { transition-duration: .16s; }
html[data-loader-stage="initial"][data-loader-phase="exiting"] #app > .view:not([hidden]) { animation: route-content-arrive .28s ease-out both; }
#route-loading-state[data-error] .route-loader-art { opacity: 1; transform: none; animation: none; }
#route-loading-state[data-error] .route-loader-logo-parts,
#route-loading-state[data-error] .route-loader-click-pulse,
#route-loading-state[data-error] .route-loader-caption { display: none; }
#route-loading-state[data-error] .route-loader-logo-final { opacity: 1; }
#route-loading-state[data-motion="static"] .route-loader-logo-parts,
#route-loading-state[data-motion="static"] .route-loader-click-pulse { display: none; }
#route-loading-state[data-motion="static"] .route-loader-logo-final { opacity: 1; }
#route-loading-message:not(.sr-only) { max-width: 34rem; margin: 0; line-height: 1.6; color: var(--loader-text); }
#route-retry { min-height: 44px; background: var(--loader-card); color: var(--loader-ink); color-scheme: light; }
#route-retry:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@keyframes route-art-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes route-speed-lines {
  from { opacity: 0; transform: translateX(-22px) scaleX(.72); }
  to { opacity: 1; transform: translateX(0) scaleX(1); }
}
@keyframes route-mascot-arrive {
  from { opacity: 0; transform: translate(-30px, 3px) rotate(-1.5deg); }
  to { opacity: 1; transform: translate(0) rotate(0); }
}
@keyframes route-wheel-settle {
  from { opacity: 0; transform: translateX(-28px) rotate(-22deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes route-cursor-click {
  0% { opacity: 0; transform: translate(10px, 8px) scale(.8); }
  70% { opacity: 1; transform: translate(0) scale(.94); }
  100% { opacity: 1; transform: translate(0) scale(1); }
}
@keyframes route-click-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  35% { opacity: .7; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes route-wordmark-reveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(4px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}
@keyframes route-logo-finalize { from { opacity: 0; } to { opacity: 1; } }
@keyframes route-parts-finish { from { opacity: 1; } to { opacity: 0; } }
@keyframes route-caption-arrive {
  from { opacity: 0; transform: translateY(5px); letter-spacing: .055em; }
  to { opacity: 1; transform: translateY(0); letter-spacing: .015em; }
}
@keyframes route-logo-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes route-content-arrive {
  from { opacity: .65; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .route-loader-art { width: min(84vw, 300px); }
  .route-loader-logo-stage { width: clamp(208px, 62vw, 252px); }
  .route-loader-click-pulse { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  #route-loading-state .route-loader-art,
  #route-loading-state .route-loader-logo-stage,
  #route-loading-state .route-loader-logo-parts,
  #route-loading-state .route-loader-piece,
  #route-loading-state .route-loader-click-pulse,
  #route-loading-state .route-loader-caption,
  html[data-loader-phase="exiting"] #app > .view:not([hidden]) {
    animation: none !important;
    transform: none !important;
  }
  #route-loading-state .route-loader-logo-parts,
  #route-loading-state .route-loader-click-pulse { display: none !important; }
  #route-loading-state .route-loader-logo-final,
  #route-loading-state .route-loader-caption { opacity: 1 !important; }
  html[data-loader-phase="exiting"] #route-loading-state { transition: none; }
}