/* =========================================================================
   سرقفلی — «زینتِ حجره»: the decorations' layers, ink and motion (js/decor.js). Load after css/scenery.css.
   Motion is transform/opacity keyframes only; the global .calm-motion rule in style.css stops it.
   ========================================================================= */
.screen-day .decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.decor .dc-p { position: absolute; overflow: visible; transform-origin: 50% 0; }
.decor svg, svg.decor-icon { stroke-linejoin: round; stroke-linecap: round; overflow: visible; }
.decor .k, .decor-icon .k { stroke: #2e1a10; }
.decor text, .decor-icon text { font-family: Vazirmatn, sans-serif; font-weight: 800; text-anchor: middle; user-select: none; }
.decor text.l, .decor-icon text.l { font-family: Lalezar, Vazirmatn, sans-serif; font-weight: 400; }
.decor text.n, .decor-icon text.n { font-family: 'Noto Nastaliq Urdu', Vazirmatn, serif; font-weight: 400; }
svg.decor-icon { display: block; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }

/* the clock's pendulum */
@keyframes dcSwing { from { transform: rotate(6deg); } to { transform: rotate(-6deg); } }
.dc-swing { transform-box: fill-box; transform-origin: 50% 0; animation: dcSwing 1s ease-in-out infinite alternate; }
/* the canary hops now and then */
@keyframes dcHop { 0%, 76%, 100% { transform: translateY(0); } 80% { transform: translateY(-4px); } 84% { transform: translateY(0); } 88% { transform: translateY(-3px); } 92% { transform: translateY(0); } }
.dc-hop { animation: dcHop 5.5s ease-in-out infinite; }
/* the evil eye sways on its string */
@keyframes dcSway { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
.dc-sway { transform-box: fill-box; transform-origin: 50% 0; animation: dcSway 3.6s ease-in-out infinite; }
/* the cat: a slow tail, an ear that flicks once in a while */
@keyframes dcTail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
.dc-tail { transform-box: fill-box; transform-origin: 100% 0; animation: dcTail 4.2s ease-in-out infinite; }
@keyframes dcEar { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-18deg); } 94% { transform: rotate(0); } 96% { transform: rotate(-12deg); } }
.dc-ear { transform-box: fill-box; transform-origin: 30% 100%; animation: dcEar 7s ease-in-out infinite; }
/* the goldfish swims to one side, turns, swims back */
@keyframes dcFish { 0% { transform: translateX(-5px) scaleX(1); } 45% { transform: translateX(4px) scaleX(1); } 50% { transform: translateX(4px) scaleX(-1); } 95% { transform: translateX(-5px) scaleX(-1); } 100% { transform: translateX(-5px) scaleX(1); } }
.dc-fish { transform-box: fill-box; transform-origin: 50% 50%; animation: dcFish 6s ease-in-out infinite; }
/* mirror-work glints */
@keyframes dcSpark { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 80% { opacity: 1; transform: scale(1); } 90% { opacity: 0; } }
.dc-spark { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dcSpark 4s ease-in-out infinite; }
/* the pigeon bobs its head */
@keyframes dcBob { 0%, 60%, 100% { transform: none; } 66% { transform: translate(-1.6px, 1.4px) rotate(-12deg); } 72% { transform: none; } 78% { transform: translate(-1.6px, 1.4px) rotate(-12deg); } 84% { transform: none; } }
.dc-bob { transform-box: fill-box; transform-origin: 80% 100%; animation: dcBob 3.4s ease-in-out infinite; }
/* the legendary tiles catch the light */
@keyframes dcShine { 0%, 68% { transform: translateX(0); } 100% { transform: translateX(150px); } }
.dc-shine { animation: dcShine 6.5s ease-in-out infinite; }