/* A slow celestial setting for the bronze collection. */
:root { --ease-drift: cubic-bezier(.77,0,.175,1); }
body { isolation: isolate; }
#sky-atmosphere {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
.calendar-section { background: rgb(18 24 25 / 83%); }
.family-section { background: rgb(21 27 28 / 84%); }
.sculpture-stage { overflow: clip; }

.sculpture-stage::before {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(177 137 67 / 11%), transparent 68%);
  opacity: .55;
  animation: sky-breathe 14s var(--ease-drift) infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.animal-life {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  animation: animal-drift 12s var(--ease-drift) infinite alternate;
}
.hero-sculpture { will-change: auto; transition-duration: 250ms; }
.orbit-outer { animation: sky-orbit 100s linear infinite; }
.orbit-inner { animation: sky-orbit 150s linear infinite reverse; }
.orbit-outer::after, .orbit-inner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 3px;
  height: 3px;
  background: #e5c992;
  border-radius: 50%;
  box-shadow: 0 0 9px 2px #b1955350;
}
.orbit-inner::after { width: 2px; height: 2px; background: #f1e3c3; }
.orbit-mark { animation: sky-glimmer 7s var(--ease-drift) infinite alternate; }
.mark-bottom { animation-delay: -4s; }
.collection-art > .sculpture { animation: detail-drift 14s var(--ease-drift) infinite alternate; }
.book { animation: book-drift 16s var(--ease-drift) infinite alternate; }
.animal-option .sculpture { transition: transform 200ms var(--ease); }
@media (hover:hover) and (pointer:fine) {
  body:not(.motion-paused) .animal-option:hover .sculpture { transform: translateY(-3px) scale(1.045); }
}
@media (hover:none), (pointer:coarse) {
  .gold:hover { transform: none; }
}

@keyframes animal-drift {
  from { transform: translate3d(0,5px,0) rotate(-.6deg) scale(.994); }
  to { transform: translate3d(0,-7px,0) rotate(.6deg) scale(1.012); }
}
@keyframes detail-drift {
  from { transform: translate3d(0,3px,0) rotate(.45deg); }
  to { transform: translate3d(0,-6px,0) rotate(-.45deg); }
}
@keyframes book-drift {
  from { transform: translateY(3px) rotateY(-15deg) rotateZ(-4deg); }
  to { transform: translateY(-5px) rotateY(-9deg) rotateZ(-2deg); }
}
@keyframes sky-orbit { to { transform: rotate(360deg); } }
@keyframes sky-glimmer { from { opacity: .35; } to { opacity: .85; } }
@keyframes sky-breathe {
  from { transform: scale(.93); opacity: .4; }
  to { transform: scale(1.07); opacity: .85; }
}

/* Freeze at the current frame. Offscreen regions use no animation time. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after,
.page-hidden *, .page-hidden *::before, .page-hidden *::after,
.motion-offscreen *, .motion-offscreen *::before, .motion-offscreen *::after {
  animation-play-state: paused !important;
}
html.motion-paused { scroll-behavior: auto; }
.motion-paused .animal-option .sculpture { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .animal-life, .collection-art > .sculpture { transform: none !important; }
  .animal-option:hover .sculpture { transform: none !important; }
  .sculpture-stage::before { opacity: .55; }
}