/* ============================================================
   Eggplantify motion layer (step 36). Subtle, cheap animations shared by every page.
   Everything is switched off for people who turned on "reduce motion" on their device.
   ============================================================ */

/* ---- Cards and stat tiles rise in, one after another (delay is set by assets/js/motion.js) ---- */
@keyframes moRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mo-rise { animation: moRise .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: var(--mo-d, 0ms); }

/* ---- Buttons: lift on hover, press on tap ---- */
.btn-primary, .btn-secondary, .btn-danger { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease; }
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(92,45,138,.28); }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: scale(.96); box-shadow: none; }
.stat-card, .qa-card { transition: transform .2s ease, box-shadow .2s ease; }
.stat-card:hover, .qa-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(61,26,94,.12); }

/* ---- Tab strip: the active tab's underline grows from the middle ---- */
@keyframes moTab { from { border-bottom-color: transparent; background-position: 50% 100%; } }
.hub-tab.active { animation: moTab .35s ease; }

/* ---- Messages slide in; success messages fade away on their own ---- */
@keyframes moSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.alert { animation: moSlide .4s ease backwards; }
.alert.mo-out { opacity: 0; transform: translateY(-6px); max-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; transition: all .5s ease; }

/* ---- Confirm popup pops in ---- */
@keyframes moFade { from { opacity: 0; } }
@keyframes moPop { from { opacity: 0; transform: scale(.9) translateY(8px); } }
.egg-confirm-backdrop.open { animation: moFade .2s ease; }
.egg-confirm-backdrop.open .egg-confirm-box { animation: moPop .28s cubic-bezier(.2,.9,.3,1.2); }

/* ---- Weather banner scene (sun / clouds / rain behind the text) ---- */
.weather-hero { position: relative; overflow: hidden; }
.weather-hero > *:not(.wx-scene) { position: relative; z-index: 1; }
.wx-scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.wx-sun { position: absolute; right: 22px; top: 14px; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbe0, #ffd54a 65%); box-shadow: 0 0 34px 10px rgba(255,220,110,.55); animation: wxPulse 4s ease-in-out infinite; }
.wx-rays { position: absolute; right: -2px; top: -6px; width: 116px; height: 116px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,235,150,.45) 0 7deg, transparent 7deg 30deg); -webkit-mask: radial-gradient(circle, transparent 28%, #000 30%, transparent 70%); mask: radial-gradient(circle, transparent 28%, #000 30%, transparent 70%); animation: wxSpin 28s linear infinite; }
@keyframes wxSpin { to { transform: rotate(360deg); } }
@keyframes wxPulse { 50% { transform: scale(1.07); } }
.wx-cloud { position: absolute; left: -140px; width: 84px; height: 26px; border-radius: 26px; background: rgba(255,255,255,.5); animation: wxDrift linear infinite; }
.wx-cloud::before, .wx-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.wx-cloud::before { width: 38px; height: 38px; left: 14px; top: -18px; }
.wx-cloud::after { width: 30px; height: 30px; left: 44px; top: -12px; }
@keyframes wxDrift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 280px)); } }
.wx-dark .wx-cloud { background: rgba(40,20,50,.42); }
.wx-drop { position: absolute; top: -24px; width: 2px; height: 15px; border-radius: 2px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.75)); animation: wxFall .85s linear infinite; }
@keyframes wxFall { to { transform: translate(-6px, 260px); } }
.wx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: wxFlash 9s infinite; }
@keyframes wxFlash { 0%, 92%, 96%, 100% { opacity: 0; } 93% { opacity: .22; } 94.5% { opacity: .05; } 95.5% { opacity: .18; } }
.wx-meter { height: 6px; border-radius: 99px; background: rgba(255,255,255,.28); margin: 2px 0 14px; max-width: 220px; overflow: hidden; }
.wx-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: #fff; transition: width 1.3s cubic-bezier(.2,.8,.2,1) .3s; }
.weather-hero-pest { margin-bottom: 10px; }

/* ---- Login page: the form fades in step by step ---- */
.sheet > * { animation: moRise .6s cubic-bezier(.2,.7,.2,1) backwards; }
.sheet > :nth-child(1) { animation-delay: .1s; } .sheet > :nth-child(2) { animation-delay: .18s; } .sheet > :nth-child(3) { animation-delay: .26s; } .sheet > :nth-child(4) { animation-delay: .34s; } .sheet > :nth-child(5) { animation-delay: .42s; } .sheet > :nth-child(6) { animation-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  .mo-rise, .alert, .hub-tab.active, .sheet > *, .wx-sun, .wx-rays, .wx-cloud, .wx-drop, .wx-flash, .egg-confirm-backdrop.open, .egg-confirm-backdrop.open .egg-confirm-box { animation: none !important; }
  .btn-primary, .btn-secondary, .btn-danger, .stat-card, .qa-card, .wx-meter i { transition: none !important; }
  .btn-primary:hover, .btn-secondary:hover, .stat-card:hover, .qa-card:hover { transform: none; }
  .wx-drop, .wx-flash { display: none; }
  .wx-meter i { width: var(--w) !important; }
}

/* ============ Step 38: tasks, crop cycle, QR attendance ============ */
@keyframes moGrow { from { width: 0; } }
.progress-fill, .cph-fill { animation: moGrow 1.2s cubic-bezier(.2,.8,.2,1) backwards; }

/* ---- Crop cycle: little plant that rides the progress bar ---- */
.cph-wrap { position: relative; padding-top: 22px; }
.cph-plant { position: absolute; bottom: 5px; width: 30px; height: 30px; margin-left: -15px; transform-origin: 50% 100%; animation: moWalk 1.2s cubic-bezier(.2,.8,.2,1) backwards, moSway 3.2s ease-in-out 1.2s infinite; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.cph-plant svg { width: 100%; height: 100%; display: block; }
@keyframes moWalk { from { left: 0; } }
@keyframes moSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* ---- Crop cycle timeline: steps light up one after another ---- */
.timeline-row { animation: moRise .45s ease backwards; animation-delay: var(--tl, 0ms); }
.timeline-dot-done { animation: moDot .5s cubic-bezier(.2,1.5,.4,1) backwards; animation-delay: calc(var(--tl, 0ms) + 220ms); }
.timeline-line-done { transform-origin: top; animation: moLine .45s ease backwards; animation-delay: calc(var(--tl, 0ms) + 120ms); }
@keyframes moDot { from { transform: scale(0); } }
@keyframes moLine { from { transform: scaleY(0); } }
.timeline-tag-current { animation: moGlow 2.2s ease-in-out infinite; }
@keyframes moGlow { 50% { box-shadow: 0 0 0 5px rgba(123,79,166,.16); } }

/* ---- Tasks: rows slide in; marking a task done celebrates ---- */
.ft-row { animation: moRise .45s ease backwards; }
.ft-row:nth-child(2) { animation-delay: .06s; } .ft-row:nth-child(3) { animation-delay: .12s; } .ft-row:nth-child(4) { animation-delay: .18s; } .ft-row:nth-child(5) { animation-delay: .24s; } .ft-row:nth-child(6) { animation-delay: .3s; }
.ft-empty b::before { content: "\2713"; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; background: #ecfdf3; color: #15803d; font-size: 1.4rem; animation: moPopIn .7s cubic-bezier(.2,1.5,.4,1) .15s backwards; }
@keyframes moPopIn { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.task-item { position: relative; transition: background .4s ease, border-color .4s ease, opacity .5s ease, transform .5s ease; }
.task-item.task-celebrate { background: #ecfdf3; border-left-color: #22c55e !important; }
.task-item.task-celebrate::after { content: "\2713"; position: absolute; right: 18px; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%; background: #22c55e; color: #fff; font-size: 1.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; animation: moPopIn .5s cubic-bezier(.2,1.5,.4,1); box-shadow: 0 6px 18px rgba(34,197,94,.45); }
.task-item.task-celebrate .task-item-bottom { opacity: .35; }
.tc-burst { position: absolute; right: 42px; top: 50%; width: 0; height: 0; pointer-events: none; }
.tc-burst i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--c); animation: moBurst .75s ease-out forwards; }
@keyframes moBurst { to { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; } }

/* ---- QR attendance: countdown ring, fresh code, new names ---- */
@property --qp { syntax: "<number>"; inherits: false; initial-value: 100; }
.qr-ring { --qp: 100; padding: 7px; border-radius: 24px; width: min(100%, 434px); margin: 0 auto; box-sizing: border-box; background: conic-gradient(from 0deg, #5c2d8a calc(var(--qp) * 1%), #e6ddf2 0); transition: --qp 1s linear; }
.qr-ring .qr-box { width: 100%; }
.qr-ring.qr-soon { background: conic-gradient(from 0deg, #d97706 calc(var(--qp) * 1%), #f6e6c8 0); }
.qr-box.qr-fresh svg { animation: moFresh .55s ease; }
@keyframes moFresh { from { opacity: 0; transform: scale(.94); } }
.qr-row.qr-new { animation: moNewRow .9s ease; }
@keyframes moNewRow { 0% { opacity: 0; transform: translateX(-24px); background: #d1fae5; } 40% { opacity: 1; transform: none; background: #d1fae5; } 100% { background: transparent; } }
.qr-count.qr-bump #qrCount { display: inline-block; animation: moBump .5s cubic-bezier(.2,1.6,.4,1); color: #15803d; }
@keyframes moBump { 40% { transform: scale(1.45); } }

@media (prefers-reduced-motion: reduce) {
  .progress-fill, .cph-fill, .cph-plant, .timeline-row, .timeline-dot-done, .timeline-line-done, .timeline-tag-current, .ft-row, .ft-empty b::before, .task-item.task-celebrate::after, .tc-burst i, .qr-box.qr-fresh svg, .qr-row.qr-new, .qr-count.qr-bump #qrCount { animation: none !important; }
  .qr-ring, .task-item { transition: none !important; }
  .tc-burst { display: none; }
}