.playful-section { padding-block: 48px 56px; border-top: 1px solid var(--line); }
.playful-heading { text-align: center; }
.playful-heading .eyebrow { margin-bottom: 13px; }
.playful-heading h2 { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.15; margin: 0 0 15px; }
.playful-heading h2 em { color: var(--terracotta); font-weight: inherit; }
.playful-heading > p:last-child { color: var(--muted); font-size: .85rem; margin: 0; }
.playful-scenes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; max-width: 960px; margin: 28px auto 0; }
.playful-scene { min-width: 0; text-align: center; }
.playful-trigger { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 12px; border: 0; border-radius: 18px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.playful-illustration { width: min(100%, 220px); height: auto; overflow: visible; }
.playful-trigger > span { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: .8rem; line-height: 1.5; text-decoration: underline; text-decoration-color: #c5c9b9; text-underline-offset: 5px; }
.playful-trigger:hover > span { color: var(--terracotta); text-decoration-color: currentColor; }
.playful-trigger:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 5px; }
.playful-response { color: var(--muted); min-height: 3.5em; margin: 6px 0 0; font-size: .78rem; line-height: 1.7; padding-inline: 12px; }
.playful-illustration g { transform-box: view-box; }
.sun-rays, .sun-body { transform-origin: 94px 76px; }
.cloud { transform-origin: 153px 140px; }
.plant { transform-origin: 110px 112px; }
.leaf-left { transform-origin: 110px 94px; }
.leaf-right { transform-origin: 111px 85px; }
.leaf-little { transform-origin: 110px 72px; transform: scale(.55); opacity: .5; transition: transform .3s, opacity .3s; }
.has-played .leaf-little { transform: scale(1); opacity: 1; }
.sprout-pot { transform-origin: 110px 146px; }
.plane { transform-origin: 158px 61px; }
.envelope { transform-origin: 110px 155px; }
.scene-sparkle { opacity: .45; }
.is-playing .scene-sparkle { animation: playful-sparkle 1.4s ease-in-out 2; }
.is-playing .sun-rays { animation: playful-rays 2.6s ease-in-out; }
.is-playing .sun-body { animation: playful-laugh .65s ease-in-out 4; }
.is-playing .sun-eyes-open, .is-playing .envelope-eyes-open { opacity: 0; }
.is-playing .sun-eyes-closed, .is-playing .envelope-eyes-closed { opacity: 1; }
.is-playing .cloud { animation: playful-cloud 2.6s ease-in-out; }
.is-playing .plant { animation: playful-grow 2.6s ease-in-out; }
.is-playing .leaf-left { animation: playful-leaf-left 1.3s ease-in-out 2; }
.is-playing .leaf-right { animation: playful-leaf-right 1.3s ease-in-out 2; }
.is-playing .sprout-pot { animation: playful-pot 2.6s ease-in-out; }
.is-playing .plane { animation: playful-flight 2.6s ease-in-out; }
.is-playing .letter { animation: playful-letter 2.6s ease-in-out; }
.is-playing .flight-trail { animation: playful-trail 2.6s ease-in-out; }
@keyframes playful-rays { 0%,100% { transform: rotate(0); } 60% { transform: rotate(80deg); } }
@keyframes playful-laugh { 0%,100% { transform: scale(1); } 50% { transform: translateY(2px) scale(1.06,.94); } }
@keyframes playful-cloud { 0%,100% { transform: translateX(0) rotate(0); } 35% { transform: translateX(9px) rotate(5deg); } 65% { transform: translateX(-5px) rotate(-4deg); } }
@keyframes playful-grow { 0%,100% { transform: scale(1); } 40%,65% { transform: scale(1.13); } }
@keyframes playful-leaf-left { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-17deg); } 70% { transform: rotate(8deg); } }
@keyframes playful-leaf-right { 0%,100% { transform: rotate(0); } 35% { transform: rotate(17deg); } 70% { transform: rotate(-8deg); } }
@keyframes playful-pot { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 45% { transform: rotate(4deg); } 65% { transform: rotate(-2deg); } }
@keyframes playful-flight {
  0% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(-12px,-12px) rotate(-35deg); }
  42% { transform: translate(-88px,6px) rotate(-130deg); }
  63% { transform: translate(-82px,49px) rotate(-235deg); }
  82% { transform: translate(-20px,28px) rotate(-315deg); }
  100% { transform: translate(0,0) rotate(-360deg); }
}
@keyframes playful-letter { 0%,100% { transform: translateY(0); } 35%,65% { transform: translateY(-14px); } }
@keyframes playful-trail { 0%,100% { opacity: 1; } 45% { opacity: .2; } }
@keyframes playful-sparkle { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@media(max-width: 600px) {
  .playful-section { padding-block: 38px 32px; }
  .playful-scenes { grid-template-columns: 1fr; gap: 18px; margin-top: 20px; }
  .playful-illustration { width: 190px; }
  .playful-response { min-height: 1.7em; margin-top: 0; }
}
@media(prefers-reduced-motion: reduce) {
  .playful-scene *, .playful-scene .is-playing { animation: none !important; transition: none !important; }
}