/* Homepage opening: the bakery's own vintage celebration cake, gently floating. */

.hero {
  background: var(--blush);
  padding-block: clamp(36px, 6vw, 80px);
}
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.hero .copy { max-width: 560px; }
.hero h1 { font-size: clamp(2.1rem, 4.8vw, 4.1rem); }
/* Caps run wider than mixed case, so the wordmark is set a step smaller than a
   normal h1 would be. Longest word is COFFEE. and it has to clear 320px. */
.hero h1.wordmark { font-size: clamp(1.7rem, 4.1vw, 3.5rem); }
.hero .lede { margin-top: 1rem; color: var(--ink-soft); max-width: 44ch; }
.hero .actions { margin-top: 1.5rem; }
/* The vintage cake. A transparent cut out of the bakery's own photo (C02),
   so what customers see is a real cake of theirs. The float is slow and
   small on purpose: the bakery asked for the animation to stay subtle. */
.cake-stage { position: relative; display: grid; place-items: center; padding-bottom: 18px; }
.hero-cake {
  position: relative; z-index: 1;
  width: min(100%, 470px); height: auto; aspect-ratio: 960 / 1135;
  animation: cake-float 7s ease-in-out infinite;
}
.cake-shadow {
  position: absolute; bottom: 6px; left: 50%; width: min(78%, 380px); height: 26px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 60, 75, .28), rgba(120, 60, 75, 0));
  animation: cake-shadow 7s ease-in-out infinite;
}
@keyframes cake-float { 0%, 100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-10px) rotate(.4deg); } }
@keyframes cake-shadow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(.92); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .hero-cake, .cake-shadow { animation: none; } }

@media (max-width: 860px) {
  .hero { padding-block: clamp(20px, 4vw, 40px) clamp(36px, 6vw, 56px); }
  .hero .wrap { grid-template-columns: 1fr; gap: 8px; }
  .hero .product { order: -1; }
  .hero-cake { width: min(80vw, 380px); }
  .hero .lede { max-width: none; }
}