:root {
  color-scheme: light;
  background: #faf9f6;
  color: #777772;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; }

.holding-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  overflow: hidden;
}

.composition {
  width: min(420px, 78vw);
  text-align: center;
}

.sculpture { position: relative; padding-bottom: 42px; }

.pebble {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  animation: float 8s ease-in-out infinite;
  will-change: transform;
}

.shadow {
  position: absolute;
  left: 23%;
  bottom: 0;
  width: 54%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(63, 60, 54, .23), rgba(63, 60, 54, 0) 72%);
  filter: blur(7px);
  animation: shadow-breathe 8s ease-in-out infinite;
}

h1 {
  margin: 45px 0 0;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .23em;
  padding-left: .23em;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-9px) rotate(.4deg); }
}

@keyframes shadow-breathe {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(1.08); opacity: .72; }
}

@media (max-width: 480px) {
  .composition { width: min(340px, 88vw); }
  .sculpture { padding-bottom: 34px; }
  h1 { margin-top: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  .pebble, .shadow { animation: none; will-change: auto; }
}