/* Registered watercolour layers: envelope hinge, Alif globe, Sheen sunshine. */
.learning-art { position: relative; isolation: isolate; }
.learning-art > img { display: block; width: 100%; height: auto; }
.learning-art-motion { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.motion-ready .learning-art-motion { display: block; }
.hero-art .learning-art { transform: rotate(-3deg); mix-blend-mode: multiply; border-radius: 20px; overflow: hidden; }
.hero-art .learning-art .envelope-image { transform: none; mix-blend-mode: normal; border-radius: 0; }
.wide-preview .learning-art, .subscription-image .learning-art { mix-blend-mode: multiply; }
.wide-preview .learning-art img, .subscription-image .learning-art img { mix-blend-mode: normal; }
.learning-globe { transform-origin: 377px 548px; }
.learning-sun-growth { transform-origin: 643px 551px; }
.motion-ready[data-motion="running"] .learning-reference-flap { animation: learning-reference-flap 2s steps(1, end) infinite; }
.motion-ready[data-motion="running"] .learning-globe { animation: learning-globe 24s linear infinite; }
.motion-ready[data-motion="running"] .learning-sun-growth { animation: learning-sun-rays 1.2s linear infinite; }
@keyframes learning-globe { to { transform: rotate(360deg); } }
/* Reveal each painted ray from its base outward, then cut to empty and repeat. */
@keyframes learning-sun-rays {
  0% { transform: scale(.5); }
  85% { transform: scale(1); }
  85.01%, 100% { transform: scale(0); }
}
@media (max-width: 600px) { .hero-art .learning-art { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .motion-ready .learning-art-motion { display: none; } }