/* «החלונות» (3.11.2026): windows.js. The same file in both dashboards: wa-bot-saas public/assets/css and maane site/assets. */
/* ── a scene ── */
.fi-scene { --s-ink: #1b1a17; --s-paper: #f5efdc; --s-white: #fffdf7; display: block; overflow: hidden; background: var(--s-paper); border-radius: var(--leaf, 30px 8px 30px 8px); cursor: pointer; }
.fi-scene--night { --s-ink: #fbf6e8; --s-paper: #1f1d19; --s-white: #2c2a25; }
.fi-scene--soon { --s-paper: #faf8f1; outline: 2px dashed #0003; outline-offset: -2px; }
.fi-scene svg { display: block; width: 100%; height: auto; }
.fi-scene .o > * { fill: var(--s-ink); stroke: var(--s-ink); }
.fi-scene .o > .w { fill: none; }
.fi-scene .p > * { fill: var(--s-paper); stroke: none; }
.fi-scene .p > .w { fill: none; stroke: var(--s-paper); }
.fi-scene .p > .wh { fill: var(--s-white); }
.fi-scene .p > .y { fill: var(--yellow, #ffe81a); }
.fi-scene .k > * { fill: var(--s-ink); stroke: none; }
.fi-scene .k > .w { fill: none; stroke: var(--s-ink); }
.fi-scene .gr { fill: var(--s-ink); }
.fi-scene :is(image, g, .gr) { transform-box: fill-box; }

/* the film: every part waits for its --t */
.fi-scene :is(.o, .p, .k) > * { stroke-dasharray: 1; }
.fi-scene :is(.o > .w, .p > .w, .k > .w) { animation: sc-draw .9s cubic-bezier(.22, 1, .36, 1) var(--t, 0s) both; }
.fi-scene .o > :not(.w) { animation: sc-draw .9s cubic-bezier(.22, 1, .36, 1) var(--t, 0s) both, sc-ink .9s steps(1, end) var(--t, 0s) both; }
.fi-scene .p > :not(.w, .wh) { animation: fi-show .01s linear calc(var(--t, 0s) + .1s) both; }
.fi-scene :is(.k > :not(.w), .p > .wh) { animation: sc-fade .3s ease calc(var(--t, 0s) + .5s) both; }
.fi-scene .gr { transform-origin: 100% 50%; animation: sc-floor .7s cubic-bezier(.22, 1, .36, 1) both; }
.fi-scene .sky { animation: sc-rise .9s ease-out var(--t, 0s) both; }
.fi-scene image { animation: sc-pop .5s cubic-bezier(.3, 1.3, .5, 1) var(--t, 0s) both; }
@keyframes fi-show { from { opacity: 0; } }
@keyframes fi-out { to { opacity: 0; transform: scale(.7); } }

/* בשיחות: הרולר עובד כל הזמן, הטלפון נוחת ומצלצל, נרגע, והתשובה הצהובה יוצאת */
.fi-scene[data-p="phone"] .roll { transform-origin: 83.3% 100%; animation: sc-roll 1.5s ease-in-out .9s 5; }
.fi-scene[data-p="phone"] .ring { transform-origin: 50% 100%; animation: sc-drop .55s cubic-bezier(.3, 1.25, .5, 1) var(--t) both, sc-shake 1s ease-in-out calc(var(--t) + .5s) 2; }
.fi-scene[data-p="phone"] .ring image { animation: none; }
.fi-scene[data-p="phone"] .ring .live { animation: sc-blink 1.1s linear calc(var(--t) + .5s) 2 both; }
/* בהודעות: לילה, העסק סגור, השאלה קופצת, והתשובה הצהובה כבר שם */
.fi-scene[data-p="bot"] { --t: 0s; }
/* במזכירה: טלפון קטן מצלצל ונעלם, והיומן נתלה, והתור נחתם */
.fi-scene[data-p="agent"] .fi-call { animation: sc-pop .4s cubic-bezier(.3, 1.3, .5, 1) var(--t) both, sc-shake 1s ease-in-out calc(var(--t) + .4s) 2, fi-out .3s ease 5.1s forwards; transform-origin: 50% 100%; }
.fi-scene[data-p="agent"] .live { animation: sc-stamp .45s cubic-bezier(.3, 1.3, .5, 1) var(--t) both; }
.fi-scene[data-p="agent"] .base { animation: sc-rise .5s cubic-bezier(.22, 1, .36, 1) var(--t) both; }
/* במשימות: המחשבות עולות, הדף נוחת, והעט מסמן שורה אחרי שורה */
.fi-scene[data-p="tasks"] .th { transform-origin: 50% 50%; animation: sc-pop .4s cubic-bezier(.3, 1.3, .5, 1) var(--t) both; }
.fi-scene[data-p="tasks"] .note > .base { animation: sc-rise .5s cubic-bezier(.22, 1, .36, 1) 2.9s both; }
.fi-scene[data-p="tasks"] .tick { animation: sc-pop .3s cubic-bezier(.3, 1.3, .5, 1) calc(5.7s + var(--n) * .6s) both; }
.fi-scene[data-p="tasks"] .pen { animation: sc-pop .4s ease 3.4s both, sc-pen 1.9s ease-in-out 5.5s both; }
.fi-still *, .fi-still.fi-scene * { animation: none !important; }

/* the sentences, one at a time, in the same place */
.fi-say { display: grid; min-height: 3.2em; margin: 18px 4px 0; font: 25px/1.28 var(--f-display, serif); color: var(--ink, #1b1a17); text-align: center; text-wrap: balance; }
.fi-line { grid-area: 1 / 1; animation: fi-line var(--d) linear var(--t) both; }
.fi-line.is-last { animation-name: fi-line-last; }
.fi-line mark { background: var(--yellow, #ffe81a); color: #1b1a17; padding: 0 .16em; border-radius: 4px; }
@keyframes fi-line { 0% { opacity: 0; transform: translateY(10px); } 12% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fi-line-last { 0% { opacity: 0; transform: translateY(10px); } 12%, 100% { opacity: 1; transform: none; } }

/* ── the door ── */
.fi-door { position: fixed; inset: auto 0 0 !important; width: 100%; max-width: 480px; max-height: none; height: auto; margin: 0 auto !important; padding: 0; border: 0; background: transparent; color: var(--ink, #1b1a17); overflow: visible; direction: rtl; }
.fi-door::backdrop { background: rgb(27 26 23 / .45); }
.fi-door[open] .fi-door__box { animation: fi-rise .46s cubic-bezier(.2, 1.15, .4, 1) both; }
@keyframes fi-rise { from { transform: translateY(70px); opacity: 0; } }
.fi-door__box { position: relative; padding: 20px 16px calc(22px + env(safe-area-inset-bottom)); background: var(--page, #faf8f1); border-radius: 28px 28px 0 0; max-height: 100dvh; overflow: hidden auto; }
.fi-x { position: absolute; z-index: 2; top: 12px; left: 12px; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; font-size: 20px; line-height: 1; color: var(--ink-soft, #57534a); cursor: pointer; }
.fi-name { margin: 2px 0 14px; font: 18px/1.3 var(--f-body, sans-serif); color: var(--ink-soft, #57534a); text-align: center; }
.fi-name b { font: 400 18px/1.3 var(--f-ui, sans-serif); color: var(--ink, #1b1a17); }
.fi-film { position: relative; }
.fi-name:focus { outline: none; }
.fi-again { animation: sc-fade .4s ease 8.6s both; position: absolute; bottom: 8px; left: 8px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgb(127 127 127 / .22); color: inherit; font-size: 18px; cursor: pointer; }
.fi-acts { display: grid; gap: 4px; margin-top: 14px; }
.fi-acts .btn { width: 100%; }
.fi-links { display: flex; justify-content: center; gap: 22px; }
.fi-more, .fi-in { min-height: 44px; padding: 0; background: none; border: 0; font: 16px/1 var(--f-ui, sans-serif); color: var(--ink, #1b1a17); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.fi-rows { margin: 6px 0 0; padding: 0; list-style: none; text-align: center; font: 16px/1.9 var(--f-body, sans-serif); color: var(--ink-2, #2b2925); }
.fi-rows .fi-soon { margin-top: 6px; font-family: var(--f-ui, sans-serif); }

.fi-grow { position: fixed; z-index: 2147483000; background: var(--page, #faf8f1); }
.fi-flyer { position: fixed; z-index: 2147483000; transform-origin: 0 0; pointer-events: none; }

/* the first entry: the whole screen is the film */
.fi-door.is-entry { inset: 0 !important; max-width: none; height: 100dvh; }
.fi-door.is-entry .fi-door__box { display: flex; flex-direction: column; justify-content: center; height: 100%; padding-inline: 16px; border-radius: 0; }
.fi-door.is-entry .fi-x { display: none; }

/* ── one building, a window per product ── */
.fi-house { position: relative; margin: 6px 0 8px; overflow: hidden; background: var(--band, #1f1d19); border-radius: var(--leaf, 30px 8px 30px 8px); color: var(--on-band, #fbf6e8); }
.fi-house svg { display: block; width: 100%; height: auto; }
.fi-l { fill: none; stroke: var(--on-band, #fbf6e8); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: sc-draw 1.1s cubic-bezier(.22, 1, .36, 1) both; }
.fi-moon { fill: var(--on-band, #fbf6e8); animation: sc-rise .9s ease-out .2s both; }
.fi-sign { font: 24px var(--f-ui, sans-serif); fill: var(--on-band, #fbf6e8); animation: sc-fade .5s ease .7s both; }
.fi-wins { position: absolute; inset: 47% 8.6% 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; padding-bottom: 2.5%; direction: rtl; }
.fi-win { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; animation: sc-fade .4s ease calc(.7s + var(--n) * .12s) both; -webkit-tap-highlight-color: transparent; }
.fi-pane { display: grid; place-items: center; aspect-ratio: 1 / 1.08; padding: 14%; background: var(--band-2, #2c2a25); border: 1.5px solid var(--on-band, #fbf6e8); border-radius: 6px 6px 3px 3px; transition: background .3s, box-shadow .3s, transform .15s; }
.fi-pane img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(.96); opacity: .3; transition: opacity .3s, filter .3s; }
.fi-word { font: 13px/1.1 var(--f-ui, sans-serif); text-align: center; opacity: .72; }
.fi-win:active .fi-pane { transform: scale(.96); }
.fi-win:focus-visible .fi-pane { outline: 3px solid var(--yellow, #ffe81a); outline-offset: 2px; }
.fi-win.is-lit .fi-pane { background: var(--yellow, #ffe81a); border-color: var(--yellow, #ffe81a); box-shadow: 0 0 26px rgb(255 232 26 / .35); }
.fi-win.is-lit .fi-pane img { filter: none; opacity: 1; }
.fi-win.is-lit .fi-word { opacity: 1; }
.fi-win.is-soon .fi-pane { border-style: dashed; }
.fi-win.is-new .fi-pane { animation: fi-light 1s ease both; }
@keyframes fi-light { 0% { background: var(--band-2); box-shadow: none; } 18% { background: var(--yellow); } 30% { background: var(--band-2); } 50% { background: var(--yellow); box-shadow: 0 0 60px rgb(255 232 26 / .8); } }
.fi-house.is-drawn :is(.fi-l, .fi-moon, .fi-sign, .fi-win) { animation: none; }
.fi-househint { margin: 0 4px 16px; font: 15px/1.4 var(--f-body, sans-serif); color: var(--ink-soft, #57534a); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .fi-scene *, .fi-house *, .fi-door__box { animation: none !important; }
  .fi-say { display: block; font-size: 21px; }
  .fi-line { display: block; animation: none; }
  .fi-again { display: none; }
}

@keyframes sc-draw { from { stroke-dashoffset: 1; } }
@keyframes sc-ink { from { fill-opacity: 0; } }
@keyframes sc-fade { from { opacity: 0; } }
@keyframes sc-floor { from { transform: scaleX(0); } }
@keyframes sc-mark { from { background-size: 0 100%; } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes sc-pop { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes sc-drop { from { opacity: 0; transform: translateY(-30px); } }
@keyframes sc-stamp { from { opacity: 0; transform: scale(1.7) rotate(-10deg); } }
@keyframes sc-roll { 0%, 100% { transform: none; } 30% { transform: rotate(-7deg); } 65% { transform: rotate(3deg); } }
@keyframes sc-shake { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: rotate(-4deg); } 20%, 40%, 60%, 80% { transform: rotate(4deg); } }
@keyframes sc-blink { 0% { opacity: 0; } 12%, 40%, 70%, 100% { opacity: 1; } 26%, 55% { opacity: 0.25; } }
@keyframes sc-pen {
  0% { opacity: 0; transform: translate(calc(var(--dx) * -2), calc(var(--dy) * -2)); }
  15%, 30% { opacity: 1; transform: translate(calc(var(--dx) * -2), calc(var(--dy) * -2)); }
  48%, 62% { opacity: 1; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)); }
  82%, 100% { opacity: 1; transform: none; }
}
html.has-windows #room-home .ink-scene, html.has-windows #famcard { display: none !important; }