/* =========================================================================
   سرقفلی — scenery for the day screen (js/scenery.js). Load AFTER css/style.css.
   The father's shop is the look of every act: no per-act walls, counter, slots or sign colours here. Each act only adds
   props (js/scenery.js); nothing below is per-act.
   ========================================================================= */

/* ---------- the layers ---------- */
.screen-day .queue-col { position: relative; isolation: isolate; }   /* lets the queue layer sit under the door and labels */
.screen-day .shelf-wrap { isolation: isolate; }
.screen-day .scenery { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.screen-day .scenery.sc-queue, .screen-day .scenery.sc-shelf { z-index: -1; }
.screen-day .scenery.sc-door, .screen-day .scenery.sc-ledge, .screen-day .scenery.sc-heritage { overflow: visible; }
.scenery .sc-p { position: absolute; overflow: visible; transform-origin: 50% 0; }
.scenery .sc-edge { position: absolute; }
.scenery .sc-light { position: absolute; inset: 0; }
.scenery svg { stroke-linejoin: round; stroke-linecap: round; }
.scenery .k { stroke: #2e1a10; }                                   /* the warm ink outline (js: L()) */
.scenery text { font-family: Vazirmatn, sans-serif; font-weight: 800; text-anchor: middle; user-select: none; }
.scenery text.l { font-family: Lalezar, Vazirmatn, sans-serif; font-weight: 400; }
.scenery text.n { font-family: 'Noto Nastaliq Urdu', Vazirmatn, serif; font-weight: 400; }

/* ---------- the father's shop, in every act ---------- */
/* the walnut ledge above the slots: Mom's sabzeh, the decor and each act's small goods stand on it */
.screen-day .sc-edge { background: linear-gradient(#8a5d3c, #52331f); border-bottom: 2px solid #2a180e; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
/* the lantern's warm pool and a soft vignette over the wall */
.screen-day .sc-light {
  background:
    radial-gradient(circle at 97% 21%, rgba(249, 233, 189, .12), transparent 26%),
    radial-gradient(ellipse 85% 75% at 58% 42%, transparent 58%, rgba(14, 8, 5, .3));
}
/* the sign grows with the shop in the father's own nastaliq (js: SCENERY.sign); even act 5's line is ~210px of the ~620px band */

/* ---------- motion: LEDs, the neon, festival bulbs (all compositor-only opacity) ---------- */
@keyframes scBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } }
@keyframes scNeon { 0%, 90%, 92%, 95%, 100% { opacity: 1; } 91%, 93.5% { opacity: .4; } }
@keyframes scBulb { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .62; } }
.scenery .sc-led { animation: scBlink 1.1s steps(1) infinite; }
.scenery .sc-neon { animation: scNeon 6s infinite; }
.scenery .sc-bulb.a { animation: scBulb 2.6s steps(1) infinite; }
.scenery .sc-bulb.b { animation: scBulb 2.6s steps(1) -1.3s infinite; }
/* power cut («برق رفت»): the neon, the LEDs, the bulbs and the picture-lamp go dark */
.screen-day:has(.blackout.on, .blackout.candle) .scenery .sc-glow,
.screen-day:has(.blackout.on, .blackout.candle) .scenery .sc-led { animation: none; opacity: .25; }
/* a busy day stacks the mod chips down the door column: the floor props there step back */
.screen-day .queue-col:has(.day-chips .chip:nth-child(3)) .sc-queue { opacity: .3; }

/* =========================================================================
   TIME: daylight wash · weather in the doorway · Mom's sabzeh (SCENERY.time / SCENERY.light)
   ========================================================================= */
.screen-day .scenery.sc-tint { background: var(--sc-tint, transparent); }
.screen-day .scenery.sc-sabzeh { overflow: visible; }
@keyframes scFall { to { transform: translateY(340px); } }
@keyframes scRise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-560px); opacity: .15; } }
@keyframes scBurst { 0% { transform: scale(.2); opacity: 0; } 8% { opacity: 1; } 42%, 100% { transform: scale(1); opacity: 0; } }
@keyframes scFlick { 50% { transform: scaleY(.86); opacity: .82; } }
@keyframes scSwallow { 0% { transform: translate(178px, 86px) rotate(-6deg); } 34% { transform: translate(78px, 54px) rotate(4deg); } 62%, 100% { transform: translate(-34px, 70px) rotate(-4deg); } }
@keyframes scPetal { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(-26px, 170px) rotate(220deg); opacity: 0; } }
.scenery .sc-fall.s1 { animation: scFall 10s linear infinite; }
.scenery .sc-fall.s2 { animation: scFall 17s linear infinite; }
.scenery .sc-fall.rain { animation: scFall .75s linear infinite; }
.scenery .sc-rise { animation: scRise 6s linear infinite; }
.scenery .sc-rise.b { animation-duration: 8.5s; animation-delay: -4s; }
.scenery .sc-burst { transform-box: fill-box; transform-origin: center; animation: scBurst 3.4s ease-out infinite; }
.scenery .sc-flick { transform-box: fill-box; transform-origin: 50% 100%; animation: scFlick .55s ease-in-out infinite; }
.scenery .sc-swallow { animation: scSwallow 11s ease-in-out infinite; }
.scenery .sc-petal { animation: scPetal 8s linear infinite; }