/* ═══════════════════════════════════════════════════════════════════════════
   Motion, depth and the small pieces of polish.

   Loaded last, so it can reach anything. The rule it follows: movement is for
   making a change legible. Reception steps through days all afternoon, so
   that transition earns real care; a decorative flourish on a page nobody
   watches loading earns none.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Between pages ──────────────────────────────────────────────────────────
   Stepping ‹ › through dates is the single most repeated action in the whole
   tool. A cross-document view transition turns it from a page reload into
   what it actually is — the same board, a different night. */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:200ms;
  animation-timing-function:cubic-bezier(.22, 1, .36, 1);
}

/* The chrome is the same board either side, so it holds still while the
   content beneath it changes. */
.topbar{ view-transition-name:topbar; }
.boardhead{ view-transition-name:boardhead; }
.dock{ view-transition-name:dock; }

::view-transition-old(topbar),
::view-transition-new(topbar),
::view-transition-old(boardhead),
::view-transition-new(boardhead){ animation:none; mix-blend-mode:normal; }

/* ── Frosted chrome ─────────────────────────────────────────────────────────
   Content scrolling under a sticky bar has to stay readable without the bar
   turning into a solid slab. */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .topbar{
    background:color-mix(in srgb, var(--paper) 82%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
  }
  .boardhead{
    background:color-mix(in srgb, var(--canvas) 78%, transparent);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
    backdrop-filter:saturate(160%) blur(12px);
  }
  .hk__bar{
    background:color-mix(in srgb, var(--ink) 88%, transparent);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
    backdrop-filter:saturate(160%) blur(12px);
  }
}

/* ── Pressable things ───────────────────────────────────────────────────────
   A control that gives under the finger is the difference between a page and
   an app. Small, fast, and on the way down only. */

.btn, .seg__item, .guestchip, .copy, .hkbtn, .hkopt, .tick, .daystrip__tile{
  transition:background var(--t-fast), border-color var(--t-fast),
             color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:active, .seg__item:active, .guestchip:active,
.copy:active, .hkopt:active, .daystrip__tile:active{ transform:scale(.975); }
.hkbtn:active{ transform:scale(.96); }
.tick:active::before{ transform:scale(.9); }
.tick::before{ transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }

.btn--primary, .btn--danger, .hkbtn{ box-shadow:var(--sheen), var(--shadow-sm); }
.btn--primary:hover, .btn--danger:hover{ box-shadow:var(--sheen), var(--shadow-md); }

.card, .roomcard, .stat, .deskgroup, .cassette{ box-shadow:var(--shadow-sm); }
.card:hover, .stat:hover{ box-shadow:var(--shadow-sm); }

/* ── The board ──────────────────────────────────────────────────────────────
   Cards arrive with a short, shallow rise. It runs once, it is over inside a
   quarter of a second, and it never delays a click — the page is live before
   the animation finishes. */

@keyframes wk-rise{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}

.roomgrid > .roomcard{
  /* `backwards`, not `both`: with `both` the final keyframe's transform sticks
     for good and would then win over the lift a card gets when it becomes a
     drop target. `backwards` only covers the delay and then gets out of the
     way. */
  animation:wk-rise 200ms var(--ease) backwards;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
}
/* Only the first few are staggered; beyond that it is just latency. */
.roomgrid > .roomcard:nth-child(1){ animation-delay:0ms; }
.roomgrid > .roomcard:nth-child(2){ animation-delay:14ms; }
.roomgrid > .roomcard:nth-child(3){ animation-delay:28ms; }
.roomgrid > .roomcard:nth-child(4){ animation-delay:42ms; }
.roomgrid > .roomcard:nth-child(5){ animation-delay:56ms; }
.roomgrid > .roomcard:nth-child(n+6){ animation-delay:70ms; }

.roomcard:hover{ box-shadow:var(--shadow-md); }
.roomcard--target,
.roomcard--target-tight{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.roomcard--planned{ box-shadow:var(--shadow-md); }

/* Being held should feel like being picked up. */
.slot, .guestchip{ transition:background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.slot--held{ transform:translateX(2px); }
.guestchip--held{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }

/* A count that has just changed says so once, briefly. */
@keyframes wk-bump{
  0%  { transform:scale(1); }
  40% { transform:scale(1.14); }
  100%{ transform:scale(1); }
}
.roomcard__count.is-changed,
.badge.is-changed,
.bell__count.is-changed{ animation:wk-bump 280ms var(--ease-spring); }

/* ── Bars that slide in ─────────────────────────────────────────────────── */

@keyframes wk-slide-up{
  from{ opacity:0; transform:translateY(100%); }
  to  { opacity:1; transform:none; }
}
.holdbar:not([hidden]), .changedbar:not([hidden]){
  animation:wk-slide-up 240ms var(--ease) both;
}
.dock{ transition:transform var(--t-slow); }

/* ── Toasts ─────────────────────────────────────────────────────────────── */

@keyframes wk-toast-in{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to  { opacity:1; transform:none; }
}
.toast, .hk__toast{
  animation:wk-toast-in 260ms var(--ease-spring) both;
  box-shadow:var(--shadow-pop);
}

/* ── Modals ─────────────────────────────────────────────────────────────── */

@keyframes wk-modal-in{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to  { opacity:1; transform:none; }
}
@keyframes wk-backdrop-in{ from{ opacity:0; } to{ opacity:1; } }

.modal[open], .hksheet[open]{ animation:wk-modal-in 200ms var(--ease) both; }
.modal[open]::backdrop, .hksheet[open]::backdrop{
  animation:wk-backdrop-in 200ms var(--ease) both;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

/* ── Tables and rows ────────────────────────────────────────────────────── */

.table tbody tr{ transition:background var(--t-fast); }
.arow{ transition:background var(--t), box-shadow var(--t); }
.hkroom{ transition:background var(--t), box-shadow var(--t), border-color var(--t), transform var(--t-fast); }
.hkroom:active{ transform:scale(.995); }
.notifrow{ transition:background var(--t); }

/* ── Inputs ─────────────────────────────────────────────────────────────── */

.input, .select, .textarea, .keyfield{
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

/* ── Links and nav ──────────────────────────────────────────────────────── */

.topnav__link{ transition:color var(--t-fast), border-color var(--t-fast); }
.topnav__link::after{ display:none; }

/* ── Meters and bars fill rather than appear ────────────────────────────── */

.meter__fill{ transition:width var(--t-slow); }
.daystrip__bar i{ transition:width var(--t-slow); }

/* ── The copied state ───────────────────────────────────────────────────── */

.copy.is-copied{ transform:none; }
@keyframes wk-copied{
  0%  { transform:scale(1); }
  35% { transform:scale(1.02); }
  100%{ transform:scale(1); }
}
.copy.is-copied{ animation:wk-copied 260ms var(--ease-spring); }