/* Home's storybook pictures (javascript/homeArt.js): the welcome banner's
   scene and the small walking fox on the week trail and the challenge card.
   Layout of the cards themselves stays in pages.css. */

/* The banner scene fills the card's picture half; the sky-and-meadow wash
   shows until the drawn bitmap fades in over it. */
.hero-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-scene .hero-art {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-scene.is-ready .hero-art {
    opacity: 1;
}

/* Asleep in the closed tent: three slow z's drift up from its door. */
.hero-zz {
    position: absolute;
    z-index: 1;
    left: 47%;
    top: 30%;
    font: italic 600 18px var(--serif, Georgia, serif);
    color: #f3ecd9;
    text-shadow: 0 1px 2px rgba(20, 24, 40, 0.5);
    opacity: 0;
    pointer-events: none;
}

.hero-zz2 { font-size: 15px; }
.hero-zz3 { font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
    .hero-scene:not(.is-still) .hero-zz { animation: hero-zz 4.8s ease-out infinite; }
    .hero-scene:not(.is-still) .hero-zz2 { animation-delay: 1.6s; }
    .hero-scene:not(.is-still) .hero-zz3 { animation-delay: 3.2s; }
}

.hero-scene.is-still .hero-zz1 { opacity: 0.85; }
.hero-scene.is-still .hero-zz2 { opacity: 0.6; transform: translate(12px, -16px); }

@media (prefers-reduced-motion: reduce) {
    .hero-zz1 { opacity: 0.85; }
    .hero-zz2 { opacity: 0.6; transform: translate(12px, -16px); }
}

@keyframes hero-zz {
    0% { opacity: 0; transform: translate(0, 8px) scale(0.8); }
    20% { opacity: 0.95; }
    100% { opacity: 0; transform: translate(22px, -34px) scale(1.15); }
}

/* The drawn fox's box is taller than the old painting (he is about 84% of
   it, boots at 92.5%), so the boxes grow and move up to keep his boots
   where the painting's were. */
.trail .trail-fox {
    top: -7px;
    height: 66px;
}

.challenge-card .challenge-fox {
    top: 4px;
    height: 118px;
}