@charset "UTF-8";
/* ==========================================================================
   Motion layer
   Only transform and opacity are animated, so nothing here triggers layout
   while it runs. Everything collapses to a no-op under prefers-reduced-motion.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.22, .68, .3, 1);
  --ease-spring: cubic-bezier(.2, .8, .25, 1);
  --t-fast: .16s;
  --t: .28s;
  --t-slow: .5s;
}

/* reveal on scroll ------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="zoom"] { transform: scale(.955); }

/* header reacts to scrolling --------------------------------------------- */
.site-header { transition: box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease-out); }
.site-header.scrolled { box-shadow: 0 2px 18px rgba(0, 0, 0, .07); border-block-end-color: transparent; }

/* hero settles in on first paint ----------------------------------------- */
.hero h1, .hero .lede, .hero .searchbar { animation: heroIn .72s var(--ease-out) both; }
.hero .lede { animation-delay: .09s; }
.hero .searchbar { animation-delay: .18s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } }
.hero-bg { animation: heroZoom 14s var(--ease-out) both; }
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }

/* cards ------------------------------------------------------------------ */
.card, .tile { transition: transform var(--t) var(--ease-spring); }
.card:hover, .tile:hover { transform: translateY(-4px); }
.card .media, .tile .media { transition: box-shadow var(--t) var(--ease-out); }
.card:hover .media, .tile:hover .media { box-shadow: var(--shadow); }

.stat, .book-panel { transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* buttons and chips ------------------------------------------------------ */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity var(--t-fast) ease;
}
.btn:hover::after { opacity: .06; }
.btn:active::after { opacity: .12; }
.chip, .pickbox { transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) ease, background-color var(--t-fast) ease; }
.chip:hover { transform: translateY(-1px); }
.pickbox:active { transform: scale(.985); }

/* table rows and menus --------------------------------------------------- */
table.data tbody tr { transition: background-color var(--t-fast) ease; }
.menu a, .menu button { transition: background-color var(--t-fast) ease, padding-inline-start var(--t-fast) ease; }
.menu a:hover, .menu button:hover { padding-inline-start: 18px; }
.menu { animation: menuIn .18s var(--ease-spring) both; transform-origin: top right; }
body[dir="rtl"] .menu { transform-origin: top left; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }

/* accordion -------------------------------------------------------------- */
.faq-item summary { transition: color var(--t-fast) ease; }
.faq-item summary:hover { color: var(--green); }
.faq-item summary::after { transition: transform var(--t) var(--ease-spring); }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item[open] .answer { animation: answerIn .3s var(--ease-out) both; }
@keyframes answerIn { from { opacity: 0; transform: translateY(-6px); } }

/* form feedback ---------------------------------------------------------- */
.input, .textarea, select.input { transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.input.invalid, .textarea.invalid, select.input.invalid {
  border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg);
}
.field-error { color: var(--red); font-size: .8125rem; margin-block-start: 6px; animation: answerIn .22s var(--ease-out) both; }
.alert { animation: answerIn .26s var(--ease-out) both; }

.shake { animation: shake .4s var(--ease-out); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* busy button ------------------------------------------------------------ */
.btn.busy { color: transparent !important; pointer-events: none; }
.btn.busy::before {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  width: 17px; height: 17px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%; animation: spin .62s linear infinite;
}
.btn-ghost.busy::before, .btn-outline.busy::before { border-color: rgba(0, 0, 0, .2); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* skeleton --------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--line-2) 25%, #f7f7f7 37%, var(--line-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-sm); color: transparent !important;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* toasts ----------------------------------------------------------------- */
.toasts {
  position: fixed; z-index: 200; inset-block-end: 24px; inset-inline-end: 24px;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 360px;
}
.toast {
  pointer-events: auto; background: var(--ink); color: #fff;
  border-radius: var(--r); padding: 13px 18px; font-size: .9375rem;
  box-shadow: var(--shadow-lg); animation: toastIn .3s var(--ease-spring) both;
}
.toast.out { animation: toastOut .22s var(--ease-out) both; }
.toast-ok { background: var(--green-700); }
.toast-error { background: #a3160f; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (max-width: 560px) { .toasts { inset-inline: 16px; inset-block-end: 16px; max-width: none; } }

/* lightbox --------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .92);
  display: grid; place-items: center; animation: fade .2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 92vw; max-height: 86vh; object-fit: contain;
  border-radius: var(--r); animation: pop .3s var(--ease-spring) both;
}
.lightbox .nav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .14);
  color: #fff; display: grid; place-items: center; font-size: 1.5rem;
  transition: background-color var(--t-fast) ease;
}
.lightbox .nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox .prev { inset-inline-start: 24px; }
.lightbox .next { inset-inline-end: 24px; }
.lightbox .close { position: absolute; inset-block-start: 22px; inset-inline-end: 24px; color: #fff; font-size: 2rem; line-height: 1; }
.lightbox .counter { position: absolute; inset-block-end: 26px; color: rgba(255, 255, 255, .72); font-size: .875rem; }

/* availability slots fade in --------------------------------------------- */
.slots .slot { animation: answerIn .26s var(--ease-out) both; }
.slots .slot:nth-child(2) { animation-delay: .04s; }
.slots .slot:nth-child(3) { animation-delay: .08s; }
.slots .slot:nth-child(4) { animation-delay: .12s; }
.slots .slot:nth-child(n+5) { animation-delay: .16s; }

/* the total ticks when it recalculates ----------------------------------- */
.lines .total span:last-child { transition: transform var(--t) var(--ease-spring); display: inline-block; }
.lines .total.bump span:last-child { transform: scale(1.09); }

/* page enter ------------------------------------------------------------- */
main { animation: pageIn .34s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; } }

/* respect the user setting ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}