/* =========================================================================
   v1.3.8 "Pictionary for the Soul" pictograms (includes/pictograms.php, assets/js/pictograms.js)
   The static rules are the END state (no JavaScript, reduced motion). pictograms.js adds .picto--armed (start state)
   and then .picto--play when the figure scrolls into view: the metamorphosis runs once, then a gentle loop holds it.
   ========================================================================= */
.picto { margin: 0; display: grid; justify-items: center; gap: 14px; text-align: center; }
.picto__stage {
  position: relative; width: min(100%, 260px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217, 119, 6, 0.14), rgba(217, 119, 6, 0.04) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.28), 0 30px 60px -40px rgba(217, 119, 6, 0.55);
}
.picto__svg { width: 100%; height: 100%; overflow: visible; }
.picto__svg * { transform-box: view-box; }
.picto__cap { max-width: 22rem; font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.125rem; line-height: 1.45; color: var(--muted, #6A564E); }
[data-theme="light"] .picto__stage { background: radial-gradient(closest-side, rgba(217, 119, 6, 0.12), rgba(252, 251, 247, 0.6) 70%, transparent); }

/* ---------- light: the eye opening inward onto the sun ---------- */
.pl-glow { transform-origin: 120px 120px; }
.pl-rays, .pl-sun, .pl-iris, .pl-lids, .pl-spin { transform-origin: 120px 120px; }
.pl-iris { opacity: 0; transform: scale(0.2); }
.pl-lids { opacity: 0.6; transform: scale(1.12); }
[data-theme="light"] .pl-lids { opacity: 0.85; }

.picto--armed:not(.picto--play) .pl-glow { opacity: 0; transform: scale(0.4); }
.picto--armed:not(.picto--play) .pl-rays, .picto--armed:not(.picto--play) .pl-sun { opacity: 0; transform: scale(0); }
.picto--armed:not(.picto--play) .pl-iris { opacity: 1; transform: none; }
.picto--armed:not(.picto--play) .pl-lids { opacity: 1; transform: scaleY(0.06); }

.picto--play .pl-lids { animation: pl-lids 3.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.picto--play .pl-iris { animation: pl-iris 3.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.picto--play .pl-sun { animation: pl-sun 3.2s cubic-bezier(0.22, 1, 0.36, 1) both, pl-breathe 5s ease-in-out 3.2s infinite; }
.picto--play .pl-rays { animation: pl-rays 3.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.picto--play .pl-spin { animation: pl-spin 48s linear 3.2s infinite; }
.picto--play .pl-glow { animation: pl-glow 3.2s ease-out both, pl-breathe 6s ease-in-out 3.2s infinite; }
@keyframes pl-lids { 0% { transform: scaleY(0.06); opacity: 1; } 28% { transform: scaleY(1); opacity: 1; } 62% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.12); } }
@keyframes pl-iris { 0%, 36% { transform: none; opacity: 1; } 62% { transform: scale(0.2); opacity: 0; } 100% { transform: scale(0.2); opacity: 0; } }
@keyframes pl-sun { 0%, 44% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 76% { transform: scale(1.14); } 100% { transform: scale(1); opacity: 1; } }
@keyframes pl-rays { 0%, 54% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pl-glow { 0%, 40% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pl-spin { to { transform: rotate(360deg); } }
@keyframes pl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ---------- harmony: chaos flattening into golden ripples ---------- */
.ph-noise, .ph-flat, .ph-ring, .ph-pulse, .ph-core, .ph-wash { transform-origin: 120px 120px; }
.ph-noise { opacity: 0; transform: scaleY(0); }
.ph-flat { opacity: 0; transform: scaleX(0); }
.ph-pulse { opacity: 0; }

.picto--armed:not(.picto--play) .ph-noise { opacity: 1; transform: none; }
.picto--armed:not(.picto--play) .ph-ring, .picto--armed:not(.picto--play) .ph-core { opacity: 0; transform: scale(0); }
.picto--armed:not(.picto--play) .ph-wash { opacity: 0; }

.picto--play .ph-noise { animation: ph-noise 3.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.picto--play .ph-noise polyline { animation: ph-jitter 0.28s steps(2, end) 0s 4; }
.picto--play .ph-flat { animation: ph-flat 3.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.picto--play .ph-core { animation: ph-ring 3.2s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0s; }
.picto--play .ph-ring { animation: ph-ring 3.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.picto--play .ph-ring--1 { animation-delay: 0.1s; } .picto--play .ph-ring--2 { animation-delay: 0.3s; }
.picto--play .ph-ring--3 { animation-delay: 0.5s; } .picto--play .ph-ring--4 { animation-delay: 0.7s; }
.picto--play .ph-wash { animation: ph-wash 3.2s ease-out both; }
.picto--play .ph-pulse { animation: ph-pulse 4.5s ease-out 3.4s infinite; }
@keyframes ph-noise { 0%, 22% { transform: none; opacity: 1; } 52% { transform: scaleY(0.04); opacity: 0.9; } 62% { transform: scaleY(0); opacity: 0; } 100% { transform: scaleY(0); opacity: 0; } }
@keyframes ph-jitter { 50% { transform: translateY(3px); } }
@keyframes ph-flat { 0%, 46% { transform: scaleX(1); opacity: 0; } 54% { opacity: 1; transform: scaleX(1); } 74% { opacity: 0.9; transform: scaleX(0.05); } 82%, 100% { opacity: 0; transform: scaleX(0); } }
@keyframes ph-ring { 0%, 62% { transform: scale(0); opacity: 0; } 70% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ph-wash { 0%, 60% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ph-pulse { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(4.4); opacity: 0; } }

/* ---------- freedom: chains breaking into leaves ---------- */
.pf-link { transform-origin: var(--o); opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0.8); }
.pf-leaf { transform-origin: var(--o); }
.pf-glow, .pf-soil { transform-origin: 120px 200px; }
.pf-stem { stroke-dasharray: 100; stroke-dashoffset: 0; }
.pf-sparks { opacity: 0.9; }

.picto--armed:not(.picto--play) .pf-link { opacity: 1; transform: none; }
.picto--armed:not(.picto--play) .pf-leaf { transform: scale(0); }
.picto--armed:not(.picto--play) .pf-stem { stroke-dashoffset: 100; }
.picto--armed:not(.picto--play) .pf-soil, .picto--armed:not(.picto--play) .pf-glow, .picto--armed:not(.picto--play) .pf-sparks { opacity: 0; }

.picto--play .pf-chain { animation: pf-shake 0.9s ease-in-out both; }
.picto--play .pf-link { animation: pf-break 3.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.picto--play .pf-soil { animation: pf-fade 3.4s ease-out both; }
.picto--play .pf-glow { animation: pf-fade 3.4s ease-out both, pf-glow 6s ease-in-out 3.4s infinite; }
.picto--play .pf-stem { animation: pf-stem 3.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.picto--play .pf-leaf { animation: pf-leaf 3.4s cubic-bezier(0.34, 1.4, 0.64, 1) both, pf-sway 5s ease-in-out 3.6s infinite; }
.picto--play .pf-leaf--2 { animation-delay: 0.18s, 3.8s; }
.picto--play .pf-leaf--3 { animation-delay: 0.36s, 4s; }
.picto--play .pf-leaf--4 { animation-delay: 0.54s, 4.2s; }
.picto--play .pf-sparks { animation: pf-sparks 3.4s ease-out both, pf-twinkle 3s ease-in-out 3.4s infinite; }
@keyframes pf-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@keyframes pf-break { 0%, 26% { opacity: 1; transform: none; } 58% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0.8); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0.8); } }
@keyframes pf-fade { 0%, 40% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pf-stem { 0%, 40% { stroke-dashoffset: 100; } 78%, 100% { stroke-dashoffset: 0; } }
@keyframes pf-leaf { 0%, 56% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes pf-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }
@keyframes pf-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes pf-sparks { 0%, 80% { opacity: 0; } 100% { opacity: 0.9; } }
@keyframes pf-twinkle { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.35; } }

/* Reduced motion: the end state, still (the script never arms; this guards a preference changed mid-visit) */
@media (prefers-reduced-motion: reduce) {
  .picto *, .picto--armed * { animation: none !important; transition: none !important; }
  .picto--armed:not(.picto--play) .pl-iris { opacity: 0; transform: scale(0.2); }
  .picto--armed:not(.picto--play) .pl-lids { opacity: 0.6; transform: scale(1.12); }
  .picto--armed:not(.picto--play) .pl-glow, .picto--armed:not(.picto--play) .pl-rays, .picto--armed:not(.picto--play) .pl-sun { opacity: 1; transform: none; }
  .picto--armed:not(.picto--play) .ph-noise { opacity: 0; transform: scaleY(0); }
  .picto--armed:not(.picto--play) .ph-ring, .picto--armed:not(.picto--play) .ph-core, .picto--armed:not(.picto--play) .ph-wash { opacity: 1; transform: none; }
  .picto--armed:not(.picto--play) .pf-link { opacity: 0; }
  .picto--armed:not(.picto--play) .pf-leaf { transform: none; }
  .picto--armed:not(.picto--play) .pf-stem { stroke-dashoffset: 0; }
  .picto--armed:not(.picto--play) .pf-soil, .picto--armed:not(.picto--play) .pf-glow, .picto--armed:not(.picto--play) .pf-sparks { opacity: 1; }
}
@media print { .picto * { animation: none !important; } }