/* A restrained camera inside layered scenery. Financial surfaces stay fixed;
   only the distant view, atmosphere and near foliage respond to movement. */
/* A transform (even will-change:transform) on .page makes its fixed backdrop
   use the whole scrolling page as its containing block. Fade without moving
   the page so the world stays sized to the viewport on long screens too. */
.page.tab-enter { animation: none; will-change: auto; }
.page.tab-enter > :not(.theme-decor-layer) { animation: worldPageIn .22s ease-out; }
@keyframes worldPageIn { from { opacity: 0; } to { opacity: 1; } }
body[data-world-theme] .topbar { position: relative; z-index: 50; }
/* A little scenery after the content gives ground animals a place to live
   when the reader reaches the end, without taking space above the budget. */
body[data-world-theme] .page::after { content: ''; display: block; height: 88px; pointer-events: none; }
.world-scene { --world-x: 0px; --world-y: 0px; perspective: 1000px; }
.world-scene.decor-theme-ocean { --decor-image: url("theme-decor/assets/backgrounds/ocean-world-v2.webp"); }
.world-scene.decor-theme-forest { --decor-image: url("theme-decor/assets/backgrounds/forest-world-v2.webp"); }
.world-scene.decor-theme-arctic { --decor-image: url("theme-decor/assets/backgrounds/arctic-world-v2.webp"); }
@media(orientation:landscape) {
  .world-scene.decor-theme-ocean { --decor-image: url("theme-decor/assets/backgrounds/ocean-world-landscape-v2.webp"); }
  .world-scene.decor-theme-forest { --decor-image: url("theme-decor/assets/backgrounds/forest-world-landscape-v2.webp"); }
  .world-scene.decor-theme-arctic { --decor-image: url("theme-decor/assets/backgrounds/arctic-landscape.webp"); }
}
.world-scene .theme-decor-field {
  inset: -18px;
  opacity: .88;
  transform: translate3d(calc(var(--world-x) * -.5),calc(var(--world-y) * -.5),0) scale(1.025);
  filter: saturate(.83);
}
.world-scene .theme-decor-field::before,.world-scene .theme-decor-field::after { display: none; }
.world-scene .theme-decor-scrim {
  opacity: 1;
  background: linear-gradient(180deg,color-mix(in srgb,var(--bg-base) 48%,transparent),transparent 30%,color-mix(in srgb,var(--bg-base) 22%,transparent)),radial-gradient(ellipse at 52% 45%,color-mix(in srgb,var(--bg-base) 24%,transparent),transparent 72%);
}
.world-scene .theme-decor-sprites {
  transform: translate3d(calc(var(--world-x) * 1.3),calc(var(--world-y) * 1.3),0);
}
.world-scene .theme-decor-foreground {
  left: -22px;right: -22px;bottom: -12px;
  height: clamp(140px,22vh,260px);
  opacity: .8;
  transform: translate3d(calc(var(--world-x) * 2.3),calc(var(--world-y) * 2),0) scale(1.035);
  filter: saturate(.78);
  mask-image: linear-gradient(transparent,#000 42%);
}
.world-scene .theme-decor-sprite { filter: saturate(.78); }
.world-scene .sprite-large,.world-scene .sprite-xl { opacity: .7; }
.world-atmosphere { position: absolute; inset: -24px; overflow: hidden; pointer-events: none; }
.world-volume,.world-haze,.world-caustics { position: absolute; inset: 0; pointer-events: none; }
.world-volume {
  background: conic-gradient(from 159deg at 76% -8%,transparent 0deg,color-mix(in srgb,var(--world-light) 17%,transparent) 7deg,transparent 14deg,color-mix(in srgb,var(--world-light) 9%,transparent) 20deg,transparent 27deg);
  transform-origin: 76% 0;
  animation: worldLightDrift 28s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.world-haze {
  inset: 40% -15% -15%;
  background: radial-gradient(ellipse at 15% 72%,color-mix(in srgb,var(--world-light) 11%,transparent),transparent 52%),radial-gradient(ellipse at 90% 80%,color-mix(in srgb,var(--bg-base) 55%,transparent),transparent 65%);
  animation: worldHazeDrift 36s ease-in-out infinite alternate;
}
.world-caustics { display: none; }
[data-world-light="water"] .world-caustics {
  display: block;inset: 62% -20% -40%;
  background: repeating-radial-gradient(ellipse at 22% 46%,transparent 0 24px,rgba(153,232,245,.13) 26px,transparent 30px 67px),repeating-radial-gradient(ellipse at 78% 18%,transparent 0 41px,rgba(207,246,255,.1) 43px,transparent 46px 91px);
  mask-image: linear-gradient(transparent,#000 40%,transparent);
  transform: perspective(420px) rotateX(55deg);
  animation: worldWaterLight 17s ease-in-out infinite alternate;
}
[data-world-light="space"] .world-volume,[data-world-light="moon"] .world-volume,[data-world-light="glass"] .world-volume {
  background: radial-gradient(ellipse at 75% 16%,color-mix(in srgb,var(--world-light) 16%,transparent),transparent 46%);
  animation-duration: 42s;
}
[data-world-light="aurora"] .world-volume {
  inset: -22% -15% 35%;background: conic-gradient(from 150deg at 45% 0%,transparent 0deg,rgba(100,230,194,.2) 14deg,transparent 29deg,rgba(129,130,231,.22) 40deg,transparent 57deg);
  mask-image: linear-gradient(transparent,#000 26%,transparent 95%);animation-duration: 34s;
}
[data-world-light="fire"] .world-volume {
  background: radial-gradient(ellipse at 42% 110%,rgba(255,126,46,.22),transparent 66%);
  animation: worldFirelight 8s ease-in-out infinite;
}
[data-world-light="sunset"] .world-volume { opacity: .65; animation-duration: 48s; }
[data-world-light="lamp"] .world-volume { background: radial-gradient(ellipse at 18% 70%,rgba(255,208,135,.15),transparent 44%);animation-duration: 18s; }
[data-world-light="neon"] .world-volume { background: radial-gradient(ellipse at 80% 28%,color-mix(in srgb,var(--world-light) 21%,transparent),transparent 48%);animation-duration: 22s; }
@keyframes worldLightDrift { from { transform: rotate(-3deg) translate3d(-8px,0,0); opacity: .5; } to { transform: rotate(3deg) translate3d(9px,0,0); opacity: 1; } }
@keyframes worldHazeDrift { from { transform: translate3d(-1.5%,-1%,0);opacity: .6; } to { transform: translate3d(2%,1%,0);opacity: 1; } }
@keyframes worldWaterLight { from { transform: perspective(420px) rotateX(55deg) scale(1.04);opacity: .35; } to { transform: perspective(420px) rotateX(52deg) scale(1.15) translate3d(16px,4px,0);opacity: .7; } }
@keyframes worldFirelight { 0%,100% { opacity: .4; } 17%,53% { opacity: .7; } 35%,76% { opacity: .54; } }

/* One material language: opaque enough to protect numbers, environmental rim
   light and a soft contact shadow, with no palette wash through the content. */
:root:not([data-theme="custom"]) body[data-world-theme] :where(.summary-card,.cat-bal-card,.bank-balance-card,.ties-out-card,.settings-card,.card-page-card,.analytics-card,.us-card,.savings-summary-card,.goal-card,.ret-card,.account-goal-card) {
  background-color: color-mix(in srgb,var(--bg-surface) 90%,transparent);
  border: 1px solid color-mix(in srgb,var(--world-light) 17%,var(--border));
  box-shadow: 0 14px 35px -16px rgba(0,0,0,.65),inset 0 1px 0 color-mix(in srgb,var(--world-light) 13%,transparent),inset 0 -1px 0 rgba(0,0,0,.16);
  backdrop-filter: blur(10px) saturate(105%);
  -webkit-backdrop-filter: blur(10px) saturate(105%);
}
body[data-world-theme="light"] .world-scene .theme-decor-scrim { background: linear-gradient(180deg,rgba(245,248,251,.45),rgba(245,248,251,.16) 45%,rgba(245,248,251,.3)); }
body[data-world-theme="slate"] .world-scene .theme-decor-field { opacity: .64; }
body[data-world-theme] .page-header { text-shadow: 0 1px 12px var(--bg-base); }
.world-motion-control { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 4px 0 20px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.world-motion-control label[for] { color: var(--text-primary); font-size: 14px; font-weight: 650; }
.world-motion-control p { color: var(--text-secondary); font-size: 12px; line-height: 1.65; margin-top: 5px; }
.world-motion-control .sw { flex-shrink: 0; min-height: 44px; display: flex; align-items: center; }
.world-motion-control .sw-track { height: 24px; top: 10px; bottom: auto; }
.world-motion-control .sw:has(input:focus-visible) { outline: 2px solid var(--accent-primary);outline-offset: 3px; border-radius: 20px; }

.cr-inner.cr-articulated > img { visibility: hidden; animation: none !important; }
.cr-atlas { position: absolute; inset: 0; display: block; background-repeat: no-repeat; background-size: 800% 100%; animation: worldCreatureCycle var(--cycle,1.2s) steps(8,end) infinite; }
@keyframes worldCreatureCycle { to { background-position-x: calc(var(--cs,64px) * -8); } }
.cr-resting.cr-m-crawl .cr-atlas,.cr-resting.cr-m-trot .cr-atlas,.cr-resting.cr-m-waddle .cr-atlas { animation: worldCreatureBreath 6s ease-in-out infinite; background-position: 0 0; transform-origin: 50% 78%; }
.cr-resting.cr-m-swim .cr-atlas { animation-duration: 2.3s; }
.cr-resting.cr-m-glide .cr-atlas { animation-duration: 9s; }
@keyframes worldCreatureBreath { 50% { transform: scaleY(1.012); } }
body[data-world-theme] .theme-decor-creature { filter: drop-shadow(0 4px 5px rgba(0,0,0,.28)); }
body[data-world-theme="ocean"] .theme-decor-creature { filter: drop-shadow(0 2px 3px rgba(3,48,65,.2)); }
/* Quieten the original synthetic creatures too: intentional motion, no abrupt
   glitch/scale pulses. Their original artwork remains available as fallback. */
.cr-m-glitch img { animation: crFloat 5s ease-in-out infinite; }
.cr-m-buzz img { animation-duration: .22s; }

body[data-world-motion="paused"] .theme-decor-layer *,
body[data-world-motion="paused"] .theme-decor-layer *::before,
body[data-world-motion="paused"] .theme-decor-layer *::after,
.world-still-details *, .world-still-details *::before, .world-still-details *::after { animation-play-state: paused !important; }
body[data-world-motion="paused"] #theme-creature-layer { visibility: hidden; }
@media (prefers-reduced-motion:reduce) {
  .page.tab-enter > :not(.theme-decor-layer) { animation: none; }
  .world-scene *, .world-scene *::before, .world-scene *::after { animation: none !important; }
  .world-scene .theme-decor-field,.world-scene .theme-decor-sprites,.world-scene .theme-decor-foreground { transform: none; }
}
@media(max-width:768px) {
  .world-scene .theme-decor-field { opacity: .82; filter: none; }
  .world-scene .theme-decor-foreground { filter: none; }
  .world-scene .theme-decor-sprite { filter: none; }
  .world-volume { opacity: .6; }
  body[data-world-theme] :where(.cat-bal-card,.ret-card,.account-goal-card) { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
}