/* ============================================================
   Ciara Disainisüsteemi täiendused
   Motion, Dark Mode, Stage Colors, Accessibility
   ============================================================ */

/* ── Disainimuutujad: astmete värvid ──────────────────────── */
:root {
  /* Stage accent colors -- järjekindel kogu rakenduses */
  --stage-eelkool: #F4C2C8;      /* Roosa -- mänguline */
  --stage-eelkool-dark: #D99AA4;
  --stage-i-aste: #B8D4E8;        /* Sinine -- avastav */
  --stage-i-aste-dark: #88AFCB;
  --stage-ii-aste: #B3C4A8;       /* Salvia -- arenev */
  --stage-ii-aste-dark: #8BA37C;
  --stage-iii-aste: #7A3B50;      /* Burgundia -- süvenev */
  --stage-iii-aste-dark: #552838;

  /* Motion tokens */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --motion-stage: 600ms;
  --ease-dance: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-theatre: cubic-bezier(0.25, 1, 0.5, 1);

  /* Shadows */
  --shadow-breathing: 0 4px 16px rgba(122, 59, 80, 0.08);
  --shadow-breathing-hover: 0 8px 28px rgba(122, 59, 80, 0.16);
}

/* ── Dark Mode ─────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg-primary: #1a1419;
  --bg-secondary: #221a21;
  --bg-tertiary: #2d242b;
  --text-primary: #f5ede9;
  --text-secondary: #d4c3c1;
  --text-tertiary: #a89797;
  --border-light: rgba(245, 237, 233, 0.1);
  --border-medium: rgba(245, 237, 233, 0.18);

  --color-petrool: #7BA5B0;
  --color-burgundy: #C98597;
  --color-gold: #D4B76A;
  --color-korall: #E09B84;
  --accent-sage: #9BB08E;
  --accent-sage-dark: #BFD0B2;
  --accent-lavender-dark: #C5A8D0;

  --shadow-breathing: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-breathing-hover: 0 8px 28px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .glass-card {
  background: var(--bg-secondary);
  border-color: var(--border-medium);
}

:root[data-theme="dark"] .header {
  background: rgba(26, 20, 25, 0.85);
  border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .login-input {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

:root[data-theme="dark"] .blob-bg .blob {
  opacity: 0.15;
  filter: blur(100px);
}

:root[data-theme="dark"] .login-overlay {
  background: rgba(10, 6, 9, 0.92);
}

:root[data-theme="dark"] .auth-tabs,
:root[data-theme="dark"] .auth-contact-toggle {
  background: rgba(245, 237, 233, 0.05);
}
:root[data-theme="dark"] .auth-tab.active,
:root[data-theme="dark"] .auth-contact-btn.active {
  background: var(--bg-tertiary);
  color: var(--color-gold);
}

/* ── Dark Mode Toggle Button ───────────────────────────────── */
.theme-toggle {
  position: relative;
  background: transparent;
  border: 1.5px solid var(--border-medium);
  border-radius: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-base) var(--ease-dance);
  padding: 0;
  color: var(--text-secondary);
}
.theme-toggle:hover {
  border-color: var(--color-gold);
  transform: rotate(15deg);
  color: var(--color-gold);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--motion-slow) var(--ease-spring);
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon,
:root:not([data-theme]) .theme-toggle .icon-moon { display: none; }

/* ── Motion: Button breathing + interactive feedback ───────── */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}

.btn,
button:not(.tab):not(.auth-tab):not(.auth-contact-btn):not(.theme-toggle):not(.reflection-close) {
  transition:
    transform var(--motion-fast) var(--ease-spring),
    box-shadow var(--motion-base) var(--ease-dance),
    background var(--motion-base) var(--ease-dance),
    filter var(--motion-base) var(--ease-dance);
}
.btn:hover:not(:disabled),
button:not(.tab):not(.auth-tab):not(.theme-toggle):hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-breathing-hover);
}
.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
  transition-duration: 80ms;
}
.btn-primary:not(:disabled):hover {
  filter: brightness(1.08);
}

/* Cards: subtle float on hover */
.card {
  transition:
    transform var(--motion-base) var(--ease-dance),
    box-shadow var(--motion-base) var(--ease-dance),
    border-color var(--motion-base) var(--ease-dance);
  box-shadow: var(--shadow-breathing);
}
.card:hover:not(.card-static) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-breathing-hover);
}

/* Quest cards: pulse when new */
@keyframes quest-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 155, 94, 0); }
  50% { box-shadow: 0 0 0 8px rgba(184, 155, 94, 0.15); }
}
.quest-card:not(.completed) {
  position: relative;
}
.quest-card:not(.completed):hover {
  transform: translateY(-3px) scale(1.01);
  transition: transform var(--motion-fast) var(--ease-spring);
}
.quest-card.just-completed {
  animation: quest-pulse 1s var(--ease-dance);
}

/* ── Page transitions ─────────────────────────────────────── */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
main.page {
  animation: page-enter var(--motion-slow) var(--ease-theatre);
}

/* Stage-reveal animation (sections enter like dancers on stage) */
@keyframes stage-reveal {
  from {
    opacity: 0;
    transform: translateX(-20px);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}
.stage-reveal {
  animation: stage-reveal var(--motion-stage) var(--ease-theatre) both;
}

/* Count-up animation for XP numbers */
@keyframes number-tick {
  from { transform: scale(1.3); color: var(--color-gold); }
  to { transform: scale(1); color: inherit; }
}
.number-tick {
  display: inline-block;
  animation: number-tick var(--motion-slow) var(--ease-spring);
}

/* ── Loading: dancer spinner (not a plain circle) ─────────── */
@keyframes dancer-spin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.dancer-spinner {
  width: 48px;
  height: 48px;
  position: relative;
  display: inline-block;
  animation: dancer-spin 1.2s var(--ease-dance) infinite;
}
.dancer-spinner::before,
.dancer-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}
.dancer-spinner::before {
  border-top-color: var(--color-burgundy);
  border-right-color: var(--color-gold);
  animation: dancer-spin 1.2s var(--ease-theatre) infinite reverse;
}
.dancer-spinner::after {
  border-bottom-color: var(--color-petrool);
  inset: 6px;
  animation: dancer-spin 0.8s var(--ease-dance) infinite;
}

/* ── Stage accent system: classes for stage-specific coloring ── */
.stage-accent-eelkool { --stage-color: var(--stage-eelkool); --stage-color-dark: var(--stage-eelkool-dark); }
.stage-accent-i-aste { --stage-color: var(--stage-i-aste); --stage-color-dark: var(--stage-i-aste-dark); }
.stage-accent-ii-aste { --stage-color: var(--stage-ii-aste); --stage-color-dark: var(--stage-ii-aste-dark); }
.stage-accent-iii-aste { --stage-color: var(--stage-iii-aste); --stage-color-dark: var(--stage-iii-aste-dark); }

.stage-accent-eelkool .tab.active,
.stage-accent-i-aste .tab.active,
.stage-accent-ii-aste .tab.active,
.stage-accent-iii-aste .tab.active {
  border-bottom-color: var(--stage-color-dark);
}

.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--stage-color);
  color: var(--stage-color-dark);
  border: 1px solid var(--stage-color-dark);
}

/* ── Reduced motion: respect user preference ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .dancer-spinner { animation: none; opacity: 0.5; }
}

/* ── Large text mode (for younger dancers or accessibility) ── */
:root[data-text-size="large"] {
  font-size: 112%;
}
:root[data-text-size="large"] .login-card p,
:root[data-text-size="large"] .card p {
  line-height: 1.65;
}

/* ── Utility: skip to content ─────────────────────────────── */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--color-burgundy);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  z-index: 9999;
  text-decoration: none;
}
.skip-to-content:focus {
  top: 8px;
}

/* ── Micro-notification toast variants ────────────────────── */
.toast.toast-success { border-left: 3px solid var(--accent-sage-dark); }
.toast.toast-milestone {
  border-left: 3px solid var(--color-gold);
  background: linear-gradient(90deg, rgba(184,155,94,0.08), rgba(255,255,255,1));
}
.toast.toast-reflection { border-left: 3px solid var(--color-petrool); }
.toast.toast-gentle { border-left: 3px solid rgba(179, 196, 168, 0.5); }

/* ── Context dashboard cards ──────────────────────────────── */
.ctx-card {
  padding: 24px 28px;
  border-radius: 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary, #fff);
  animation: stage-reveal var(--motion-stage) var(--ease-theatre) both;
}
.ctx-card .ctx-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.ctx-card h3 { margin: 0 0 4px; font-size: 1.3rem; color: var(--color-burgundy); }
.ctx-card p { margin: 0; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.55; }

.ctx-card--rest {
  background: linear-gradient(135deg, rgba(179,196,168,0.18), rgba(253,250,246,0.5));
  border-left: 3px solid var(--accent-sage);
}
.ctx-card--rest .ctx-label { color: var(--accent-sage-dark); }

.ctx-card--event {
  background: linear-gradient(135deg, rgba(184,155,94,0.14), rgba(253,250,246,0.5));
  border-left: 3px solid var(--color-gold);
}
.ctx-card--event .ctx-label { color: #8b7117; }

.ctx-card--reflect {
  background: linear-gradient(135deg, rgba(10,78,90,0.08), rgba(253,250,246,0.5));
  border-left: 3px solid var(--color-petrool);
}
.ctx-card--reflect .ctx-label { color: var(--color-petrool); }

.ctx-card--morning {
  background: linear-gradient(135deg, rgba(224,122,95,0.1), rgba(253,250,246,0.5));
  border-left: 3px solid var(--color-korall);
}
.ctx-card--morning .ctx-label { color: var(--color-korall); }

.ctx-card--inspire {
  background: linear-gradient(135deg, rgba(122,59,80,0.08), rgba(253,250,246,0.5));
  border-left: 3px solid var(--color-burgundy);
}
.ctx-card--inspire .ctx-label { color: var(--color-burgundy); }

.card-action {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  transition: transform var(--motion-base) var(--ease-spring);
}
.card-action:hover {
  transform: translateY(-3px);
  border-color: var(--color-gold);
}
.card-action-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-burgundy);
  margin-bottom: 4px;
}
.card-action-sub {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* ── Mood button hover ──────────────────────────────────── */
.mood-btn:hover {
  border-color: var(--color-gold) !important;
  background: rgba(184,155,94,0.05) !important;
  transform: translateY(-2px);
}

/* ── Skill Tree ─────────────────────────────────────────── */
.skill-tree { padding: var(--space-lg) var(--space-md); }
.skill-tree-inner {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 0;
}
.skill-tree-trunk {
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--stage-eelkool) 0%, var(--stage-i-aste) 35%, var(--stage-ii-aste) 65%, var(--stage-iii-aste) 100%);
  border-radius: 3px;
  opacity: 0.4;
}
.skill-node {
  position: relative;
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  animation: stage-reveal 0.6s var(--ease-theatre) both;
}
.skill-node-dot {
  flex: 0 0 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--node-color, var(--color-burgundy));
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 4px 14px rgba(44, 42, 48, 0.15);
  position: relative;
  z-index: 2;
  transition: transform var(--motion-base) var(--ease-spring);
}
.skill-node-dot:hover { transform: scale(1.08); }
.skill-node-card {
  flex: 1;
  background: var(--bg-secondary, #fff);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px 18px;
  transition: all var(--motion-base) var(--ease-dance);
}
.skill-node-card:hover { box-shadow: var(--shadow-breathing-hover); transform: translateX(4px); }
.skill-node-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.skill-node--locked .skill-node-dot { background: rgba(0,0,0,0.15); }
.skill-node--locked .skill-node-card { opacity: 0.55; filter: grayscale(0.6); }
.skill-node--master .skill-node-dot {
  background: linear-gradient(135deg, var(--color-gold), var(--color-burgundy));
  box-shadow: 0 0 0 4px rgba(184,155,94,0.2), 0 6px 20px rgba(122,59,80,0.3);
}
.skill-node--master .skill-node-dot span { font-size: 1.3rem; }
.skill-node--active .skill-node-dot {
  animation: quest-pulse 2.5s ease-in-out infinite;
}

/* ── Body-map SVG helpers ───────────────────────────────── */
.body-map-dot {
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-spring);
}
.body-map-dot:hover { transform: scale(1.4); }
.body-map-dot.active { fill: var(--color-burgundy); }

/* Milestone toast: stage curtain effect */
.toast.toast-milestone::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(184,155,94,0.1) 50%, transparent 60%);
  background-size: 200% 200%;
  animation: shimmer 1.5s var(--ease-theatre);
  pointer-events: none;
}
@keyframes shimmer {
  0% { background-position: 200% 200%; }
  100% { background-position: -200% -200%; }
}