/* Kohli — depth and motion.
   Restrained on purpose: motion confirms an action, it never performs.
   Everything here collapses to nothing under Reduce Motion. */

:root {
  --ease-out:    cubic-bezier(0.22, 0.86, 0.28, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  /* Layered elevation — several soft shadows read as real material,
     one hard shadow reads as a sticker. */
  --lift-1: 0 1px 1px rgba(0,0,0,0.03), 0 2px 5px rgba(0,0,0,0.04);
  --lift-2: 0 1px 1px rgba(0,0,0,0.04), 0 4px 10px rgba(0,0,0,0.055), 0 12px 26px rgba(0,0,0,0.045);
  --lift-3: 0 2px 6px rgba(0,0,0,0.07), 0 14px 34px rgba(0,0,0,0.10), 0 32px 60px rgba(0,0,0,0.07);
  --edge: inset 0 0.5px 0 rgba(255,255,255,0.9);
}

:root[data-appearance="dark"] {
  --lift-1: 0 1px 2px rgba(0,0,0,0.5);
  --lift-2: 0 2px 8px rgba(0,0,0,0.55), 0 12px 28px rgba(0,0,0,0.4);
  --lift-3: 0 4px 14px rgba(0,0,0,0.6), 0 24px 60px rgba(0,0,0,0.5);
  --edge: inset 0 0.5px 0 rgba(255,255,255,0.07);
}

/* ---------- material ---------- */

.group,
.simple-card,
.tile,
.dialog,
.sheet {
  box-shadow: var(--lift-1), var(--edge);
}

/* A barely-there vertical sheen. Reads as light falling on a surface. */
.group,
.simple-card,
.tile {
  background-image: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0) 42%);
}
:root[data-appearance="dark"] .group,
:root[data-appearance="dark"] .simple-card,
:root[data-appearance="dark"] .tile {
  background-image: linear-gradient(180deg,
    rgba(255,255,255,0.045) 0%,
    rgba(255,255,255,0) 46%);
}

.sheet { box-shadow: var(--lift-3); }
.dialog { box-shadow: var(--lift-3); }

/* ---------- screen entrance ---------- */

@keyframes screen-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
.screen > div { animation: screen-in 0.32s var(--ease-out) both; }

/* Title leads, content follows a beat later. */
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
.title-block { animation: rise-in 0.4s var(--ease-out) both; }
.section     { animation: rise-in 0.44s var(--ease-out) both; }

.section:nth-of-type(1) { animation-delay: 0.04s; }
.section:nth-of-type(2) { animation-delay: 0.09s; }
.section:nth-of-type(3) { animation-delay: 0.14s; }
.section:nth-of-type(4) { animation-delay: 0.18s; }
.section:nth-of-type(5) { animation-delay: 0.21s; }

/* Rows cascade within their group. */
@keyframes row-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}
.group > .row { animation: row-in 0.34s var(--ease-out) both; }
.group > .row:nth-child(1) { animation-delay: 0.03s; }
.group > .row:nth-child(2) { animation-delay: 0.055s; }
.group > .row:nth-child(3) { animation-delay: 0.08s; }
.group > .row:nth-child(4) { animation-delay: 0.10s; }
.group > .row:nth-child(5) { animation-delay: 0.12s; }
.group > .row:nth-child(6) { animation-delay: 0.135s; }
.group > .row:nth-child(7) { animation-delay: 0.15s; }
.group > .row:nth-child(n+8) { animation-delay: 0.165s; }

/* ---------- press ---------- */

/* A slight push into the page, not a shrink. Perspective sells the depth. */
button.row, .row.tappable, .simple-card, .tile, .chip, .btn, .cal-day {
  transform: perspective(900px) translateZ(0);
  transition: transform 0.34s var(--ease-spring),
              box-shadow 0.34s var(--ease-out),
              background 0.16s linear;
}
button.row:active, .row.tappable:active, .chip:active, .cal-day:active {
  transform: perspective(900px) translateZ(-6px);
  transition-duration: 0.09s;
}
.simple-card:active, .tile:active {
  transform: perspective(900px) translateZ(-14px);
  box-shadow: var(--lift-1);
  transition-duration: 0.09s;
}
.btn:active { transform: perspective(900px) translateZ(-10px); transition-duration: 0.09s; }

.tab .icon { transition: transform 0.42s var(--ease-spring); }
.tab.active .icon { transform: translateY(-1px) scale(1.06); }
.tab:active .icon { transform: scale(0.86); transition-duration: 0.1s; }

/* ---------- the tick ---------- */

/* The checkmark draws itself on, rather than blinking into existence. */
.check .icon path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 0.3s var(--ease-out) 0.04s;
}
.check.on .icon path { stroke-dashoffset: 0; }

@keyframes tick-pop {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.check.on { animation: tick-pop 0.36s var(--ease-spring); }

/* A completed row settles back rather than just greying out. */
.row.done .row-title { transition: color 0.28s ease, opacity 0.28s ease; }

/* ---------- sheets and dialogs ---------- */

.sheet { transition: transform 0.44s var(--ease-spring); }
.sheet-backdrop { transition: opacity 0.32s var(--ease-out); }
.dialog { transition: transform 0.32s var(--ease-spring), opacity 0.22s ease; }

/* ---------- large title ---------- */

.large-title { transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }

/* ---------- toast ---------- */

.toast { box-shadow: var(--lift-2); transition: opacity 0.26s var(--ease-out), transform 0.4s var(--ease-spring); }

/* ---------- shimmer for pending values ---------- */

@keyframes shimmer { to { background-position: 200% 0; } }
.shimmer {
  background: linear-gradient(90deg, var(--fill) 25%, var(--fill-strong) 50%, var(--fill) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
  color: transparent;
}

/* ---------- pulse, for a live location dot ---------- */

@keyframes pulse-ring {
  0%   { transform: scale(0.7); opacity: 0.55; }
  80%  { transform: scale(2.3); opacity: 0; }
  100% { transform: scale(2.3); opacity: 0; }
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-ring 2.2s var(--ease-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .screen > div, .title-block, .section, .group > .row, .check.on, .pulse::after {
    animation: none !important;
  }
  button.row:active, .row.tappable:active, .simple-card:active,
  .tile:active, .btn:active, .chip:active, .cal-day:active {
    transform: none !important;
  }
  .check .icon path { transition: none; stroke-dashoffset: 0; }
}