/* The reef sponge (shared/_reef_sponge): the mascot and the seafloor it sits
   on. Gulping is driven by reef_controller; hosts opt in with
   data-controller="reef" on an ancestor. */
.reef-scene {
  --reef-floor: color-mix(in srgb, var(--wash) 60%, var(--line));
  display: block;
  width: 100%;
  height: auto;
}

.reef-floor { fill: var(--reef-floor); }
.reef-sponge-body { fill: var(--accent); }
.reef-sponge-shade { fill: var(--accent-deep); }
.reef-sponge-hole { fill: color-mix(in srgb, var(--accent-deep) 80%, var(--ink)); }

.reef-sponge {
  transform-origin: 50% 100%;
  transform-box: fill-box;
  cursor: pointer;
}

.reef-sponge.gulping { animation: reef-gulp 0.5s ease; }

@keyframes reef-gulp {
  0% { transform: scale(1); }
  35% { transform: scaleX(1.08) scaleY(0.88); }
  70% { transform: scaleX(0.96) scaleY(1.05); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .reef-sponge.gulping { animation: none; }
}