/* ===== Teach Ko (training) ===== */
.teach-bar {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.teach-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-mid);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.teach-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-hi); }
.teach-btn.up.active   { background: rgba(34,197,94,0.18); color: #4ade80; border-color: rgba(34,197,94,0.4); }
.teach-btn.down.active { background: rgba(251,113,133,0.18); color: #fb7185; border-color: rgba(251,113,133,0.4); }
.teach-btn.teach {
  background: linear-gradient(110deg, rgba(251,191,36,0.18), rgba(168,139,250,0.18));
  border-color: rgba(251,191,36,0.35);
  color: #fcd34d;
  font-weight: 600;
  text-decoration: none;
}
.taught-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: #4ade80;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: auto;
}
.taught-badge::before { content: '✓'; font-weight: 700; }

/* Training screen — step cards */
.train-step {
  display: flex; gap: 12px; padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.train-step .n {
  flex: 0 0 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #fb7185);
  color: #0B0D11;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.train-step.done .n { background: linear-gradient(135deg, #4ade80, #22d3ee); }
.train-step h4 { margin: 0 0 4px; font-size: 14px; color: var(--text-hi); }
.train-step p  { margin: 0; font-size: 12px; color: var(--text-mid); }
.train-mic {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f472b6);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  margin: 12px auto;
  box-shadow: 0 0 40px rgba(251,191,36,0.45);
  animation: mic-pulse 2s ease-in-out infinite;
  cursor: pointer;
}
@keyframes mic-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ===== Animated gradient title ===== */
.kabyar-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  background: linear-gradient(
    110deg,
    #fcd34d 0%,
    #fb923c 18%,
    #f472b6 34%,
    #a78bfa 50%,
    #38bdf8 66%,
    #34d399 82%,
    #fcd34d 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: kabyar-shine 9s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(251,191,36,0.25));
}
.kabyar-title .my {
  font-weight: 700;
  background: linear-gradient(
    110deg,
    #38bdf8 0%,
    #a78bfa 25%,
    #f472b6 50%,
    #fbbf24 75%,
    #38bdf8 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: kabyar-shine 11s ease-in-out infinite reverse;
}
.kabyar-emoji {
  display: inline-block;
  font-size: 22px;
  margin-top: 6px;
  animation: emoji-bounce 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(251,191,36,0.4));
}
.kabyar-emoji .h1 { display: inline-block; animation: heart-beat 1.6s ease-in-out infinite; }
.kabyar-emoji .h2 { display: inline-block; animation: heart-beat 1.6s ease-in-out infinite; animation-delay: 0.4s; }
@keyframes kabyar-shine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes emoji-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.25); }
  40%      { transform: scale(0.95); }
  60%      { transform: scale(1.15); }
}

/* ===== Animated sunflower logo ===== */
.sunflower-logo {
  position: relative;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 18px rgba(251,191,36,0.55));
}
.sunflower-logo.sm { width: 36px; height: 36px; }
.sunflower-logo.lg { width: 96px; height: 96px; }

.sunflower-logo svg { width: 100%; height: 100%; overflow: visible; }
.sunflower-logo .petals,
.sunflower-logo .leaves,
.sunflower-logo .center {
  transform-origin: 50% 60%;
}
/* Single calm sway — no spinning, no individual petal animation */
.sunflower-logo svg > g.petals,
.sunflower-logo svg > circle.center {
  animation: sf-sway 7s ease-in-out infinite;
  transform-origin: 50px 60px;
}
@keyframes sf-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes sf-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== Bees & butterflies ===== */
.flyer {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}
.flyer svg { display: block; overflow: visible; }

/* Bee */
.bee .body { fill: #fbbf24; }
.bee .stripe { fill: #1f2937; }
.bee .wing {
  fill: rgba(255,255,255,0.7);
  transform-origin: 50% 100%;
  animation: wing-flap 0.12s ease-in-out infinite alternate;
}
@keyframes wing-flap { from { transform: scaleY(1) scaleX(0.85); } to { transform: scaleY(0.5) scaleX(1); } }

/* Butterfly */
.butterfly .wing-l, .butterfly .wing-r {
  transform-origin: 50% 50%;
  animation: bf-flap 0.5s ease-in-out infinite alternate;
}
.butterfly .wing-r { animation-delay: -0.25s; }
@keyframes bf-flap {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(60deg); }
}

/* Flight paths (CSS-only, looped) */
.path-1 { animation: fly-1 22s ease-in-out infinite; top: 12%; left: -8%; }
.path-2 { animation: fly-2 28s ease-in-out infinite; top: 38%; left: -8%; animation-delay: -6s; }
.path-3 { animation: fly-3 34s ease-in-out infinite; top: 64%; left: -8%; animation-delay: -14s; }
.path-4 { animation: fly-4 26s ease-in-out infinite; top: 22%; right: -8%; left: auto; animation-delay: -3s; }

@keyframes fly-1 {
  0%   { transform: translate(0, 0) rotate(8deg); }
  25%  { transform: translate(30vw, -8vh) rotate(-6deg); }
  50%  { transform: translate(60vw, 6vh) rotate(10deg); }
  75%  { transform: translate(85vw, -4vh) rotate(-4deg); }
  100% { transform: translate(120vw, 0) rotate(8deg); }
}
@keyframes fly-2 {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  30%  { transform: translate(35vw, 10vh) rotate(8deg); }
  60%  { transform: translate(70vw, -6vh) rotate(-10deg); }
  100% { transform: translate(120vw, 4vh) rotate(0deg); }
}
@keyframes fly-3 {
  0%   { transform: translate(0, 0) rotate(6deg); }
  40%  { transform: translate(40vw, -12vh) rotate(-8deg); }
  80%  { transform: translate(90vw, 8vh) rotate(6deg); }
  100% { transform: translate(120vw, 0) rotate(-4deg); }
}
@keyframes fly-4 {
  /* right→left */
  0%   { transform: translate(0, 0) rotate(-6deg); }
  35%  { transform: translate(-40vw, 10vh) rotate(8deg); }
  70%  { transform: translate(-80vw, -8vh) rotate(-10deg); }
  100% { transform: translate(-120vw, 4vh) rotate(0deg); }
}

/* ===== Background sunflowers (corners) ===== */
.bg-flora {
  position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden;
}
.bg-flora .sf-bg {
  position: absolute;
  width: 280px; height: 280px;
  opacity: 0.18;
  filter: blur(0.5px) drop-shadow(0 0 24px rgba(251,191,36,0.3));
}
.bg-flora .sf-bg.tl { top: -80px; left: -80px; animation: sf-spin 90s linear infinite; }
.bg-flora .sf-bg.br { bottom: -100px; right: -90px; width: 340px; height: 340px; opacity: 0.15;
  animation: sf-spin 120s linear infinite reverse; }
.bg-flora .sf-bg.mr { top: 35%; right: -130px; width: 220px; height: 220px; opacity: 0.10;
  animation: sf-spin 140s linear infinite; }

/* ===== Waterfall mist (subtle vertical streaks + glow) ===== */
.waterfall {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none; z-index: -1; overflow: hidden;
}
.waterfall::before, .waterfall::after {
  content: '';
  position: absolute; top: -20%; bottom: -20%;
  width: 240px;
  background:
    linear-gradient(180deg, transparent, rgba(165,243,252,0.08) 20%, rgba(165,243,252,0.12) 50%, rgba(165,243,252,0.08) 80%, transparent),
    repeating-linear-gradient(180deg, transparent 0px, rgba(255,255,255,0.04) 2px, transparent 4px);
  filter: blur(8px);
  animation: wf-fall 6s linear infinite;
  opacity: 0.55;
}
.waterfall::before { left: -60px; }
.waterfall::after  { right: -60px; animation-duration: 7.5s; }
@keyframes wf-fall {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 200px, 0 100px; }
}
/* Mist pool at the bottom */
.mist {
  position: fixed; left: 0; right: 0; bottom: 0; height: 220px;
  background: radial-gradient(ellipse at center bottom, rgba(165,243,252,0.10), transparent 70%);
  pointer-events: none; z-index: -1;
  animation: mist-pulse 8s ease-in-out infinite;
}
@keyframes mist-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ===== Weather + clock card ===== */
.wx-card {
  display: flex; flex-direction: column; gap: 10px;
}
.wx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wx-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700;
  color: var(--text-hi);
  letter-spacing: 1px;
}
.wx-time .sec { color: var(--cyan); font-size: 16px; }
.wx-date { color: var(--text-mid); font-size: 12px; margin-top: 2px; }
.wx-temp {
  font-size: 30px; font-weight: 700;
  background: linear-gradient(135deg, #fbbf24, #fb7185);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wx-cond { color: var(--text-mid); font-size: 12px; text-align: right; }
.wx-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }

/* 7-day forecast strip */
.wx-7 {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 8px 2px 2px;
  scrollbar-width: none;
}
.wx-7::-webkit-scrollbar { display: none; }
.wx-day {
  flex: 1 0 auto; min-width: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 6px; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  animation: wx-pop 600ms cubic-bezier(0.2,0.8,0.2,1) backwards;
}
.wx-day:nth-child(1) { animation-delay: 0ms; }
.wx-day:nth-child(2) { animation-delay: 80ms; }
.wx-day:nth-child(3) { animation-delay: 160ms; }
.wx-day:nth-child(4) { animation-delay: 240ms; }
.wx-day:nth-child(5) { animation-delay: 320ms; }
.wx-day:nth-child(6) { animation-delay: 400ms; }
.wx-day:nth-child(7) { animation-delay: 480ms; }
@keyframes wx-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.wx-day .d { color: var(--text-mid); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; }
.wx-day .ic { width: 22px; height: 22px; }
.wx-day .hi { color: var(--text-hi); font-size: 12px; font-weight: 700; }
.wx-day .lo { color: var(--text-lo); font-size: 10px; }

/* Sun bobbing icon */
.wx-sun { animation: sun-bob 5s ease-in-out infinite; }
@keyframes sun-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* Cloud drift */
.wx-cloud { animation: cloud-drift 8s ease-in-out infinite; }
@keyframes cloud-drift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* Rain fall */
.wx-drop { animation: rain-fall 1.2s linear infinite; }
@keyframes rain-fall { 0% { transform: translateY(-2px); opacity: 0.4; } 100% { transform: translateY(4px); opacity: 1; } }