.home-hero { --scene-cycle: 7s; --scene-leaf-turn: 4deg; --scene-leaf-overscan: 3%; --scene-shadow-shift: -14px; --scene-shadow-opacity: .72; }
.hero-scene { position: absolute; z-index: -2; pointer-events: none; visibility: hidden; }
.hero-scene.is-ready { visibility: visible; }
.hero-scene__wall, .hero-scene__leaves { position: absolute; inset: 0; }
.hero-scene img { display: block; width: 100%; height: 100%; max-width: none; }
.hero-scene__wall { mask: url('hero-wall-mask.svg') 0 0 / 100% 100% no-repeat; }
.hero-scene__shadow { position: absolute; inset: 0; opacity: var(--scene-shadow-opacity); filter: brightness(.3) blur(4px); transform-origin: 100% 0; animation: hero-shadow-breeze var(--scene-cycle) ease-in-out infinite; animation-play-state: paused; }
.hero-scene__leaves { transform-origin: 100% 0; animation: hero-leaf-breeze var(--scene-cycle) ease-in-out infinite; animation-play-state: paused; }
.hero-scene.is-running .hero-scene__shadow, .hero-scene.is-running .hero-scene__leaves { animation-play-state: running; }
.hero-scene[data-format="portrait"] { --scene-leaf-turn: 7deg; --scene-shadow-opacity: .2; }
.hero-scene[data-format="portrait"] .hero-scene__wall { mask-image: url('hero-wall-mobile-mask.svg'); }
.hero-scene[data-format="portrait"] .hero-scene__leaves { transform-origin: 100% 74%; }
.hero-scene[data-format="portrait"] .hero-scene__leaves img { transform: scale(.6); transform-origin: 100% 74%; }
.hero-scene[data-format="portrait"] .hero-scene__shadow { transform-origin: 100% 74%; }
.hero-scene[data-format="portrait"] .hero-scene__shadow img { transform: translate(-18px, -28px) scale(.6); transform-origin: 100% 74%; filter: brightness(0) blur(7px); }
.hero-scene-toggle { position: absolute; z-index: 2; right: 20px; bottom: 18px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--gold-light); border-radius: 50%; background: var(--deep); color: var(--paper); cursor: pointer; }
.hero-scene-toggle[hidden] { display: none; }
.hero-scene-toggle:hover { color: var(--gold-light); }
.hero-scene-toggle:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.hero-scene-toggle__play { display: none; }
.hero-scene-toggle.is-paused .hero-scene-toggle__play { display: block; }
.hero-scene-toggle.is-paused .hero-scene-toggle__pause { display: none; }
/* Keep the cutout's right boundary beyond the photograph throughout the sway. */
@keyframes hero-leaf-breeze { 0%, 100% { transform: translateX(var(--scene-leaf-overscan)) rotate(calc(var(--scene-leaf-turn) * -.35)); } 50% { transform: translateX(var(--scene-leaf-overscan)) rotate(var(--scene-leaf-turn)); } }
@keyframes hero-shadow-breeze { 0%, 100% { transform: translate(0, 0) rotate(calc(var(--scene-leaf-turn) * -.35)); } 50% { transform: translate(var(--scene-shadow-shift), 5px) rotate(var(--scene-leaf-turn)); } }
@media (prefers-reduced-motion: reduce) { .hero-scene, .hero-scene-toggle { display: none; } }