/* Heart of Batumi: the saffron wall of the venue, its plank signboard, a tree whose roots close into a heart, a black cat.
   Base styles are the final state. Start states of motion live only under html.js:not(.no-hide) and only when the visitor
   allows motion; endless motion runs only once app.js is alive (html.ready) and pauses off screen and in a hidden tab. */
@font-face { font-family: "Gabriela"; src: url(/fonts/gabriela.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0400-045F, U+2010-2027, U+2116, U+2190-2193; }
@font-face { font-family: "Mulish"; src: url(/fonts/mulish.woff2) format("woff2"); font-weight: 200 1000; font-display: swap; unicode-range: U+0000-00FF, U+0400-045F, U+2010-2027, U+2116, U+2190-2193; }
@font-face { font-family: "NSGeo"; src: url(/fonts/noto-sans-georgian.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+10A0-10FF, U+20BE, U+2D00-2D2F; }

:root {
  --wall: #f1b434; --wall-hi: #f8cd63; --wall-lo: #d99a1e; --board: #f7f1e3; --seam: #d8cbb0; --frame: #8a6a42;
  --ink: #2b211b; --red: #b3221f; --red-lo: #8f1816; --link: #7d1512; --green: #1f3b2c; --night: #1d1b33; --glow: #ffd36b; --cream: #fff8e8;
  --display: "Gabriela", "NSGeo", Georgia, serif;
  --text: "Mulish", "NSGeo", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --wrap: 1180px;
}
.lang-ka { --display: "NSGeo", "Gabriela", Georgia, serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
body {
  margin: 0; color: var(--ink); font: 400 1.0625rem/1.65 var(--text); overflow-x: hidden; overflow-wrap: break-word;
  background: var(--wall) radial-gradient(ellipse 60% 40% at 15% 8%, var(--wall-hi), transparent 70%), radial-gradient(ellipse 50% 30% at 90% 55%, rgba(248, 205, 99, .55), transparent 70%);
}
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0 0 .4em; color: var(--ink); }
.lang-ka h1, .lang-ka h2, .lang-ka h3 { font-weight: 800; }
h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.25rem; }
.lang-ka h1 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.lang-ka h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.lang-ka h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
address { font-style: normal; }
.nw { white-space: nowrap; }
.center { text-align: center; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 6px; font-weight: 700; }
.skip:focus { top: 12px; }
.ic { width: 34px; height: 34px; flex: none; color: var(--red); }
.ic-sm { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 46px; padding: 10px 22px;
  background: var(--red); color: var(--cream); border: 2px solid var(--red); border-radius: 999px;
  font: 800 1rem/1.2 var(--text); text-decoration: none; text-align: center; transition: background .2s, color .2s, transform .2s var(--ease);
}
.btn:hover { background: var(--red-lo); border-color: var(--red-lo); color: var(--cream); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn-sm { min-height: 40px; padding: 7px 16px; font-size: .92rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0; }
.cta-row.center { justify-content: center; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 8px max(20px, calc((100% - var(--wrap)) / 2));
  background: var(--board); border-bottom: 4px solid var(--frame); transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: 0 8px 22px rgba(43, 33, 27, .22); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.head-mark { width: 44px; height: 52px; }
.logo-name { font: 400 1.25rem/1.1 var(--display); }
.lang-ka .logo-name { font-weight: 800; font-size: 1.1rem; }
.nav { display: flex; gap: 6px; }
.nav a { padding: 8px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 700; }
.nav a:hover, .nav a[aria-current] { background: var(--wall); color: var(--ink); }
.lang { display: flex; gap: 2px; border: 2px solid var(--ink); border-radius: 999px; padding: 2px; }
.lang a { padding: 3px 10px; border-radius: 999px; font-weight: 800; font-size: .85rem; text-decoration: none; color: var(--ink); }
.lang a[aria-current] { background: var(--ink); color: var(--cream); }
.cta-bar { display: none; }

/* ---------- page frame ---------- */
.section, .hero, .page-head, .menu-board, .menu-more, .footer-inner, .chooser { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
.section { padding: 56px 0 24px; }
.panel { background: var(--board); border: 3px solid var(--frame); border-radius: 16px; box-shadow: 0 6px 0 rgba(138, 106, 66, .4); }
.sec-head { max-width: 720px; margin-bottom: 26px; }
.kicker, .eyebrow { margin: 0 0 .5em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--red-lo); }
.lang-ka .kicker, .lang-ka .eyebrow, .lang-ka .where-card strong { text-transform: none; letter-spacing: .03em; }
.brush { display: block; width: 150px; height: 12px; color: var(--red); margin: 2px 0 14px; overflow: visible; }
.brush path { stroke-dasharray: 1; }
.center .brush { margin-inline: auto; }
.section-intro { font-size: 1.1rem; max-width: 62ch; }
.more { margin-top: 26px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: center; padding: 34px 0 20px; }
.lede { font-size: 1.15rem; max-width: 56ch; }
h1 .w { display: inline-block; }
.facts { list-style: none; margin: 1.2em 0 0; padding: 0; display: grid; gap: 6px; font-weight: 600; }
.hero-visual { position: relative; justify-self: center; width: min(100%, 520px); }
.hero-art { display: block; width: 100%; height: auto; border-radius: 20px; border: 4px solid var(--frame); box-shadow: 0 10px 0 rgba(138, 106, 66, .45); cursor: pointer; background: var(--wall); }
.hero-art text { font-family: var(--display); font-weight: 400; }
.hero-art .sign-ka text { font-family: "NSGeo", var(--display); font-weight: 800; }
.hero-art .sign-en text { font-family: "Gabriela", Georgia, serif; }
.hero-hint { text-align: center; font-size: .85rem; color: var(--red-lo); margin: 10px 0 0; font-weight: 700; }
.hearts path { fill: var(--red); }

/* ---------- story, order ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.story-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.story-points li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; font-weight: 700; }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.order-item a { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding: 16px 18px; text-decoration: none; color: var(--ink); height: 100%; }
.order-item .ic { grid-row: span 2; width: 44px; height: 44px; }
.order-name { font-weight: 800; line-height: 1.25; }
.order-price { color: var(--red-lo); font-weight: 800; }
.order-item:hover { transform: translateY(-3px); }
.panel { transition: transform .25s var(--ease); }

/* ---------- guests ---------- */
.plates { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 26px; }
.plate { position: relative; display: grid; justify-items: center; gap: 2px; min-width: 230px; padding: 30px 26px 20px; text-decoration: none; color: var(--ink); transform-origin: 50% 0; }
.nail { position: absolute; top: 9px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); }
.rating-num { font: 400 3.4rem/1 var(--display); color: var(--red); }
.rating-src { font-weight: 800; }
.rating-count { color: #4a3d33; }
.rating-open { margin-top: 8px; font-weight: 800; color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
.aspects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.aspect { display: grid; justify-items: center; text-align: center; padding: 20px 16px; }
.aspect h3 { margin: 4px 0; }
.aspect p { margin: 0; font-size: .92rem; color: #4a3d33; }
.meter { width: 64px; height: auto; }
.aspect-pct { font: 400 1.9rem/1.1 var(--display); color: var(--red); }
.aspects-src { margin-top: 18px; font-size: .92rem; }

/* ---------- where ---------- */
.where { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 26px 34px; align-items: start; }
.where-card { padding: 22px 24px; grid-column: 1; }
.where-map { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.where-card strong { display: block; color: var(--red-lo); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.map-open, .where-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.walk { font-weight: 600; }
.map-sheet { overflow: hidden; padding: 6px; }
.osm { display: block; width: 100%; height: auto; border-radius: 9px; }
.osm text { font-family: var(--text); font-weight: 700; }
.osm .osm-names text, .osm .osm-places text { font-family: var(--text); }
.osm-tall { display: none; }
.osm-credit { font-size: .8rem; color: #4a3d33; margin: 8px 0 0; text-align: right; }
.osm-credit a { color: #4a3d33; }
.maps { position: relative; }
.map-tabs { display: none; gap: 8px; margin-bottom: 12px; }
html.ready .map-tabs { display: flex; }
.map-tab[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.map { position: relative; }
.map iframe { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border: 0; border-radius: 9px; background: var(--board); }
.route-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.route-mark { width: 70px; height: auto; margin-bottom: 8px; }

/* ---------- faq ---------- */
.qa-list { display: grid; gap: 10px; max-width: 820px; }
.qa { background: var(--board); border: 3px solid var(--frame); border-radius: 14px; padding: 0 20px; }
.qa summary { cursor: pointer; font-weight: 800; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.qa summary::after { content: "+"; font: 400 1.6rem/1 var(--display); color: var(--red); transition: transform .25s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary::-webkit-details-marker { display: none; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.qa-full { background: var(--board); border: 3px solid var(--frame); border-radius: 14px; padding: 20px 22px; }
.qa-full h2 { font-size: 1.3rem; }
.lang-ka .qa-full h2 { font-size: 1.1rem; }
.qa-full p { margin: 0; }

/* ---------- pages ---------- */
.page-head { padding: 40px 0 6px; position: relative; }
.page-mark { position: absolute; right: 0; top: 16px; width: 92px; height: auto; opacity: .95; }
.crumbs { font-size: .9rem; margin-bottom: 10px; font-weight: 700; }
.menu-jump { width: min(var(--wrap), calc(100% - 40px)); margin: 14px auto 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-jump a { padding: 6px 14px; border-radius: 999px; background: var(--board); border: 2px solid var(--frame); text-decoration: none; color: var(--ink); font-weight: 800; font-size: .92rem; }
.menu-jump a:hover { background: var(--ink); color: var(--cream); }
.menu-board { display: grid; gap: 22px; padding: 12px 0; }
.menu-section { background: var(--board); border: 3px solid var(--frame); border-radius: 18px; padding: 22px 26px; box-shadow: 0 6px 0 rgba(138, 106, 66, .4); }
.menu-head { display: flex; align-items: center; gap: 14px; }
.menu-head h2 { margin: 0; }
.dish-praise { margin: 6px 0 12px; font-size: .95rem; color: #4a3d33; }
.dishes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 44px; }
.dish { padding: 10px 0; border-bottom: 1px dashed var(--seam); }
.dish-row { display: flex; align-items: baseline; gap: 8px; margin: 0; font-weight: 800; }
.leader { flex: 1; border-bottom: 2px dotted var(--frame); transform: translateY(-4px); min-width: 12px; }
.price { color: var(--red); white-space: nowrap; }
.dish-text { margin: 2px 0 0; font-size: .92rem; color: #4a3d33; }
.menu-more { padding: 22px 26px; margin-top: 18px; text-align: center; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding-top: 10px; }
.contact-card { padding: 24px 26px; }
.contact-card h2 { font-size: 1.6rem; }
.hours { border-collapse: collapse; width: 100%; }
.hours th, .hours td { text-align: left; padding: 6px 0; border-bottom: 1px dashed var(--seam); font-weight: 600; }
.mt { margin-top: 1.4em; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-weight: 700; }

/* ---------- chooser and 404 ---------- */
.chooser { text-align: center; padding: 40px 0 60px; display: grid; justify-items: center; }
.chooser-mark, .lost-mark { width: 90px; height: auto; margin-bottom: 8px; }
.chooser h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
.big-404 { font: 400 6rem/1 var(--display); margin: 0; color: var(--red); }
body.page-404 { min-height: 100vh; }
.page-chooser .hero-visual { margin-top: 20px; }

/* ---------- footer: the street at night ---------- */
.site-footer { position: relative; margin-top: 70px; background: var(--night); color: var(--cream); padding-top: 0; }
.night-street { display: block; width: 100%; height: 170px; margin-top: -169px; }
.site-footer { overflow: visible; }
.footer-inner { padding: 36px 0 46px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font: 400 1.4rem/1.1 var(--display); margin: 0 0 8px; }
.lang-ka .footer-brand { font-weight: 800; font-size: 1.15rem; }
.foot-mark { width: 40px; height: 48px; }
.site-footer a { color: var(--glow); }
.site-footer a:hover { color: var(--cream); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-meta { margin: 26px 0 0; font-size: .9rem; opacity: .8; }
.site-footer :focus-visible { outline-color: var(--glow); }
.night-street .win { opacity: .92; }
.night-street .win.dark { opacity: .18; }
.night-street .stars circle { opacity: .9; }

@media (max-width: 900px) {
  .hero, .story, .where, .route-grid { grid-template-columns: minmax(0, 1fr); }
  .where-card, .where-map { grid-column: 1; grid-row: auto; }
  .hero .hero-visual { order: -1; width: min(100%, 420px); }
  .dishes { grid-template-columns: minmax(0, 1fr); }
  .contact-grid, .faq-list, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .osm-wide { display: none; }
  .osm-tall { display: block; }
  .page-mark { width: 60px; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .section, .hero, .page-head, .menu-board, .menu-more, .footer-inner, .chooser, .menu-jump { width: calc(100% - 32px); }
  .cta-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--board); border-top: 4px solid var(--frame); transition: transform .4s var(--ease); }
  .cta-bar .btn { flex: 1; }
  .site-footer { padding-bottom: 90px; }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: translateY(110%); }
  .site-header { gap: 10px; padding-inline: 14px; }
  .logo-name { font-size: 1.05rem; }
}
@media (max-width: 400px) {
  .head-call { display: none; }
  .lang a { padding: 3px 7px; }
  .btn { padding-inline: 16px; }
}

/* ================= motion ================= */
@media (prefers-reduced-motion: no-preference) {
  /* page transitions: the new page slides up from the sign; the header stays put */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: header; }
  ::view-transition-old(root) { animation: vt-out .3s ease-in both; }
  ::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }

  /* 1. the header tree: roots draw into a heart, trunks rise, branches draw, fruits pop, then the heart beats */
  html.js:not(.no-hide) .mark .mk-heart, html.js:not(.no-hide) .mark .mk-tendrils, html.js:not(.no-hide) .mark .mk-branches { stroke-dasharray: 1; animation: draw 1s var(--ease) .1s both; }
  html.js:not(.no-hide) .mark .mk-branches { animation-delay: .7s; }
  html.js:not(.no-hide) .mark .mk-trunks { animation: grow .7s var(--ease) .45s both; transform-box: fill-box; transform-origin: 50% 100%; }
  html.js:not(.no-hide) .mark .mk-fruit circle { animation: pop .5s var(--ease) calc(1.3s + var(--i) * .12s) both; transform-box: fill-box; transform-origin: center; }
  html.ready .mark .mk-heart { animation: heartbeat 3.2s ease-in-out 2s infinite; transform-box: fill-box; transform-origin: center; }

  /* 2. the headline: words rise one after another, then text and buttons; the brush strokes draw */
  html.js:not(.no-hide) h1 .w { animation: word-up .8s var(--ease) calc(.2s + var(--i) * .07s) both; }
  html.js:not(.no-hide) .hero .eyebrow { animation: fade-up .7s var(--ease) .1s both; }
  html.js:not(.no-hide) .hero .lede, html.js:not(.no-hide) .page-head .lede { animation: fade-up .8s var(--ease) .8s both; }
  html.js:not(.no-hide) .hero .cta-row, html.js:not(.no-hide) .hero .facts { animation: fade-up .8s var(--ease) 1s both; }
  .reveal.in .brush path, .brush.reveal.in path { animation: draw 1s var(--ease) .2s both; }
  html.js:not(.no-hide) .head-brush path { animation: draw 1.2s var(--ease) .6s both; }

  /* 3. the facade: the signboard drops and swings, the tree grows from its roots, fruits pop, the black cat walks in */
  html.js:not(.no-hide) .hero-art .board { animation: sign-drop 1.3s var(--ease) .3s both; transform-box: fill-box; transform-origin: 50% 0; }
  html.js:not(.no-hide) .hero-art .tree .roots { animation: fade .6s ease 1.2s both; }
  html.js:not(.no-hide) .hero-art .tree .crown { animation: grow 1.4s var(--ease) 1.5s both; transform-box: fill-box; transform-origin: 50% 100%; }
  html.js:not(.no-hide) .hero-art .tree .fruit circle { animation: pop .5s var(--ease) calc(2.7s + var(--i) * .1s) both; transform-box: fill-box; transform-origin: center; }
  html.js:not(.no-hide) .hero-art .cat-walk { animation: cat-in 1.6s var(--ease) 2s both; }
  html.js:not(.no-hide) .hero-art .twigs path { stroke-dasharray: 1; animation: draw 1.4s var(--ease) calc(.8s + var(--i) * .12s) both; }
  html.js:not(.no-hide) .hero-art .spill { animation: fade 1.2s ease 1.6s both; }
  html.js:not(.no-hide) .hero-art .window rect:nth-child(2) { animation: fade 1s ease 1s both; }
  html.ready .hero-art .tree .beat { animation: heartbeat 2.4s ease-in-out 3s infinite; transform-box: fill-box; transform-origin: 50% 20%; }
  html.ready .hero-art .cat-tail { animation: tail 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 0; }
  html.ready .hero-art .cat-eyes { animation: blink 5s ease-in-out 3s infinite; transform-box: fill-box; transform-origin: center; }
  html.ready .hero-art .lantern .halo { animation: flicker 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  html.ready .hero-art .w-lamp { animation: sway 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
  html.ready .hero-art .steam path { animation: steam 3s ease-out calc(var(--i) * .8s) infinite; transform-box: fill-box; transform-origin: center; }
  html.ready .hero-art .plant { animation: breeze 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  .hero-art.swing .board { animation: sign-kick 1.5s ease-out both; transform-box: fill-box; transform-origin: 50% 0; }
  .hearts path { animation: heart-up 1.5s ease-out both; transform-box: fill-box; transform-origin: center; }

  /* 4. reveals: panels and plates are dealt one by one; rating plates swing on their nails */
  html.js:not(.no-hide) .reveal:not(.in), html.js:not(.no-hide) .panel:not(.in), html.js:not(.no-hide) .plate:not(.in) { opacity: 0; transform: translateY(22px); }
  .reveal.in, .panel.in { animation: deal .8s var(--ease) both; animation-delay: calc(var(--i, 0) * .09s); }
  .plate.in { animation: swing-in 1.4s var(--ease) calc(var(--i, 0) * .2s) both; }
  html.js:not(.no-hide) .aspect:not(.in) .fill { clip-path: inset(100% 0 0 0) !important; }
  .aspect.in .fill { animation: fill-up 1.2s var(--ease) calc(.3s + var(--i, 0) * .09s) both; }
  html.js:not(.no-hide) .dish.in { animation: fade-up .6s var(--ease) both; }

  /* 5. the map: the pin pulses, the walk marches */
  html.ready .osm-pin .pulse { animation: pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  html.ready .osm-pin .pin-beat { animation: heartbeat 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  html.ready .osm-walk { animation: march 1.6s linear infinite; }

  /* 6. the footer street: windows light up one by one, stars twinkle, lamps glow, the cat sleeps on its balcony */
  html.js:not(.no-hide) .site-footer:not(.in) .win { opacity: 0; }
  .site-footer.in .win { animation: fade .8s ease calc(var(--i) * .11s) both; }
  html.ready .night-street .stars circle { animation: twinkle 3.6s ease-in-out calc(var(--i) * .5s) infinite; }
  html.ready .night-street .lamp-glow { animation: flicker 4s ease-in-out calc(var(--i) * 1.3s) infinite; transform-box: fill-box; transform-origin: center; }
  html.ready .night-street .breath { animation: breathe 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  html.ready .site-footer .foot-mark .mk-heart { animation: heartbeat 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

  /* everything endless sleeps off screen and in a hidden tab */
  :is(.off, .tab-hidden) :is(.cat-tail, .cat-eyes, .halo, .w-lamp, .steam path, .plant, .beat, .pulse, .pin-beat, .osm-walk, .stars circle, .lamp-glow, .breath, .mk-heart) { animation-play-state: paused !important; }
  .off :is(.cat-tail, .cat-eyes, .halo, .w-lamp, .steam path, .plant, .beat, .pulse, .pin-beat, .osm-walk, .stars circle, .lamp-glow, .breath, .mk-heart), .tab-hidden * { animation-play-state: paused; }
}

@keyframes fade { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes word-up { from { opacity: 0; transform: translateY(.55em) rotate(2deg); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.2); } }
@keyframes grow { from { opacity: 0; transform: scale(.2) translateY(14%); } }
@keyframes deal { from { opacity: 0; transform: translateY(26px) rotate(-1deg) scale(.97); } }
@keyframes swing-in { 0% { opacity: 0; transform: translateY(-30px) rotate(-12deg); } 45% { opacity: 1; transform: rotate(6deg); } 70% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes sign-drop { 0% { transform: translateY(-80px) rotate(0); opacity: 0; } 30% { opacity: 1; } 55% { transform: translateY(0) rotate(3deg); } 75% { transform: rotate(-1.6deg); } 90% { transform: rotate(.6deg); } 100% { transform: none; } }
@keyframes sign-kick { 0% { transform: rotate(0); } 18% { transform: rotate(4deg); } 40% { transform: rotate(-3deg); } 62% { transform: rotate(1.8deg); } 82% { transform: rotate(-.7deg); } 100% { transform: rotate(0); } }
@keyframes cat-in { from { opacity: 0; transform: translateX(150px); } }
@keyframes heartbeat { 0%, 60%, 100% { transform: scale(1); } 14% { transform: scale(1.1); } 28% { transform: scale(.97); } 42% { transform: scale(1.06); } }
@keyframes tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes flicker { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: .7; transform: scale(.92); } 55% { opacity: .95; transform: scale(1.05); } }
@keyframes sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(2.4deg); } 70% { transform: rotate(-2.4deg); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px) scaleY(.7); } 35% { opacity: .85; } 100% { opacity: 0; transform: translateY(-18px) scaleY(1.15); } }
@keyframes breeze { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.6deg); } }
@keyframes twinkle { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .25; transform: scale(.6); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04, 1.07); } }
@keyframes fill-up { from { clip-path: inset(100% 0 0 0); } }
@keyframes heart-up { 0% { opacity: 1; transform: translateY(0) scale(.4); } 100% { opacity: 0; transform: translate(var(--dx, 0), -110px) scale(1.1) rotate(var(--r, 0)); } }
@keyframes pulse { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes march { to { stroke-dashoffset: var(--p, -20); } }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { clip-path: inset(0 0 99% 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}