/* ============================================================
   NanoPet — the pet centerpiece.
   Custom CSS for the blob creature only; the framework's Material
   chrome styles live elsewhere and cannot bleed in here. One light
   source (upper left), a small palette per look, and every motion
   eases — nothing teleports.
   ============================================================ */

/* --- page scaffolding (Material chrome owns forms/buttons/cards) --- */
.np-page {
  width: min(calc(100% - (2 * var(--md-layout-gutter, 24px))), 1120px);
  margin-inline: auto;
  padding-block: clamp(32px, 6vw, 64px);
  display: grid;
  gap: 40px;
  align-items: start;
}

.np-heading {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.np-stage__heading { margin-bottom: 24px; }

.np-stage__card {
  background: var(--md-sys-color-surface-container-low, #f3edf7);
  border-radius: 32px;
  padding: clamp(16px, 3vw, 32px);
  box-shadow: var(--md-sys-elevation-level1, none);
}

/* --- the pet stage: floor, shadow, creature --- */
.nano-pet {
  position: relative;
  width: min(340px, 72vw);
  margin-inline: auto;
  padding-top: 28px;
  user-select: none;
}

.nano-pet__svg { width: 100%; height: auto; display: block; position: relative; z-index: 2; }

.nano-pet__rig { transform-origin: 50% 78%; }

/* soft floor the creature sits on */
.nano-pet__floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 3%;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 22%, transparent), transparent 70%);
  z-index: 0;
}

/* ground shadow that squashes with the bounce */
.nano-pet__shadow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 3%;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--md-sys-color-shadow, #000) 28%, transparent);
  z-index: 1;
  animation: np-shadow-idle 4s ease-in-out infinite;
}

/* idle breathing: the whole creature swells and settles */
.nano-pet__rig { animation: np-breathe 3.6s ease-in-out infinite; }

@keyframes np-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.018, 0.985) translateY(1.5%); }
}

@keyframes np-shadow-idle {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.94); opacity: 0.85; }
}

/* cheeks glow a touch brighter when happy */
.nano-pet__cheek { transition: opacity 0.6s ease; }

/* --- reaction animations: the story moves --- */

/* feed: a happy squish-and-bounce, floor shadow squashes with it */
.nano-pet--feed .nano-pet__rig { animation: np-feed 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nano-pet--feed .nano-pet__shadow { animation: np-feed-shadow 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes np-feed {
  0% { transform: scale(1); }
  30% { transform: scale(1.14, 0.78) translateY(10%); }
  55% { transform: scale(0.92, 1.1) translateY(-6%); }
  75% { transform: scale(1.06, 0.9) translateY(3%); }
  100% { transform: scale(1); }
}
@keyframes np-feed-shadow {
  0% { transform: scaleX(1); opacity: 1; }
  30% { transform: scaleX(0.78); opacity: 0.7; }
  55% { transform: scaleX(1.12); opacity: 1; }
  100% { transform: scaleX(1); }
}

/* play: one delighted spin */
.nano-pet--play .nano-pet__rig { animation: np-play 0.85s cubic-bezier(0.34, 1.3, 0.64, 1); }
.nano-pet--play .nano-pet__shadow { animation: np-feed-shadow 0.85s cubic-bezier(0.34, 1.3, 0.64, 1); }
@keyframes np-play {
  0% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-16deg) scale(1.06, 0.94) translateY(-4%); }
  100% { transform: rotate(360deg) scale(1); }
}

/* rest: settle down to sleep */
.nano-pet--rest .nano-pet__rig { animation: np-rest 1.1s ease-in-out; }
.nano-pet--rest .nano-pet__zzz { opacity: 0; animation: np-zzz 1.1s ease-out 0.15s; }
.nano-pet--rest .nano-pet__face { animation: np-eyes-close 0.8s ease-in-out; }
@keyframes np-rest {
  0% { transform: scale(1) translateY(0); }
  40% { transform: scale(1.06, 0.9) translateY(6%); }
  100% { transform: scale(1) translateY(1.5%); }
}
@keyframes np-eyes-close {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* rescue: a slow, gentle glow-up */
.nano-pet--rescue .nano-pet__rig { animation: np-rescue 1.4s ease-in-out; }
@keyframes np-rescue {
  0% { transform: scale(0.92) translateY(4%); opacity: 0.7; }
  50% { transform: scale(1.05) translateY(-3%); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* --- persistent mood states, driven by live stats --- */

/* low energy: slump down, flatten */
.nano-pet--slump .nano-pet__rig { animation: none; transform: scale(1, 0.88) translateY(5%); }
.nano-pet--slump .nano-pet__body { filter: brightness(0.96) saturate(0.9); }

/* unhappy: droop */
.nano-pet--droop .nano-pet__face { transform: translateY(4px); }
.nano-pet--droop .nano-pet__mouth { d: path("M146 168 Q160 156 174 168"); }

/* resting / full energy: closed eyes, floating zzz */
.nano-pet--asleep .nano-pet__face,
.nano-pet--asleep .nano-pet__cheek { opacity: 0; }
.nano-pet__zzz { opacity: 0; }
.nano-pet--asleep .nano-pet__zzz { opacity: 1; animation: np-zzz 2.6s ease-in-out infinite; }
.nano-pet__zzz-text {
  font-family: var(--md-sys-typescale-title-medium-font, inherit);
  fill: color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 75%, #fff);
  font-size: 22px;
  font-weight: 700;
  animation: np-zzz-float 2.6s ease-in-out infinite;
}
.nano-pet__zzz-text:nth-of-type(2) { animation-delay: 0.35s; }
.nano-pet__zzz-text:nth-of-type(3) { animation-delay: 0.7s; }
@keyframes np-zzz {
  0% { opacity: 0; transform: translateY(6px) scale(0.8); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px) scale(1.15); }
}
@keyframes np-zzz-float {
  0% { opacity: 0; transform: translateY(4px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* --- stats --- */
.np-pet-name {
  margin: 18px 0 2px;
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}
.np-pet-tagline {
  margin: 0 0 20px;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant, #49454f);
  font-size: 0.95rem;
}

.np-stats { margin: 0; display: grid; gap: 12px; }
.np-stat dt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 0.85rem;
}
.np-stat__label { color: var(--md-sys-color-on-surface-variant, #49454f); font-weight: 600; }
.np-stat__value { font-weight: 750; font-variant-numeric: tabular-nums; }
.np-stat__bar { height: 10px; border-radius: 999px; }

/* --- care actions --- */
.np-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}
.np-actions .md-button { min-width: 132px; }

/* rescue call-out */
.np-rescue {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--md-sys-color-error-container, #f9dedc);
  color: var(--md-sys-color-on-error-container, #410e0b);
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}
.np-rescue p { margin: 0; font-size: 0.92rem; }
.md-button--error {
  background: var(--md-sys-color-error, #b3261e);
  color: var(--md-sys-color-on-error, #fff);
}

/* --- care log --- */
.np-side { display: grid; gap: 16px; }
.np-log-card { padding: 20px; }
.np-log-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.np-log-card__head h2 { margin: 0; font-size: 1.15rem; }
.md-button--compact { min-height: 40px; padding-inline: 12px; }

.np-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.np-log__entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 10px 4px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
  font-size: 0.92rem;
}
.np-log__entry:last-child { border-bottom: 0; }
.np-log__action {
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--md-sys-color-on-secondary-container, #1d192b);
  background: var(--md-sys-color-secondary-container, #e8def8);
}
.np-log__action--feed { background: #d7e8ff; color: #0b2d5c; }
.np-log__action--play { background: #ffe2d8; color: #702f1a; }
.np-log__action--rest { background: #e6e0f5; color: #3c2a63; }
.np-log__action--rescue { background: #f9dedc; color: #410e0b; }
.np-log__action--adopt { background: #d8f0dd; color: #14451f; }
.np-log__time { color: var(--md-sys-color-on-surface-variant, #49454f); font-size: 0.8rem; white-space: nowrap; }
.np-log__empty { color: var(--md-sys-color-on-surface-variant, #49454f); }

/* --- adopt a pet --- */
.np-adopt {
  width: min(calc(100% - (2 * var(--md-layout-gutter, 24px))), 720px);
  margin-inline: auto;
  padding-block: clamp(32px, 6vw, 64px);
}
.np-adopt__intro { margin-bottom: 28px; }
.np-adopt__intro p:not(.md-section__eyebrow) { color: var(--md-sys-color-on-surface-variant, #49454f); }

.np-look-picker { border: 0; padding: 0; margin: 24px 0 0; }
.np-look-options { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.np-look-option { cursor: pointer; }
.np-look-option input { position: absolute; opacity: 0; pointer-events: none; }
.np-look-option__card {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 14px 18px;
  border-radius: 20px;
  border: 2px solid var(--md-sys-color-outline-variant, #cac4d0);
  background: var(--md-sys-color-surface-container-low, #f7f2fa);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.np-look-option input:checked + .np-look-option__card {
  border-color: var(--md-sys-color-primary, #6750a4);
  background: var(--md-sys-color-primary-container, #eaddff);
}
.np-look-option input:focus-visible + .np-look-option__card { outline: 2px solid var(--md-sys-color-primary, #6750a4); outline-offset: 2px; }
.np-look-option:hover .np-look-option__card { transform: translateY(-2px); }
.np-look-option__swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--np-swatch) 85%, #fff), var(--np-swatch));
  box-shadow: inset 0 -6px 10px color-mix(in srgb, var(--np-swatch) 35%, transparent);
}
.np-look-option__name { font-weight: 700; font-size: 0.9rem; }

/* --- layout --- */
@media (min-width: 860px) {
  .np-page { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); gap: 32px; }
  .np-stage__card { position: sticky; top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .nano-pet__rig, .nano-pet__shadow, .nano-pet__zzz, .nano-pet__zzz-text { animation: none !important; }
  .nano-pet--feed .nano-pet__rig, .nano-pet--play .nano-pet__rig,
  .nano-pet--rest .nano-pet__rig, .nano-pet--rescue .nano-pet__rig { animation: none !important; }
}