/* selfLove.Yoga — 09 Tech-Forward SaaS Dashboard — shared stylesheet */

:root{
  --navy: #0F172A;
  --navy-light: #16213B;
  --navy-lighter: #1E293B;
  --cloud: #F8FAFC;
  --cyan: #22D3EE;
  --violet: #A78BFA;
  --slate: #E2E8F0;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Manrope', sans-serif;
  background-color: var(--navy);
  color: var(--slate);
}

.font-mono-num{ font-family:'JetBrains Mono', monospace; }

/* animated gradient accent blobs */
.gradient-orb{
  position:absolute;
  border-radius:9999px;
  filter: blur(90px);
  opacity:0.45;
  background: radial-gradient(circle at 30% 30%, var(--cyan), transparent 60%);
  animation: float-orb 14s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
.gradient-orb.orb-violet{
  background: radial-gradient(circle at 30% 30%, var(--violet), transparent 60%);
  animation-duration: 18s;
  animation-delay: -4s;
}
@keyframes float-orb{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(30px,-40px) scale(1.1); }
  66%{ transform: translate(-25px,25px) scale(0.95); }
}

.bg-grid{
  background-image:
    linear-gradient(rgba(226,232,240,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,232,240,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* animated gradient text */
.gradient-text{
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--cyan));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 6s linear infinite;
}
@keyframes gradient-shift{
  0%{ background-position: 0% center; }
  100%{ background-position: 200% center; }
}

/* scroll reveal — token values (--ease-out-expo / --duration-base) live in taste.css,
   which loads after this file; CSS custom properties resolve at compute time
   regardless of load order, so referencing them here is safe. */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity var(--duration-base, 250ms) var(--ease-out-expo, ease),
              transform var(--duration-base, 250ms) var(--ease-out-expo, ease);
}
.reveal.in-view{
  opacity:1;
  transform: translateY(0);
}

/* card hover lift — transform-only, 150ms, ease-out-expo (spec section 4) */
.hover-lift{
  transition: transform var(--duration-fast, 150ms) var(--ease-out-expo, ease),
              box-shadow var(--duration-fast, 150ms) var(--ease-out-expo, ease),
              border-color var(--duration-fast, 150ms) var(--ease-out-expo, ease);
}
.hover-lift:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 32px -16px rgba(34,211,238,0.25);
}

/* glass nav */
.glass-nav{
  background: rgba(15,23,42,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* progress ring — value-fill entrance, ease-out-expo (spec section 4).
   stroke-dashoffset is the one standard exception to transform/opacity-only:
   it's the only way to paint an arc "filling in" and, being an SVG paint
   property, it doesn't trigger layout/reflow the way top/left/width/margin do. */
.progress-ring circle{
  transition: stroke-dashoffset var(--duration-slow, 400ms) var(--ease-out-expo, ease);
}

/* pulsing live dot */
.live-dot{
  box-shadow: 0 0 0 0 rgba(34,211,238,0.7);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow: 0 0 0 0 rgba(34,211,238,0.55); }
  70%{ box-shadow: 0 0 0 10px rgba(34,211,238,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--navy); }
::-webkit-scrollbar-thumb{ background: var(--navy-lighter); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background: var(--cyan); }

/* toast — spring-signature entrance, ease-out-expo exit (spec section 4) */
#toast{
  transition: transform var(--duration-slow, 400ms) var(--ease-spring, ease),
              opacity var(--duration-base, 250ms) var(--ease-out-expo, ease);
}

/* accordion chevron rotate — state change, ease-in-out-quart (spec section 4) */
.accordion-chevron{ transition: transform var(--duration-base, 250ms) var(--ease-in-out-quart, ease); }
.accordion-open .accordion-chevron{ transform: rotate(180deg); }
.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition: max-height var(--duration-slow, 400ms) var(--ease-in-out-quart, ease);
}

/* mobile menu — state change, ease-in-out-quart */
#mobile-menu{
  max-height:0;
  overflow:hidden;
  transition: max-height var(--duration-slow, 400ms) var(--ease-in-out-quart, ease);
}
#mobile-menu.open{ max-height: 600px; }

/* badge pop animation — spring signature (gesture-adjacent feedback) */
@keyframes badge-pop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.3); }
  100%{ transform: scale(1); }
}
.badge-pop{ animation: badge-pop var(--duration-slow, 400ms) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)); }

.chip{
  border:1px solid rgba(226,232,240,0.15);
}
.chip.active{
  background: var(--cyan);
  color: var(--navy);
  border-color: var(--cyan);
  font-weight:700;
}