/* Ocean lesson pages: one look per stop. Coral Cove (Preschool), Turtle Lagoon (Pre-K), Treasure Reef (K).
   Loaded only by Ocean lesson pages; every rule is a color/size skin over the shared play framework. */
.zm-hero.stop-coral {
  background:
    radial-gradient(circle at 8% 118%, rgb(255 138 127 / .42) 0 11%, transparent 12%),
    radial-gradient(circle at 93% 120%, rgb(255 205 120 / .5) 0 10%, transparent 11%),
    linear-gradient(170deg, #8bead6 0%, #c7fff1 100%);
  color: #0f4d4a;
}
.zm-hero.stop-lagoon {
  background:
    radial-gradient(circle at 90% 0%, rgb(255 255 255 / .55) 0 12%, transparent 13%),
    radial-gradient(circle at 6% 112%, rgb(27 157 132 / .3) 0 12%, transparent 13%),
    linear-gradient(165deg, #76c9e9 0%, #d2fff0 100%);
  color: #0d4a52;
}
/* Treasure Reef keeps the Kindergarten look families already know. */
.zm-hero.stop-reef { background: linear-gradient(#4fa9da, #afeefa); color: #06324d; }

/* Younger stops: bigger, calmer sea friends in the hero. */
.stop-coral .zm-hero-art svg { width: 4.25rem; height: 4.25rem; }
.stop-lagoon .zm-hero-art svg { width: 3.75rem; height: 3.75rem; }
.stop-coral .zm-hero h1, .stop-lagoon .zm-hero h1 { font-size: clamp(2.1rem, 8.5vw, 3.25rem); }

/* Play field tint per stop so the lesson feels like the map it came from. */
.zm-play.stop-coral .zm-field { background: #fff4f0; border-color: #ffc9bf; }
.zm-play.stop-lagoon .zm-field { background: #eefff8; border-color: #a9ecd6; }
.zm-play.stop-coral .zm-obj.is-counted, .zm-play.stop-coral .zm-obj.is-glow { background: #fff0cf; }
.zm-play.stop-lagoon .zm-card.is-correct { background: #d6f9e8; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stop-coral .zm-hero-art svg, .stop-lagoon .zm-hero-art svg { animation: stop-bob 4.5s ease-in-out infinite; }
  .stop-coral .zm-hero-art svg:nth-child(2), .stop-lagoon .zm-hero-art svg:nth-child(2) { animation-delay: -1.5s; }
  .stop-coral .zm-hero-art svg:nth-child(3), .stop-lagoon .zm-hero-art svg:nth-child(3) { animation-delay: -3s; }
}
@keyframes stop-bob { from { transform: translateY(-4px); } 50% { transform: translateY(5px); } to { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .zm-hero-art svg { animation: none !important; } }