/* Cracking shells reveal the original fried eggs, followed by gentle movement and steam. */
.hero-kitchen { background: transparent; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 24px; padding: 48px max(24px, calc((100vw - 1240px) / 2)); text-align: left; border-bottom: 1px solid #dfd6c5; }
.hero-kitchen::before { display: none; }
.hero-kitchen .hero-content { max-width: 520px; margin: 0; }
.hero-kitchen .hero-badge { color: var(--primary); background: #e5e9df; font-size: .72rem; letter-spacing: 2px; }
.hero-kitchen h1 { color: #243b4c; font-size: clamp(2.4rem, 4.4vw, 4rem); font-weight: 600; }
.hero-kitchen p { color: #635f54; font-size: 1rem; margin: 20px 0 28px; }
.hero-kitchen .hero-buttons { justify-content: flex-start; gap: 12px; }
.hero-kitchen .btn { padding: 13px 22px; font-size: .85rem; }
.hero-kitchen .btn-primary { background: var(--primary); color: #fff; }
.hero-kitchen .btn-primary:hover { background: var(--primary-dark); }
.hero-kitchen .btn-outline { color: var(--primary); border-color: var(--primary); }
.hero-kitchen .btn-outline:hover { background: var(--primary-soft); }
.hero-art { min-width: 0; margin: 0; }
.hero-art figcaption { text-align: center; color: #716b5f; font: italic .85rem Georgia, serif; margin: 16px 0 0; }
egg-scene { display: block; --cycle: 10s; }
egg-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
egg-scene .scene-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 9%; color: var(--primary); }
egg-scene .scene-caption { display: grid; font: italic clamp(14px, 1.5vw, 19px) Georgia, serif; }
egg-scene .skillet { transform-origin: 760px 540px; animation: skillet-rock 7s ease-in-out infinite; }
egg-scene .empty-pan { animation: reveal-eggs var(--cycle) steps(4, end) infinite; }
egg-scene .shells { animation: cracking-shells var(--cycle) steps(5, end) infinite; }
egg-scene .shell-left { animation: crack-left var(--cycle) steps(4, end) infinite; }
egg-scene .shell-right { animation: crack-right var(--cycle) steps(4, end) infinite; }
egg-scene .steam { animation: steam-window var(--cycle) linear infinite; }
egg-scene .steam path { animation: painted-steam 2s steps(7, end) infinite; }
egg-scene .steam path:nth-child(2) { animation-delay: -.7s; }
egg-scene .steam path:nth-child(3) { animation-delay: -1.4s; }
egg-scene[paused] * { animation-play-state: paused !important; }
@keyframes skillet-rock { 0%, 100% { transform: rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes reveal-eggs { 0%, 20%, 100% { opacity: 1; } 28%, 93% { opacity: 0; } }
@keyframes cracking-shells { 0%, 100% { opacity: 0; transform: translateY(-45px); } 6%, 20% { opacity: 1; transform: translateY(0); } 30%, 99% { opacity: 0; transform: translateY(-45px); } }
@keyframes crack-left { 0%, 12%, 100% { transform: translate(0, 0); } 22%, 99% { transform: translate(-45px, -8px) rotate(-12deg); } }
@keyframes crack-right { 0%, 12%, 100% { transform: translate(0, 0); } 22%, 99% { transform: translate(45px, -8px) rotate(12deg); } }
@keyframes steam-window { 0%, 25%, 98%, 100% { opacity: 0; } 33%, 90% { opacity: .8; } }
@keyframes painted-steam { 0% { opacity: 0; transform: translateY(35px); } 35% { opacity: .75; } 100% { opacity: 0; transform: translate(15px, -100px); } }
@media (max-width: 760px) {
  .hero-kitchen { grid-template-columns: 1fr; padding: 40px 22px 30px; gap: 12px; text-align: center; }
  .hero-kitchen .hero-content { margin: auto; }
  .hero-kitchen .hero-buttons { justify-content: center; }
  .hero-kitchen h1 { font-size: clamp(2.3rem, 8vw, 3.4rem); }
  .hero-art { width: 100%; max-width: 580px; margin: auto; }
}
@media (prefers-reduced-motion: reduce) {
  egg-scene[paused] .steam,
  egg-scene[paused] .shells,
  egg-scene[paused] .empty-pan { animation: none; opacity: 0; }
}