/* ================================================================
   CLOCHE POLISH v2 — Micro-animations, Transitions & Delight
   Phase 2 of the visual overhaul — earthy, botanical, premium
   Performance-first: CSS transitions preferred, GPU-composited
   Fully respects prefers-reduced-motion
   ================================================================ */

/* ── Keyframes ───────────────────────────────────────────────── */

@keyframes cp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cp-slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cp-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cp-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Botanical: gentle leaf breathe */
@keyframes cp-breathe {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(1.04); opacity: 0.85; }
}

/* Botanical: seedling grow (height reveal) */
@keyframes cp-grow-up {
  from { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  to   { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}

/* Loading: pulsing shimmer for skeleton states */
@keyframes cp-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Loading: gentle botanical pulse */
@keyframes cp-pulse-botanical {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 107, 53, 0.18); }
  50%       { box-shadow: 0 0 0 8px rgba(59, 107, 53, 0); }
}

/* Chat: typing dots bounce */
@keyframes cp-typing-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%            { transform: translateY(-5px); opacity: 1; }
}

/* Toast: slide up from bottom */
@keyframes cp-toast-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cp-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(20px) scale(0.95); }
}

/* Ripple on button press */
@keyframes cp-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* Number count reveal */
@keyframes cp-count-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card press feedback */
@keyframes cp-card-tap {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

/* ── Page Entrance ───────────────────────────────────────────── */

body.cp-page-enter {
  animation: cp-fade-in 0.35s ease both;
}

/* ── Scroll Reveal ───────────────────────────────────────────── */

.cp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.cp-reveal.cp-visible {
  opacity: 1;
  transform: translateY(0);
}

.cp-reveal-delay-1 { transition-delay: 0.08s; }
.cp-reveal-delay-2 { transition-delay: 0.16s; }
.cp-reveal-delay-3 { transition-delay: 0.24s; }
.cp-reveal-delay-4 { transition-delay: 0.32s; }
.cp-reveal-delay-5 { transition-delay: 0.40s; }

/* Stagger children of a reveal container */
.cp-reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cp-reveal-stagger.cp-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.cp-reveal-stagger.cp-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.07s; }
.cp-reveal-stagger.cp-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.14s; }
.cp-reveal-stagger.cp-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.21s; }
.cp-reveal-stagger.cp-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.28s; }
.cp-reveal-stagger.cp-visible > *:nth-child(n+6) { opacity: 1; transform: none; transition-delay: 0.35s; }

/* ── Button Micro-interactions ───────────────────────────────── */

/* Override existing btn transitions with richer versions */
.btn, button, [role="button"] {
  transition: background 0.18s ease, color 0.18s ease,
              transform 0.15s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, opacity 0.18s ease !important;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

/* Primary button: lift + deepen on hover */
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(59, 107, 53, 0.28) !important;
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0px) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(59, 107, 53, 0.18) !important;
  transition-duration: 0.08s !important;
}

/* Secondary / ghost: subtle press */
.btn-secondary:active:not(:disabled),
.btn-ghost:active:not(:disabled) {
  transform: scale(0.97) !important;
  transition-duration: 0.08s !important;
}

/* Destructive: shake-less, just press */
.btn-danger:active:not(:disabled) {
  transform: scale(0.97) !important;
  transition-duration: 0.08s !important;
}

/* Ripple element (injected by JS) */
.cp-ripple-el {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  width: 6px;
  height: 6px;
  pointer-events: none;
  animation: cp-ripple 0.55s linear forwards;
}

/* ── Card Polish ─────────────────────────────────────────────── */

/* Cards that should lift on hover */
.cp-card-hover {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  cursor: pointer;
}

.cp-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26, 46, 13, 0.10) !important;
}

.cp-card-hover:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 0.08s !important;
}

/* ── Loading Skeleton ────────────────────────────────────────── */

.cp-skeleton {
  background: linear-gradient(
    90deg,
    var(--cream-dark, #EDE8DF) 25%,
    rgba(237, 232, 223, 0.5) 50%,
    var(--cream-dark, #EDE8DF) 75%
  );
  background-size: 800px 100%;
  animation: cp-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
  user-select: none;
}

.cp-skeleton * { visibility: hidden; }

/* ── Botanical Loading State ─────────────────────────────────── */

/* Replaces spinners — a gentle pulsing leaf */
.cp-loading-botanical {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sage, #3B6B35);
  font-size: 0.88rem;
  font-weight: 500;
}

.cp-loading-botanical::before {
  content: "🌱";
  display: inline-block;
  animation: cp-breathe 1.4s ease-in-out infinite;
  font-size: 1.1rem;
}

/* Seedling grow loader (for section-level loading) */
.cp-loader-seedling {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--moss, #8DB580);
}

.cp-loader-seedling__stem {
  width: 3px;
  height: 32px;
  background: linear-gradient(to top, var(--sage, #3B6B35), var(--sage-light, #5A8F52));
  border-radius: 2px;
  transform-origin: bottom;
  animation: cp-grow-up 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.cp-loader-seedling__leaf {
  font-size: 1.8rem;
  animation: cp-breathe 2s ease-in-out infinite;
}

.cp-loader-seedling__text {
  font-size: 0.82rem;
  color: var(--moss, #8DB580);
  animation: cp-fade-in 0.5s 0.4s ease both;
}

/* ── Chat: Typing Indicator ──────────────────────────────────── */

.cp-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: white;
  border-radius: 20px 20px 20px 4px;
  box-shadow: 0 2px 8px rgba(26, 46, 13, 0.08);
  border: 1px solid var(--cream-dark, #EDE8DF);
  width: fit-content;
}

.cp-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss, #8DB580);
  animation: cp-typing-dot 1.2s ease-in-out infinite;
}

.cp-typing-dot:nth-child(1) { animation-delay: 0s; }
.cp-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.cp-typing-dot:nth-child(3) { animation-delay: 0.36s; }

/* ── Chat: Message Entrance ──────────────────────────────────── */

.cp-msg-new {
  animation: cp-slide-up 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.cp-msg-new.assistant {
  animation: cp-scale-in 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* ── Input Focus Glow ────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(59, 107, 53, 0.12) !important;
}

/* ── Toggle / Checkbox Animations ───────────────────────────── */

input[type="checkbox"] {
  transition: transform 0.15s ease !important;
}

input[type="checkbox"]:active {
  transform: scale(0.88) !important;
}

/* ── Tab Indicator ───────────────────────────────────────────── */

.cp-tabs-animated .tab {
  transition: background 0.22s ease, color 0.22s ease,
              box-shadow 0.22s ease !important;
}

/* ── Nav Links ───────────────────────────────────────────────── */

.nav-link, .bottom-nav-link, a {
  transition: background 0.18s ease, color 0.18s ease,
              transform 0.15s ease, opacity 0.18s ease !important;
}

/* ── Image Treatment ─────────────────────────────────────────── */

img.cp-img {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(26, 46, 13, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

img.cp-img:hover {
  transform: scale(1.015);
  box-shadow: 0 8px 28px rgba(26, 46, 13, 0.15);
}

/* ── Toast Notifications ─────────────────────────────────────── */

#cp-toast-container {
  position: fixed;
  bottom: 100px; /* above bottom nav */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.cp-toast {
  background: var(--soil, #1A2E0D);
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: 'Outfit', sans-serif;
  box-shadow: 0 4px 20px rgba(26, 46, 13, 0.25);
  animation: cp-toast-in 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  pointer-events: auto;
  max-width: 320px;
  text-align: center;
}

.cp-toast.cp-toast-success {
  background: var(--sage, #3B6B35);
}

.cp-toast.cp-toast-error {
  background: #C0392B;
}

.cp-toast.cp-toast-exit {
  animation: cp-toast-out 0.22s ease forwards;
}

/* ── Page Transition Fade ────────────────────────────────────── */

@keyframes cp-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.cp-page-leaving {
  animation: cp-fade-out 0.2s ease both;
  pointer-events: none;
}

/* ── Smooth scroll on all pages ──────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* ── Stat cards: number reveal ───────────────────────────────── */

.cp-stat-value-reveal {
  animation: cp-count-reveal 0.4s 0.1s ease both;
}

/* ── Empty states: botanical breathe ────────────────────────── */

.cp-empty-state-icon {
  display: inline-block;
  animation: cp-breathe 3s ease-in-out infinite;
  font-size: 3rem;
}

/* ── Section headers: gentle slide ──────────────────────────── */

.cp-section-header {
  animation: cp-slide-up 0.4s ease both;
}

/* ── List items: stagger on load ─────────────────────────────── */

.cp-list-stagger > *:nth-child(1)  { animation: cp-slide-up 0.3s 0.00s ease both; }
.cp-list-stagger > *:nth-child(2)  { animation: cp-slide-up 0.3s 0.05s ease both; }
.cp-list-stagger > *:nth-child(3)  { animation: cp-slide-up 0.3s 0.10s ease both; }
.cp-list-stagger > *:nth-child(4)  { animation: cp-slide-up 0.3s 0.15s ease both; }
.cp-list-stagger > *:nth-child(5)  { animation: cp-slide-up 0.3s 0.20s ease both; }
.cp-list-stagger > *:nth-child(6)  { animation: cp-slide-up 0.3s 0.25s ease both; }
.cp-list-stagger > *:nth-child(n+7){ animation: cp-slide-up 0.3s 0.30s ease both; }

/* ── Modal / overlay entrance ────────────────────────────────── */

.cp-modal-enter {
  animation: cp-scale-in 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* ── Status pills: pulse ─────────────────────────────────────── */

.cp-status-pulse {
  animation: cp-pulse-botanical 2s ease-in-out infinite;
}

/* ── PREFERS REDUCED MOTION ──────────────────────────────────── */
/* Respect user accessibility preference — disable all animations */

@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;
  }

  .cp-reveal,
  .cp-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .cp-skeleton {
    animation: none !important;
    background: var(--cream-dark, #EDE8DF) !important;
  }
}

/* ── Chat Page: Enhanced Animations ─────────────────────────── */

/* Springier message entrance — overrides the basic fadeUp */
.msg-row {
  animation: cp-chat-msg-in 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both !important;
}

@keyframes cp-chat-msg-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* User message: slide from right */
.msg-row.user {
  animation: cp-chat-user-in 0.25s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}

@keyframes cp-chat-user-in {
  from { opacity: 0; transform: translateX(12px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Enhanced typing dots (overrides native typingDot) */
@keyframes typingDot {
  0%, 80%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  40%            { transform: translateY(-5px) scale(1.1); opacity: 1; }
}

/* Typing bubble: gentle pulse border */
.typing-bubble {
  animation: cp-typing-bubble-in 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) both !important;
}

@keyframes cp-typing-bubble-in {
  from { opacity: 0; transform: scale(0.85) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Suggest chips: pop in staggered */
.msg-suggestions .suggest-chip {
  animation: cp-scale-in 0.2s ease both;
}

.msg-suggestions .suggest-chip:nth-child(1) { animation-delay: 0.05s; }
.msg-suggestions .suggest-chip:nth-child(2) { animation-delay: 0.10s; }
.msg-suggestions .suggest-chip:nth-child(3) { animation-delay: 0.15s; }
.msg-suggestions .suggest-chip:nth-child(4) { animation-delay: 0.20s; }
.msg-suggestions .suggest-chip:nth-child(n+5) { animation-delay: 0.25s; }

/* Suggest chip hover: grow + color */
.suggest-chip {
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease !important;
}

.suggest-chip:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 2px 8px rgba(59, 107, 53, 0.2) !important;
}

.suggest-chip:active {
  transform: scale(0.96) !important;
  transition-duration: 0.08s !important;
}

/* Welcome card: richer entrance */
.welcome-card {
  animation: cp-welcome-in 0.45s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}

@keyframes cp-welcome-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Emergence items: stagger in */
.emergence-item:nth-child(1) { animation: cp-slide-up 0.3s 0.15s ease both; }
.emergence-item:nth-child(2) { animation: cp-slide-up 0.3s 0.22s ease both; }
.emergence-item:nth-child(3) { animation: cp-slide-up 0.3s 0.29s ease both; }
.emergence-item:nth-child(n+4) { animation: cp-slide-up 0.3s 0.36s ease both; }

/* Chat input: focus glow */
.chat-input-field, .input-textarea, #chat-input, textarea.input-field {
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
              background 0.2s ease !important;
}

.chat-input-field:focus,
.input-textarea:focus,
#chat-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 107, 53, 0.12) !important;
}

/* Chat send button: bounce on hover */
.send-btn, #send-btn, [class*="send-btn"], button[aria-label="Send"] {
  transition: background 0.18s ease, transform 0.15s ease,
              box-shadow 0.18s ease, opacity 0.18s ease !important;
}

.send-btn:hover:not(:disabled),
#send-btn:hover:not(:disabled) {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 14px rgba(59, 107, 53, 0.3) !important;
}

.send-btn:active:not(:disabled),
#send-btn:active:not(:disabled) {
  transform: scale(0.95) !important;
  transition-duration: 0.08s !important;
}

/* ── Dashboard: Card stagger ─────────────────────────────────── */

/* PERMANENT FIX (bug #578361, 3rd regression in #579000): NO animation on greeting-bar.
   The cp-slide-down animation starts at opacity:0 with fill-mode:both.
   On mobile Safari, when JS changes display:none→block, the animation
   often fails to restart — element stays permanently invisible (opacity:0).
   The greeting-bar starts as display:none and is revealed by JS after auth;
   no entrance animation is needed. DO NOT re-add animation here.
   Also: DO NOT add overflow:hidden to .greeting-bar — will clip content rows. */
.greeting-bar {
  /* animation intentionally removed — was: cp-slide-down 0.35s ease both */
  /* PERMANENT: greeting bar must never clip — overflow:visible guaranteed by style.css */
}

/* Stat chips in dashboard */
.stats-row .stat-chip {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.stats-row .stat-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26, 46, 13, 0.1) !important;
}

/* ── Nav: smooth active state ────────────────────────────────── */

nav {
  transition: box-shadow 0.2s ease !important;
}

/* ── Bottom nav: active icon scale ──────────────────────────── */

.bottom-nav-btn, .nav-tab {
  transition: color 0.18s ease, background 0.18s ease,
              transform 0.15s ease !important;
}

.bottom-nav-btn.active, .nav-tab.active {
  transform: scale(1.05);
}

.bottom-nav-btn:active, .nav-tab:active {
  transform: scale(0.92) !important;
  transition-duration: 0.08s !important;
}

/* ── Modals / Sheets: spring entrance ───────────────────────── */

.modal-panel, .sheet-panel, .modal-content,
.bottom-sheet-panel, .action-sheet {
  transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1),
              opacity 0.3s ease !important;
}

/* ── Form transitions ────────────────────────────────────────── */

.form-group {
  transition: opacity 0.2s ease !important;
}

/* ── Page sections: gentle reveal on scroll ──────────────────── */

section, .section, .page-section {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ── Dashboard memory widget hover ──────────────────────────── */

.memory-widget {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.memory-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 46, 13, 0.08) !important;
}

.memory-q {
  transition: background 0.15s ease, border-color 0.15s ease,
              transform 0.12s ease !important;
}

.memory-q:hover {
  transform: translateX(3px);
}

.memory-q:active {
  transform: scale(0.98) !important;
}

/* ── Diagnostic card ─────────────────────────────────────────── */

.snap-diagnostic-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

/* snap-diag-btn already has transition, enhance it */
.snap-diag-btn {
  transition: background 0.18s ease, transform 0.15s ease,
              box-shadow 0.15s ease !important;
}

.snap-diag-btn:active:not(:disabled) {
  transform: scale(0.96) !important;
  transition-duration: 0.08s !important;
}

/* ── Diag modal: spring entrance ─────────────────────────────── */

.diag-modal {
  animation: cp-modal-slide-up 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}

@keyframes cp-modal-slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Link hover: underline slide ────────────────────────────── */

.underline-link {
  position: relative;
  text-decoration: none;
}

.underline-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 0.2s ease;
}

.underline-link:hover::after {
  width: 100%;
}

/* ── Pill / badge hover ──────────────────────────────────────── */

.pill, .badge, .tag, .chip, [class*="-pill"], [class*="-badge"] {
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}

/* ── Garden cards: image treatment ──────────────────────────── */

.plant-card img, .seed-card img, .garden-photo,
img[class*="card-img"], img[class*="plant-img"] {
  border-radius: 10px;
  transition: transform 0.25s ease !important;
}

.plant-card:hover img,
.seed-card:hover img {
  transform: scale(1.03);
}

/* ── Focus visible: accessible ring ─────────────────────────── */

:focus-visible {
  outline: 2px solid rgba(59, 107, 53, 0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Dividers: subtle fade ───────────────────────────────────── */

hr, .divider {
  opacity: 0.5;
}

/* ── Tooltips ────────────────────────────────────────────────── */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--soil, #1A2E0D);
  color: white;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ================================================================
   PHASE 2 — Targeted page & component polish
   Onboarding · Paywall · Progress · Landing · Step transitions
   ================================================================ */

/* ── Onboarding: choice card spring feedback ─────────────────── */

.choice {
  transition: border-color 0.18s ease, background 0.18s ease,
              transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease !important;
  will-change: transform;
}

.choice:active {
  transform: scale(0.96) !important;
  transition-duration: 0.08s !important;
}

/* Spring pop on selection */
.choice.selected {
  animation: cp-choice-select 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes cp-choice-select {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* ── Onboarding: screen slide transitions ───────────────────── */

@keyframes cp-screen-enter {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes cp-screen-leave {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}

.cp-screen-entering {
  animation: cp-screen-enter 0.28s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}

.cp-screen-leaving {
  animation: cp-screen-leave 0.2s ease forwards;
}

/* Progress bar fill animation */
@keyframes cp-progress-fill {
  from { width: 0 !important; }
}

.cp-progress-animated {
  animation: cp-progress-fill 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* ── Paywall: plan card stagger entrance ─────────────────────── */

.plan-card {
  transition: box-shadow 0.22s ease, transform 0.22s ease,
              border-color 0.18s ease !important;
}

.plan-card.cp-plan-reveal:nth-child(1) { animation: cp-slide-up 0.32s 0.05s cubic-bezier(0.34, 1.2, 0.64, 1) both; }
.plan-card.cp-plan-reveal:nth-child(2) { animation: cp-slide-up 0.32s 0.12s cubic-bezier(0.34, 1.2, 0.64, 1) both; }
.plan-card.cp-plan-reveal:nth-child(3) { animation: cp-slide-up 0.32s 0.19s cubic-bezier(0.34, 1.2, 0.64, 1) both; }
.plan-card.cp-plan-reveal:nth-child(4) { animation: cp-slide-up 0.32s 0.26s cubic-bezier(0.34, 1.2, 0.64, 1) both; }

/* Plan feature list: subtle stagger */
.plan-features li {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.plan-card.cp-features-visible .plan-features li:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.05s; }
.plan-card.cp-features-visible .plan-features li:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.10s; }
.plan-card.cp-features-visible .plan-features li:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.15s; }
.plan-card.cp-features-visible .plan-features li:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.20s; }
.plan-card.cp-features-visible .plan-features li:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.25s; }
.plan-card.cp-features-visible .plan-features li:nth-child(n+6){ opacity: 1; transform: none; transition-delay: 0.30s; }

/* Price variant selection spring */
.price-variant {
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.18s cubic-bezier(0.34, 1.5, 0.64, 1) !important;
}

.price-variant.selected {
  animation: cp-variant-select 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes cp-variant-select {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Paywall hero icon: breathe + entrance */
.hero-icon {
  animation: cp-hero-icon-in 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) both,
             cp-breathe 4s 0.8s ease-in-out infinite !important;
  display: inline-block;
}

@keyframes cp-hero-icon-in {
  from { opacity: 0; transform: scale(0.6) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Hero section entrance: title + subtitle */
.hero-eyebrow {
  animation: cp-slide-down 0.35s 0.05s ease both !important;
}

.hero-title {
  animation: cp-slide-up 0.4s 0.12s ease both !important;
}

.hero-sub {
  animation: cp-fade-in 0.4s 0.22s ease both !important;
}

/* Garden card on paywall: scale in */
.garden-card {
  animation: cp-scale-in 0.35s 0.18s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* ── Landing page: hero text entrance ───────────────────────── */

/* Hero badge pop */
.lp-badge {
  animation: cp-scale-in 0.3s 0.1s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

/* Landing CTA buttons: enhanced hover */
.btn-cta-hero {
  transition: background 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.3, 0.64, 1),
              box-shadow 0.2s ease !important;
}

.btn-cta-hero:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 8px 24px rgba(88, 122, 82, 0.32) !important;
}

/* Testimonial cards: hover lift */
.testimonial, .testimonial-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.testimonial:hover, .testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(44, 43, 40, 0.10) !important;
}

/* Landing feature icon containers: hover bounce */
.feature-icon, .lp-feature-icon {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: inline-block;
}

.feature-card:hover .feature-icon,
.lp-feature-card:hover .lp-feature-icon {
  transform: scale(1.12) rotate(-3deg);
}

/* ── Progress page: XP bar animation ────────────────────────── */

.xp-bar-fill,
.progress-fill,
[class*="bar-fill"],
[class*="fill-bar"] {
  transition: width 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}

/* Level badge entrance */
.level-badge,
.badge-card {
  animation: cp-scale-in 0.4s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

/* Achievement cards: stagger */
.achievement-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.achievement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 43, 40, 0.08) !important;
}

/* ── Onboarding: step progression indicator ─────────────────── */

.progress-fill {
  transition: width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}

/* Zone result reveal */
.zone-result.show {
  animation: cp-slide-up 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* ── Settings items: enhanced hover ─────────────────────────── */

.settings-item {
  transition: background 0.15s ease, transform 0.15s ease !important;
}

.settings-item:hover {
  transform: translateX(2px);
}

.settings-item:active {
  transform: scale(0.99) !important;
  transition-duration: 0.08s !important;
}

/* ── Market cards: hover treatment ──────────────────────────── */

.market-card, .crop-card, .sale-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.market-card:hover, .crop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 43, 40, 0.09) !important;
}

/* ── Journal entries: hover treatment ───────────────────────── */

.journal-entry {
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              border-color 0.2s ease !important;
}

.journal-entry:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(44, 43, 40, 0.08) !important;
  border-color: rgba(90, 78, 62, 0.20) !important;
}

/* ── Reminder cards: left border accent on hover ────────────── */

.reminder-item, .todo-item {
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-left-width 0.15s ease !important;
  border-left: 3px solid transparent;
}

.reminder-item:hover, .todo-item:hover {
  transform: translateX(2px);
  border-left-color: var(--moss, #82A677) !important;
  box-shadow: 0 3px 12px rgba(44, 43, 40, 0.07) !important;
}

/* ── Season cards: hover treatment ──────────────────────────── */

.season-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.season-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 43, 40, 0.09) !important;
}

/* ── Number counter: pop-in for animated values ─────────────── */

@keyframes cp-num-pop {
  from { transform: scale(0.85) translateY(4px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.cp-count-animated {
  animation: cp-num-pop 0.35s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

/* ── Loading: enhanced botanical spinner ─────────────────────── */

/* Replace native spin with 3-stage botanical breathe */
@keyframes cp-botanical-spin {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(1.05); }
  50%  { transform: rotate(180deg) scale(1); }
  75%  { transform: rotate(270deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1); }
}

.spinner-lg, .spinner-sm, .spinner {
  animation: cp-botanical-spin 0.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important;
}

/* ── Chat: refined message bubbles ──────────────────────────── */

/* User bubble: warm terracotta tint on hover */
.msg-row.user .chat-bubble,
.msg-row.user .message-bubble,
.msg-row.user .bubble {
  transition: box-shadow 0.18s ease !important;
}

/* Assistant bubble: very slight lift on hover */
.msg-row.assistant .chat-bubble,
.msg-row .bubble.assistant {
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.msg-row:hover .chat-bubble.assistant,
.msg-row:hover .bubble.assistant {
  box-shadow: 0 3px 12px rgba(44, 43, 40, 0.09) !important;
}

/* Chat image attachments: smooth reveal */
.chat-image, .msg-image, .message-image {
  border-radius: 12px;
  animation: cp-scale-in 0.3s ease both;
  max-width: 100%;
}

/* ── Section anchor links: smooth underline ─────────────────── */

.section-link, .view-all, .see-more {
  position: relative;
  text-decoration: none;
  color: var(--sage, #587A52);
  font-weight: 600;
  font-size: 0.82rem;
}

.section-link::after, .view-all::after, .see-more::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--sage, #587A52);
  transition: width 0.2s ease;
}

.section-link:hover::after, .view-all:hover::after, .see-more:hover::after {
  width: 100%;
}

/* ── Search result items: reveal ────────────────────────────── */

.search-result, .search-item, .plant-result {
  animation: cp-slide-up 0.22s ease both;
}

/* Stagger search results */
.search-result:nth-child(1), .plant-result:nth-child(1) { animation-delay: 0.00s; }
.search-result:nth-child(2), .plant-result:nth-child(2) { animation-delay: 0.04s; }
.search-result:nth-child(3), .plant-result:nth-child(3) { animation-delay: 0.08s; }
.search-result:nth-child(4), .plant-result:nth-child(4) { animation-delay: 0.12s; }
.search-result:nth-child(n+5), .plant-result:nth-child(n+5) { animation-delay: 0.16s; }

/* ── Notification / alert bars ──────────────────────────────── */

.alert, .notice, .info-bar, .banner {
  animation: cp-slide-down 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* ── Back button: tap feedback ──────────────────────────────── */

.back-btn, .btn-back, [class*="back-btn"] {
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.back-btn:active, .btn-back:active {
  transform: scale(0.90) translateX(-2px) !important;
  transition-duration: 0.08s !important;
}

/* ── Pill / chip selection ───────────────────────────────────── */

.chip.selected, .filter-chip.active, .tag.active {
  animation: cp-choice-select 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Card inner stats / metric cells ────────────────────────── */

.stat-cell, .metric-cell, .kpi-cell {
  transition: background 0.18s ease, transform 0.18s ease !important;
}

.stat-cell:hover, .metric-cell:hover {
  background: var(--cream, #F4EFE6) !important;
  transform: scale(1.02);
  border-radius: 8px;
}

/* ── What's new / changelog: item stagger ───────────────────── */

.changelog-item, .whats-new-item {
  animation: cp-slide-up 0.3s ease both;
}

.changelog-item:nth-child(1), .whats-new-item:nth-child(1) { animation-delay: 0.05s; }
.changelog-item:nth-child(2), .whats-new-item:nth-child(2) { animation-delay: 0.10s; }
.changelog-item:nth-child(3), .whats-new-item:nth-child(3) { animation-delay: 0.15s; }
.changelog-item:nth-child(n+4), .whats-new-item:nth-child(n+4) { animation-delay: 0.20s; }

/* ── REDUCED MOTION: disable Phase 2 additions ──────────────── */

@media (prefers-reduced-motion: reduce) {
  .choice.selected,
  .price-variant.selected,
  .hero-icon,
  .hero-eyebrow,
  .hero-title,
  .hero-sub,
  .garden-card,
  .hero-badge,
  .lp-badge,
  .level-badge,
  .badge-card,
  .zone-result.show,
  .cp-screen-entering,
  .cp-plan-reveal,
  .search-result, .plant-result,
  .alert, .notice, .info-bar, .banner,
  .changelog-item, .whats-new-item {
    animation: none !important;
  }

  .feature-card:hover .feature-icon,
  .lp-feature-card:hover .lp-feature-icon {
    transform: none !important;
  }
}