/* ============================================================
   Foresst Study — Premium Motion & Micro-interactions
   ============================================================ */

/* ── Ambient floating orbs ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background:
    radial-gradient(circle 280px at 8% 15%, rgba(82, 183, 136, 0.12) 0%, transparent 70%),
    radial-gradient(circle 220px at 92% 80%, rgba(45, 106, 79, 0.10) 0%, transparent 70%),
    radial-gradient(circle 180px at 50% 100%, rgba(212, 165, 116, 0.06) 0%, transparent 70%);
  animation: foresstAmbient 18s ease-in-out infinite alternate;
}

[data-theme="dark"] body::after {
  opacity: 0.35;
  background:
    radial-gradient(circle 300px at 10% 20%, rgba(82, 183, 136, 0.08) 0%, transparent 70%),
    radial-gradient(circle 240px at 90% 75%, rgba(45, 106, 79, 0.10) 0%, transparent 70%);
}

@keyframes foresstAmbient {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(12px, -8px) scale(1.02); }
  100% { transform: translate(-8px, 12px) scale(1); }
}

/* ── Brand logo pulse ── */
.sidebar__logo {
  animation: foresstLogoGlow 4s ease-in-out infinite;
}

@keyframes foresstLogoGlow {
  0%, 100% { box-shadow: var(--shadow-gold); }
  50%      { box-shadow: 0 0 28px rgba(82, 183, 136, 0.45), var(--shadow-gold); }
}

.sidebar__brand-btn:hover .sidebar__logo {
  transform: scale(1.06) rotate(-2deg);
  transition: transform var(--duration-normal) var(--ease-spring);
}

/* ── Sidebar subject items — stagger feel on hover ── */
.subject-item {
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal) var(--ease-out);
}

.subject-item:hover {
  transform: translateX(4px);
}

.subject-item.is-active {
  transform: translateX(2px);
}

/* ── Page transitions — smoother spring ── */
.main-content--exiting {
  opacity: 0;
  transform: translateY(12px) scale(0.992);
  filter: blur(2px);
  transition:
    opacity 200ms var(--ease-out),
    transform 280ms var(--ease-out),
    filter 200ms var(--ease-out);
}

.main-content--entering > * {
  animation: foresstPageEnter var(--duration-slow) var(--ease-out) both;
}

@keyframes foresstPageEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Welcome screen — hero entrance ── */
.welcome-screen__card {
  animation: foresstHeroCard 0.8s var(--ease-out) both;
}

.welcome-screen__icon {
  animation: foresstFloat 5s ease-in-out infinite;
}

.welcome-screen__hints .hint-chip {
  animation: foresstStaggerIn 0.6s var(--ease-out) both;
}

.welcome-screen__hints .hint-chip:nth-child(1) { animation-delay: 0.15s; }
.welcome-screen__hints .hint-chip:nth-child(2) { animation-delay: 0.25s; }
.welcome-screen__hints .hint-chip:nth-child(3) { animation-delay: 0.35s; }

.welcome-screen__quote {
  animation: foresstStaggerIn 0.7s var(--ease-out) 0.4s both;
}

@keyframes foresstHeroCard {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@keyframes foresstStaggerIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Dashboard stats stagger ── */
.global-dashboard .dash-stat {
  animation: foresstStaggerIn 0.5s var(--ease-out) both;
}

.global-dashboard .dash-stat:nth-child(1) { animation-delay: 0.05s; }
.global-dashboard .dash-stat:nth-child(2) { animation-delay: 0.10s; }
.global-dashboard .dash-stat:nth-child(3) { animation-delay: 0.15s; }
.global-dashboard .dash-stat:nth-child(4) { animation-delay: 0.20s; }

.dash-header {
  animation: foresstStaggerIn 0.55s var(--ease-out) both;
}

/* ── Workspace cards — magnetic hover ── */
.workspace-card {
  transition:
    transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.workspace-card:hover {
  transform: translateY(-6px) scale(1.01);
}

.workspace-card:active {
  transform: translateY(-2px) scale(0.99);
  transition-duration: var(--duration-fast);
}

/* ── Primary button shine ── */
.navbar__btn--primary,
.auth-submit {
  position: relative;
  overflow: hidden;
}

.navbar__btn--primary::after,
.auth-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out);
}

.navbar__btn--primary:hover::after,
.auth-submit:hover::after {
  transform: translateX(120%);
}

/* ── Navbar user avatar ring ── */
.navbar__user-btn {
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-out);
}

.navbar__user-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ── Toast slide-in ── */
.app-toast {
  animation: foresstToastIn 0.45s var(--ease-spring) both;
}

@keyframes foresstToastIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Search bar focus bloom ── */
.search-bar {
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.search-bar:focus-within {
  transform: scale(1.01);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body::after {
    animation: none;
  }
}