/* «הרגשה» (2.11.2026): Achiya, on onimli's settings, «שירגיש יותר פרמיום שיהיה כיף לפתוח אותה ולהשתמש בה בכל
   אזור שם וכל רגע יהיה כיפי», and of three feels he picked ב׳ «חי». The bot's layer (wa-bot-saas
   public/assets/css/feel.css), here on this dashboard's own road and sheet. Nothing in it moves or hides: every touch
   answers (the road comes in, a switch springs and fills, a pick is stamped, «נשמר» is pressed in, a new answer settles
   into its tile, the drawer rises on the sheet's own curve), and every paper object flies from the road into the sheet,
   does its own thing there (the bell swings, the horn blasts, the receipt prints), nods when something in it changes,
   and flies home on close (feel.js). html.feel turns it on (app/index.html). family.css's reduced-motion rule stops
   every animation here; feel.js plays nothing then either. Before night.css, so the night keeps its own colours. */

:root { --feel-settle: cubic-bezier(0.16, 1, 0.3, 1); --feel-sheet: cubic-bezier(0.32, 0.72, 0, 1); --feel-press: cubic-bezier(0.3, 1.3, 0.6, 1); }

/* the road: its stops come in one after another, each paper object set down on the desk */
html.feel .room:not([hidden]) .stop { animation: feel-stop-in 0.6s var(--feel-settle) backwards; animation-delay: calc(min(var(--i, 0), 8) * 55ms + 80ms); }
html.feel .room:not([hidden]) .stop .stop__pic img { animation: feel-set-down 0.75s var(--feel-settle) backwards; animation-delay: calc(min(var(--i, 0), 8) * 55ms + 80ms); }
@keyframes feel-stop-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes feel-set-down { from { opacity: 0; transform: translateY(-16px) rotate(-7deg) scale(1.08); } 60% { transform: translateY(1px) rotate(1deg) scale(0.99); } }   /* no opacity mid-way: a quiet stop (.is-not) stays faint */
html.feel .stop__pic img { transition: transform 0.4s var(--feel-press); }
html.feel .stop:not(.stop--push):active .stop__pic img { transform: scale(0.9); transition-duration: 0.12s; }
@media (hover: hover) { html.feel .stop:not(.stop--push):hover .stop__pic img { transform: translateY(-3px) rotate(-3deg); } }
html.feel .stop__val b { font-variant-numeric: tabular-nums; }

/* a sheet's contents come up after it, in reading order (feel.js numbers them); the drawer and the save line have their own */
html.feel .sheet.is-open :is(.sx-board > *, .sheet__body > .editor > :not(.sx-board, .sx-dock, .editor__msg)) { animation: feel-rise 0.5s var(--feel-settle) backwards; animation-delay: calc(min(var(--j, 0), 10) * 26ms + 150ms); }
html.feel .sheet.is-open .sheet__title { animation: feel-rise 0.5s var(--feel-settle) 0.1s backwards; }
@keyframes feel-rise { from { opacity: 0; transform: translateY(10px); } }

/* a tile: it gives under the finger, lifts under the pointer, and a new answer settles into it like fresh ink */
html.feel .sx-tile { transition: box-shadow 0.25s ease, transform 0.35s var(--feel-press), opacity 0.2s ease; }
html.feel .sx-tile:active { transform: scale(0.975); transition-duration: 0.1s; }
@media (hover: hover) { html.feel .sx-tile:not(.is-open):hover { box-shadow: 0 0 0 1px var(--line-strong), 0 8px 20px rgba(27, 26, 23, 0.07); transform: translateY(-1px); } }
html.feel .sx-tile.is-open { transform: translateY(-2px); }
html.feel .sx-tile__a.feel-new { animation: feel-ink 0.5s var(--feel-settle); }
@keyframes feel-ink { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }

/* «נשמר»: pressed in, its tick stamped (pre: the space after «✓» stays in the stamped box) */
html.feel .sx-tile .sx-saved { transform: translateY(4px) scale(0.85); transition: opacity 0.25s ease, transform 0.45s var(--feel-press); }
html.feel .sx-tile .sx-saved.is-on { transform: none; }
html.feel .sx-saved.is-on::before { display: inline-block; white-space: pre; animation: feel-tick 0.5s var(--feel-press) 0.06s backwards; }
@keyframes feel-tick { from { opacity: 0; transform: scale(0.2) rotate(-40deg); } }
html.feel .editor__msg:not(:empty) { animation: feel-rise 0.45s var(--feel-settle); }

/* a switch: the knob stretches under the finger, springs across, and ink follows it in */
html.feel .sx-sw { background-color: var(--calm-fill); background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-position: right center; background-size: 0% 100%; transition: background-size 0.42s var(--feel-settle), border-color 0.2s ease; }
html.feel [aria-checked="true"] > .sx-sw { background-color: var(--calm-fill); background-size: 100% 100%; }
html.feel .sx-sw::after { transition: inset-inline-start 0.45s var(--feel-press), width 0.18s ease; }
html.feel .sx-tile--switch:active .sx-sw::after { width: 26px; }
html.feel .sx-tile--switch[aria-checked="true"]:active .sx-sw::after { inset-inline-start: 17px; }
html.feel .sx-sw.feel-on { animation: feel-halo 0.7s ease-out; }
@keyframes feel-halo { from { box-shadow: 0 0 0 0 rgba(255, 232, 26, 0.75); } to { box-shadow: 0 0 0 12px rgba(255, 232, 26, 0); } }
/* the family's own switch (.toggle input) springs across too */
html.feel .toggle input::after { transition: right 0.45s var(--feel-press); }

/* a pick in the drawer: it gives, and its tick is stamped on */
html.feel .sx-opt { transition: transform 0.3s var(--feel-press), border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
html.feel .sx-opt:active { transform: scale(0.97); transition-duration: 0.1s; }
html.feel .sx-opt[aria-pressed="true"]::after { animation: feel-stamp 0.45s var(--feel-press) backwards; }
@keyframes feel-stamp { from { opacity: 0; transform: translateY(-50%) scale(0.2) rotate(-35deg); } }

/* the drawer rises on the sheet's own curve, whole (paper: nothing shows through it) */
html.feel .sx-dock__box { animation: feel-dock 0.5s var(--feel-sheet); }
@keyframes feel-dock { from { transform: translateY(70%); } }

/* a field taken: the ring closes in around it */
html.feel .sheet :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) { transition: outline-offset 0.3s var(--feel-press), border-color 0.2s ease, background-color 0.2s ease; }
html.feel .sheet :is(input, select, textarea):not(:focus-visible) { outline-offset: 7px; }

/* ---------- the paper objects ---------- */

/* the scrim is warm, like the desk's own shade, not a grey veil (night.css keeps the night's own) */
html.feel .sheet__scrim { background: rgba(48, 38, 18, 0.36); }
/* the object in the sheet is held (feel.js plays its moment), over the words around it and under the sticky name */
html.feel .sheet__pic { position: relative; z-index: 1; }
.feel-fly { position: fixed; z-index: 2147483000; margin: 0; object-fit: contain; pointer-events: none; transform-origin: 0 0; will-change: transform; }