/* Aurora backdrop, glass surfaces, and the shared motion vocabulary.
   Everything here is decoration behind the content — nothing in this file is
   interactive or load-bearing. */

/* ---- Aurora ------------------------------------------------------- */
/*
   Three large blurred gradient blobs drifting on independent cycles. Blurring
   an element this size is expensive to repaint, so each blob is promoted to
   its own layer and animated only on transform — the compositor then moves
   them without re-rasterising the blur every frame.
*/

.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #ffe8cc 0%, transparent 62%),
    var(--bg);
}

:root[data-theme='dark'] .aurora {
  background:
    radial-gradient(120% 90% at 50% -10%, #3a2109 0%, transparent 62%),
    var(--bg);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .34;
  will-change: transform;
}

:root[data-theme='dark'] .blob { opacity: .42; }

.blob-1 {
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  background: #ff9933;
  top: -12vh; left: -8vw;
  animation: drift1 22s ease-in-out infinite;
}

.blob-2 {
  width: 40vw; height: 40vw;
  min-width: 280px; min-height: 280px;
  background: #e8721a;
  top: 20vh; right: -10vw;
  animation: drift2 27s ease-in-out infinite;
}

.blob-3 {
  width: 34vw; height: 34vw;
  min-width: 240px; min-height: 240px;
  background: #1a7a35;
  bottom: -14vh; left: 25vw;
  animation: drift3 31s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, 8vh, 0) scale(1.14); }
}

@keyframes drift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-7vw, 10vh, 0) scale(.92); }
}

@keyframes drift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9vw, -7vh, 0) scale(1.18); }
}

/* Floating particle field, drawn on a canvas. */
#particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---- Glass -------------------------------------------------------- */

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-bor);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* A single bright edge along the top, the way light catches real glass. */
.glass-lit { position: relative; overflow: hidden; }

.glass-lit::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
}

/* ---- Shared motion ------------------------------------------------ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes shimmer {
  0%   { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}

.fade-up { animation: fadeUp .5s var(--ease-out) both; }
.floating { animation: float 4.5s ease-in-out infinite; }

/* Stagger helpers, so a group of elements arrives as a sequence rather than
   all at once. */
.d1 { animation-delay: .06s; }
.d2 { animation-delay: .13s; }
.d3 { animation-delay: .21s; }
.d4 { animation-delay: .3s; }
.d5 { animation-delay: .4s; }

/* Loading shimmer for the dashboard's pending state. */
.shimmer {
  background: linear-gradient(90deg,
    var(--glass) 25%, var(--glass-strong) 50%, var(--glass) 75%);
  background-size: 420px 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r);
}

/* ---- Ripple ------------------------------------------------------- */
/* Positioned from JS via custom properties at the click point. */

.ripple-host { position: relative; overflow: hidden; }

.ripple {
  position: absolute;
  left: var(--rx);
  top: var(--ry);
  width: 0; height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .38);
  pointer-events: none;
  animation: rippleOut .6s var(--ease-out) forwards;
}

@keyframes rippleOut {
  to { width: 320px; height: 320px; opacity: 0; }
}