/* ═══════════════════════════════════════════════════════════════════════════════
   🌙 „ТИХО. МАЛКОТО СЪНУВА“ (js/pl-san.js, реф. 2) — нощен облак на началото, докато бебето спи.
   Нощно синьо и денем (така е в референцията — сънят е „нощ“ в стаята), бебето на луната в
   светещо кръгче, звездички, часовник с цифри Nunito (Georgia чете 0 като „о“).
   ПЪТ НАЗАД: махни <link>/<script> на pl-san от index.html.
   ═══════════════════════════════════════════════════════════════════════════════ */
.pl-san[hidden] { display: none !important; }
.pl-san {
  position: relative; margin: 26px 16px 16px;           /* облачните бузи (−16px) не застъпват картичката на бебето */ padding: 20px 16px 16px 14px;
  display: grid; grid-template-columns: 96px 1fr; grid-template-areas: 'art txt' 'go go'; gap: 10px 12px; align-items: center;
  border-radius: 34px 34px 30px 30px; color: #fff6e4;
  background: radial-gradient(120% 90% at 20% 0%, #3b4a93 0, #27336d 48%, #1c2656 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 16px 34px rgba(28, 38, 86, .34), inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -6px 14px rgba(8, 12, 40, .35);
  outline: 1.5px dashed rgba(255, 246, 228, .28); outline-offset: -8px;
  animation: plSanIn .6s cubic-bezier(.2, .9, .3, 1) both;
}
/* облачните „бузи“ по горния ръб — като облака в реф. 2 */
.pl-san::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: -16px; height: 34px; pointer-events: none;
  background:
    radial-gradient(circle at 12% 100%, #34428a 0 22px, transparent 23px),
    radial-gradient(circle at 34% 100%, #3a4891 0 30px, transparent 31px),
    radial-gradient(circle at 62% 100%, #36448c 0 26px, transparent 27px),
    radial-gradient(circle at 86% 100%, #313f85 0 20px, transparent 21px);
}
@keyframes plSanIn { from { opacity: .4; transform: translateY(10px) scale(.98); } /* 24.10: от .4 (скрит таб) */ to { opacity: 1; transform: none; } }

.pl-san-art { grid-area: art; position: relative; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff9ea 0, #fbeecb 58%, #f2d99c 100%);
  box-shadow: 0 0 0 5px rgba(255, 238, 190, .16), 0 0 28px rgba(255, 226, 150, .45), inset 0 -4px 8px rgba(190, 150, 70, .25); }
.pl-san-art i { position: absolute; inset: 6px; border-radius: 50%;
  background: url(../img/art/fig-a.webp) 33.333% 0 / 400% 200% no-repeat; mix-blend-mode: multiply;
  animation: plSanRock 5.5s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes plSanRock { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.pl-san-txt { grid-area: txt; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-san-h { font-family: var(--pl-serif, Georgia, serif); font-size: 15px; font-weight: 700; color: #fde7b0; letter-spacing: .2px; }
.pl-san-t { font-family: Nunito, system-ui, sans-serif; font-size: 40px; line-height: 1.05; font-weight: 800; color: #fff; letter-spacing: 1px;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(170, 190, 255, .55); }
.pl-san-s { font-family: Nunito, system-ui, sans-serif; font-size: 14px; color: #dfe3fb; }

.pl-san-go { grid-area: go; justify-self: stretch; min-height: 48px; border-radius: 999px; font-size: 16px; }

/* звездичките — блещукат, само opacity/transform */
.pl-san-st { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.pl-san-st i { position: absolute; width: 10px; height: 10px; background: #fff3c4; opacity: .2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: plSanTw 3.2s ease-in-out infinite; }
.pl-san-st i:nth-child(1) { left: 93%; top: 7%; }
.pl-san-st i:nth-child(2) { left: 85%; top: 30%; width: 7px; height: 7px; animation-delay: -1.1s; }
.pl-san-st i:nth-child(3) { left: 94%; top: 50%; width: 12px; height: 12px; animation-delay: -2.2s; }
.pl-san-st i:nth-child(4) { left: 4%; top: 6%; width: 6px; height: 6px; animation-delay: -.6s; }
.pl-san-st i:nth-child(5) { left: 30%; top: 4%; width: 8px; height: 8px; animation-delay: -1.7s; }
@keyframes plSanTw { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .95; transform: scale(1.1); } }

/* докато бебето спи — сцената на началото тихо притъмнява (само було, без смяна на картина) */
html.pl-spi:not([data-theme="dark"]) #plScene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 52, 110, .16), rgba(40, 52, 110, .06)); pointer-events: none; }

html[data-theme="dark"] .pl-san { border-color: rgba(255, 255, 255, .22); box-shadow: 0 16px 34px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .14); }

@media (max-width: 350px) { .pl-san { grid-template-columns: 76px 1fr; } .pl-san-art { width: 76px; height: 76px; } .pl-san-t { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .pl-san, .pl-san-art i, .pl-san-st i { animation: none !important; } .pl-san-st i { opacity: .6; } }