/* The existing layout and approved logo stay intact; effects never take input. */
/* SOURCE-ADAPTED: Dhileep Kumar GM's AuroraBackground (21st.dev).
   Preserve its layered gradients, blur-3xl lights and 30/40/50-second paths.
   CSS owns the background; WebGL owns the orb only. */
.backdrop.living-sky::before {
  inset: 0; background: #030308; background-image: none;
  animation: none; transform: none; filter: none; opacity: 1;
}
.backdrop.living-sky::after {
  inset: 0; background: radial-gradient(circle, rgba(99,102,241,.2) 0%, transparent 80%),
    radial-gradient(circle, rgba(139,92,246,.2) 0%, transparent 80%);
  background-size: 100% 100%; opacity: .5; animation: auroraPulse 8s ease-in-out infinite;
}
.backdrop.living-sky .aurora {
  display: block; position: absolute; border-radius: 50%;
  filter: blur(64px); mix-blend-mode: screen; will-change: transform;
}
.backdrop.living-sky .aurora-a {
  top: -25%; left: -25%; right: auto; bottom: auto; width: 50%; height: 50%;
  background: #9333ea; opacity: .4; animation: auroraDriftA 30s ease-in-out infinite;
}
.backdrop.living-sky .aurora-b {
  top: auto; left: auto; right: -25%; bottom: -25%; width: 50%; height: 50%;
  background: #c026d3; opacity: .4; animation: auroraDriftB 40s ease-in-out infinite;
}
.backdrop.living-sky .aurora-c {
  top: 33.333%; left: 33.333%; right: auto; bottom: auto; width: 33.333%; height: 33.333%;
  background: #4338ca; opacity: .3; animation: auroraDriftC 50s ease-in-out infinite;
}
@keyframes auroraPulse { 0%,100% { opacity: .5; } 50% { opacity: .25; } }
@keyframes auroraDriftA {
  0%,100% { transform: translate(-50px,-20px) scale(1); }
  50% { transform: translate(50px,20px) scale(1.2); }
}
@keyframes auroraDriftB {
  0%,100% { transform: translate(50px,20px) scale(1); }
  50% { transform: translate(-50px,-20px) scale(1.3); }
}
@keyframes auroraDriftC {
  0%,100% { transform: translate(20px,-30px) rotate(0); }
  50% { transform: translate(-20px,30px) rotate(360deg); }
}
.app.space-resting .backdrop.living-sky::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .backdrop.living-sky::after, .backdrop.living-sky .aurora { animation: none; }
}
.welcome-bubble.living-orb { animation: none; }
.welcome-bubble.living-orb::before {
  inset: 14%; animation: none;
  background: radial-gradient(circle, rgba(4,10,31,.46) 0 45%, rgba(27,24,77,.3) 66%, transparent 74%);
  box-shadow: none;
}
.welcome-bubble.living-orb img.orb { visibility: hidden; }
.welcome-bubble.living-orb .welcome-search {
  background: rgba(13,18,49,.24); background-image: none;
  border: 1px solid rgba(198,230,255,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 14px rgba(171,145,255,.14), 0 8px 24px rgba(3,7,24,.2);
  opacity: 1;
}
.welcome-bubble.living-orb .welcome-search:focus-within {
  border-color: #d2f2ff; box-shadow: 0 0 0 3px rgba(115,222,255,.15), inset 0 1px 0 rgba(255,255,255,.3);
}
.welcome-bubble.living-orb .welcome-search svg { color: #d4e8ff; }
.welcome-bubble.living-orb .welcome-search input::placeholder { color: rgba(240,246,255,.82); }
.rising-field { display: block; overflow: hidden; pointer-events: none; }
.rising-field .rising-bubble {
  pointer-events: auto; overflow: visible; padding: 3px; opacity: .92;
  background: linear-gradient(145deg, rgba(211,240,255,.52), rgba(121,135,242,.1), rgba(223,154,255,.4));
  border: 1px solid rgba(191,217,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px rgba(4,9,32,.4), 0 0 18px rgba(137,150,255,.12);
}
.rising-field .rising-bubble img {
  display: block; border-radius: 50%; object-fit: contain; background: rgba(247,249,255,.96); transform: none;
  filter: none; opacity: .9;
}
.rising-field .rising-bubble::after {
  content: ""; display: block; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1; transform: none; animation: none;
  background: radial-gradient(ellipse at 28% 14%, rgba(255,255,255,.8), rgba(230,246,255,.15) 16%, transparent 38%),
    radial-gradient(ellipse at 82% 88%, rgba(209,164,255,.23), transparent 50%);
  box-shadow: inset 1px 2px 3px rgba(236,250,255,.55), inset -2px -3px 8px rgba(97,73,173,.3);
  opacity: .55; transition: opacity 180ms ease;
}
.rising-field .rising-bubble:is(:focus-visible, .is-hovered)::after { opacity: .85; transform: none; animation: none; }
.rising-field .rising-bubble:focus-visible { outline: 2px solid #d3f3ff; outline-offset: 5px; }
.rising-field .rising-bubble:is(:focus-visible, .is-hovered) {
  border-color: rgba(218,240,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 10px 28px rgba(4,9,32,.45), 0 0 22px rgba(173,153,255,.32);
}
.resource-label {
  position: absolute; top: calc(100% + 8px); left: calc(50% + var(--label-offset, 0px)); transform: translateX(-50%);
  width: max-content; max-width: min(180px, calc(100vw / 3 - 16px)); padding: 6px 10px; border-radius: 12px;
  background: rgba(8,13,35,.94); border: 1px solid rgba(174,202,255,.25);
  color: #edf5ff; font: 11px/1.35 var(--font-body); text-align: center;
  pointer-events: none; opacity: 0; transition: opacity 160ms ease;
}
.rising-field .rising-bubble:is(:focus-visible, .is-hovered) .resource-label { opacity: 1; }
.rising-field .rising-bubble:is(:focus-visible, .is-hovered) { animation-play-state: paused; z-index: 5; }
@keyframes resourceRise {
  0% { transform: translate3d(0, var(--rise-start, 100vh), 0); opacity: 0; }
  10%, 90% { opacity: .92; }
  100% { transform: translate3d(0, var(--rise-end, -20vh), 0); opacity: 0; }
}
.rising-field .rising-bubble:is(:focus-visible, .is-hovered) { opacity: .92 !important; }
@media (prefers-reduced-motion: reduce) {
  .rising-field .rising-bubble { animation: none; }
}
#orbCanvas {
  position: absolute; inset: -7%; width: 114%; height: 114%;
  z-index: 1; pointer-events: none;
}
.app.space-resting .backdrop::before,
.app.space-resting .aurora,
.app.space-resting .welcome-bubble,
.app.space-resting .welcome-bubble::before,
.app.space-resting .rising-bubble { animation-play-state: paused; }

.rising-bubble.preview-unavailable::before { content: "Preview"; position: absolute; inset: 0; display: grid; place-items: center; color: #d8eaff; font: 11px var(--font-body); }

/* Native lettering and search float as one group, independent of canvas resolution. */
.welcome-bubble.living-orb .welcome-content {
  animation: crystalContentFloat 12s ease-in-out infinite;
}
@keyframes crystalContentFloat {
  0%,100% { transform: translate3d(-1px, 2px, 0); }
  50% { transform: translate3d(1px, -3px, 0); }
}

/* Generated crystal art stays at native DOM resolution. A masked sheen lights
   the actual image silhouette; the low-resolution orb never rasterizes the mark. */
.trove-wordmark { position: relative; width: 100%; max-width: 360px; margin: 0 0 18px; }
.trove-wordmark img { display: block; width: 100%; height: auto; }
.trove-wordmark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.65) 45%, rgba(152,241,255,.5) 50%, transparent 64%);
  background-size: 260% 100%; mix-blend-mode: screen;
  -webkit-mask: url('/assets/trove-wordmark-glass-v2.png') center / 100% 100% no-repeat;
  mask: url('/assets/trove-wordmark-glass-v2.png') center / 100% 100% no-repeat;
  animation: wordmarkSheen 9s ease-in-out infinite;
}
@keyframes wordmarkSheen { 0%,100% { background-position: 120% 50%; opacity: .12; } 50% { background-position: -20% 50%; opacity: .7; } }

/* 21st.dev Rainbow Borders: cycling 400% gradient, adapted as a glass rim. */
.welcome-bubble .welcome-search {
  position: relative; isolation: isolate; border-color: transparent;
}
.welcome-bubble .welcome-search::before,
.welcome-bubble .welcome-search::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  pointer-events: none; background: linear-gradient(45deg,#fb0094,#586bff,#5ceac7,#fff09e,#ff91b5,#fb0094,#586bff,#5ceac7,#fff09e,#ff91b5);
  background-size: 400% 100%; animation: searchRainbow 60s linear infinite;
}
.welcome-bubble .welcome-search::before {
  padding: 1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.welcome-bubble .welcome-search::after { inset: -3px; z-index: -1; filter: blur(15px); opacity: .22; }
.welcome-bubble .welcome-search:focus-within::after { opacity: .4; }
@keyframes searchRainbow { 0%,100% { background-position: 0 0; } 50% { background-position: 400% 0; } }
.welcome-bubble .welcome-search input { font-size: clamp(11px, 2.7vw, 14px); }

/* 21st.dev Fluid Menu: a small circle blooms into three glass satellites. */
.welcome .welcome-portals {
  top: calc(50% + var(--orb-size) / 2 + 24px); margin: 0;
  width: 44px; height: 44px; display: block; z-index: 6;
}
.welcome-portals .workspace-trigger {
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 28% 20%,rgba(220,239,255,.24),rgba(123,124,237,.13) 45%,rgba(19,22,50,.8));
  border-color: rgba(205,224,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 4px 18px rgba(37,23,89,.25);
}
.workspace-trigger svg { width: 19px; height: 19px; transition: transform 300ms cubic-bezier(.4,0,.2,1); }
.workspace-trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.workspace-actions {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 20px; width: max-content;
}
.workspace-actions[hidden] { display: none; }
.workspace-actions .portal {
  position: relative; overflow: visible; flex: none; width: 48px; height: 48px;
  min-height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  animation: satelliteReveal 300ms cubic-bezier(.4,0,.2,1) both;
}
.workspace-actions .portal:nth-child(1) { --satellite-x: 68px; }
.workspace-actions .portal:nth-child(2) { --satellite-x: 0px; animation-delay: 30ms; }
.workspace-actions .portal:nth-child(3) { --satellite-x: -68px; animation-delay: 60ms; }
.workspace-actions .portal > span:not(.control-luster) {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
  color: #e2e7ff; font: 10px/1.2 var(--font-body); white-space: nowrap;
  text-shadow: 0 1px 6px #060510;
}
@keyframes satelliteReveal {
  from { transform: translate(var(--satellite-x), -56px) scale(.7); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.app.space-resting .trove-wordmark::after,
.app.space-resting .welcome-search::before,
.app.space-resting .welcome-search::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .trove-wordmark::after, .welcome-search::before, .welcome-search::after,
  .workspace-actions .portal { animation: none; }
  .workspace-trigger svg { transition: none; }
}
.welcome-bubble.living-orb .welcome-content:focus-within,
.app.space-resting .welcome-bubble.living-orb .welcome-content { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .welcome-bubble.living-orb .welcome-content { animation: none; }
}

.welcome-content { width: 80%; }
.welcome-search { max-width: 360px; padding: 0 12px; gap: 6px; }
@media (max-width: 520px) { .welcome-search { padding: 0 10px; } }

@media (max-height: 850px) and (min-width: 600px) { .welcome { --orb-size: clamp(310px, min(64vh, 72vw), 600px); } }

/* Keep the rise transform on its own layer, avoiding hover filter/compositor
   changes. Light changes happen on the shell without replacing its rise. */
.rising-field .rising-bubble:is(:hover, :focus-visible, .is-hovered) { filter: none; opacity: .92 !important; }
.rising-field .rising-bubble:is(:hover, :focus-visible, .is-hovered) img { transform: none; filter: none; }
.rising-field .rising-bubble:is(:hover, :focus-visible, .is-hovered)::after { transform: none; animation: none; opacity: .85; }
.rising-field .rising-bubble::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 40deg,rgba(152,245,255,.65),transparent 16%,rgba(227,156,255,.65) 40%,transparent 58%,rgba(175,218,255,.6) 80%,rgba(152,245,255,.65));
  padding: 3px; -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.rising-field .rising-bubble::after {
  background: radial-gradient(ellipse at 28% 18%,rgba(255,255,255,.9),rgba(232,249,255,.25) 13%,transparent 32%),
    radial-gradient(ellipse at 74% 86%,rgba(169,212,255,.32),transparent 40%),
    radial-gradient(circle at 50% 50%,transparent 55%,rgba(81,52,137,.28) 78%,rgba(225,240,255,.55) 96%);
  box-shadow: inset 2px 3px 5px rgba(240,252,255,.7), inset -3px -4px 8px rgba(81,66,158,.3);
}
.rising-bubble.preview-unavailable::before { content: ""; }