/* المحل وحركة الأيقونات: مشترك بين الصفحة الرئيسية والتسجيل وكل اللوحات */
:root { --night: 0; --win: 0; --signal: #5dffb1; }

.shop svg, svg { overflow: visible; }
.shutter, .awning { transition: transform 1s cubic-bezier(.3, 1.25, .45, 1); }
.shutter { transform: translateY(0); }
.shop.open .shutter { transform: translateY(-286px); }
.awning { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.05); }
.shop.open .awning { transform: scaleY(1); transition-delay: .35s; }
.signlight { opacity: .22; transition: opacity .5s; }
.shop.open .signlight { opacity: 1; }
.shop.signal .signframe { stroke: var(--signal); stroke-width: 4; }
.glow { opacity: 0; transition: opacity .7s; pointer-events: none; }
.shop.open .glow { opacity: calc(.2 + var(--night) * .8); }
.bulb { fill: #6a4a3a; transition: fill .3s; }
.shop.open .bulb { fill: #ffe58a; }
.arm { transform-box: fill-box; transform-origin: 50% 100%; }
.latwin { opacity: var(--win); }
.lamp-glow { opacity: var(--night); }
.tail { transform-box: fill-box; transform-origin: 0% 100%; }

/* أيقونات: قطع ملونة من حياتنا اليومية */
.i-steam path { stroke-width: 2.4; stroke-dasharray: 14; }
.i-spoon, .i-squish { transform-box: fill-box; transform-origin: 50% 100%; }
.i-beam { transform-box: view-box; transform-origin: 32px 16px; }
.i-pan { transform-box: fill-box; transform-origin: 50% 0; }
.i-swing { transform-box: view-box; transform-origin: 32px 6px; }
.i-spiral { stroke-dasharray: 260; }

@media (prefers-reduced-motion: no-preference) {
  .shop.open .bulb:nth-child(odd) { animation: chase 1s steps(2) infinite; }
  .shop.open .arm { animation: wave .55s ease-in-out infinite alternate; }
  .tail { animation: tail 1.6s ease-in-out infinite alternate; }
  .i-steam path { animation: steam 2s linear infinite; }
  .i-steam path:nth-child(2) { animation-delay: .7s; }
  .i-spoon { animation: stir 1.1s ease-in-out infinite alternate; }
  .i-squish { animation: squish 1.7s ease-in-out infinite; }
  .i-beam { animation: tip 2.3s ease-in-out infinite alternate; }
  .i-pan { animation: tipcounter 2.3s ease-in-out infinite alternate; }
  .i-spiral { animation: spiral 3.2s ease-in-out infinite; }
  .i-swing { animation: swing 2s ease-in-out infinite alternate; }
  .i-roll { animation: roll 2.8s cubic-bezier(.4, 1.3, .6, 1) infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  .i-spiral { stroke-dasharray: none; }
  .shutter, .awning { transition-duration: .01s; }
}
@keyframes chase { 50% { fill: #b9792a; } }
@keyframes wave { from { rotate: -22deg; } to { rotate: 24deg; } }
@keyframes tail { from { rotate: -14deg; } to { rotate: 20deg; } }
@keyframes steam { 0% { stroke-dashoffset: 14; opacity: 0; } 35% { opacity: 1; } 100% { stroke-dashoffset: -14; opacity: 0; } }
@keyframes stir { from { rotate: -13deg; } to { rotate: 13deg; } }
@keyframes squish { 0%, 100% { scale: 1 1; } 45% { scale: 1.06 .9; } 65% { scale: .97 1.05; } }
@keyframes tip { from { rotate: -11deg; } to { rotate: 11deg; } }
@keyframes tipcounter { from { rotate: 11deg; } to { rotate: -11deg; } }
@keyframes spiral { 0% { stroke-dashoffset: 260; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -260; } }
@keyframes swing { from { rotate: -7deg; } to { rotate: 7deg; } }
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(-30px); } }

/* المتجر العصري: عند الاقتراب تضيء الشاشة والحروف والمعرض */
.signlight { opacity: .32; transition: opacity .5s; }
.shop.open .signlight { opacity: 1; }
.signhalo { opacity: 0; transition: opacity .6s; }
.shop.open .signhalo { opacity: .28; }
.signframe, .ledline { opacity: .18; transition: opacity .5s, fill .3s; }
.shop.open .signframe, .shop.open .ledline { opacity: 1; }
.shop.signal .signframe { fill: var(--signal); stroke: none; }
.screenlit { opacity: calc(.1 + var(--night) * .2); transition: opacity .7s; }
.shop.open .screenlit { opacity: calc(.55 + var(--night) * .35); }
.lit { fill: #4a4034; transition: fill .4s; }
.shop.open .lit { fill: #fff0cf; }
.interior { opacity: .3; transition: opacity .8s; }
.shop.open .interior { opacity: 1; }
.roomglow { opacity: 0; transition: opacity .8s; }
.shop.open .roomglow { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .shop.open .sweep { animation: lightsweep 1.3s ease-in-out .3s 1 both; }
}
@keyframes lightsweep { 0% { opacity: 0; transform: translateX(30px); } 15% { opacity: .1; } 85% { opacity: .1; } 100% { opacity: 0; transform: translateX(640px); } }