.alpine-scene { position: relative; transition: filter 800ms ease; }
.alpine-scene picture { display: block; }
.scene-motion { animation-play-state: paused !important; }
.alpine-footer[data-motion="running"] .scene-motion { animation-play-state: running !important; }

.alpine-cloud { position: absolute; pointer-events: none; color: #f4e8d3; opacity: .72; width: 22%; height: auto; animation: cloud-drift 75s ease-in-out infinite alternate; transition: opacity 800ms ease; }
.alpine-cloud--one { top: 8%; left: 14%; }
.alpine-cloud--two { top: 15%; left: 58%; width: 16%; animation-duration: 95s; animation-delay: -32s; }
.alpine-cloud--three { top: 1%; left: 42%; width: 13%; animation-duration: 65s; animation-delay: -20s; }
.dark .alpine-cloud { opacity: .17; }
@keyframes cloud-drift { from { transform: translateX(-16%); } to { transform: translateX(24%); } }

.lake-water { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lake-current { transform-origin: 50% 88%; animation: lake-current 7s ease-in-out infinite alternate; }
@keyframes lake-current { from { transform: translate(-2px, 0) scaleX(1.003); } to { transform: translate(2px, 1px) scaleX(1.003); } }
.water-glint { fill: none; stroke: #f5efd0; stroke-width: 1.8; stroke-linecap: round; opacity: 0; animation: water-glint 6s ease-in-out infinite; }
.water-glint--two { animation-delay: -2s; animation-duration: 8s; }
.water-glint--three { animation-delay: -4s; animation-duration: 9s; }
@keyframes water-glint { 0%, 100% { opacity: 0; transform: translateX(-7px); } 45% { opacity: .38; } 80% { opacity: .1; transform: translateX(9px); } }

.fish-spot { position: absolute; top: var(--waterline); left: var(--shore); width: 1px; height: 1px; pointer-events: none; }
.jumping-fish { position: absolute; width: clamp(10px, 1vw, 18px); height: auto; opacity: 0; transform-origin: center; }
.fish-ripple { position: absolute; width: clamp(13px, 1.8vw, 30px); height: clamp(3px, .4vw, 7px); border: 1px solid #e9f4df; border-radius: 50%; opacity: 0; }
.fish-ripple::after { content: ''; position: absolute; inset: -2px -5px; border: 1px solid #e9f4df70; border-radius: 50%; }
.fish-droplets { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #e9f4df; box-shadow: -4px 2px #e9f4df99, 4px 3px #e9f4dfaa; opacity: 0; }

.alpine-birds { position: absolute; inset: 0; pointer-events: none; color: #40585e; opacity: .6; transition: opacity 800ms ease; }
.alpine-bird { position: absolute; left: 38%; top: 15%; width: clamp(10px, 1vw, 18px); height: auto; overflow: visible; }
.alpine-bird path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.alpine-bird--far { left: 65%; top: 8%; width: clamp(8px, .75vw, 13px); opacity: .65; }
.dark .alpine-birds { color: #bdcbd0; opacity: .2; }
.alpine-ibex { position: absolute; left: 10%; top: 85%; width: clamp(28px, 6.4vw, 120px); aspect-ratio: 1; transform: translate(-50%, -85%); pointer-events: none; }
.alpine-ibex::before { content: ''; position: absolute; left: 15%; top: 84%; width: 60%; height: 4%; border-radius: 50%; background: radial-gradient(ellipse, #25342b38, transparent 70%); }
.ibex-figure { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }

.footer-motion-toggle { position: absolute; right: 16px; bottom: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #38594b40; border-radius: 50%; background: #fef9f0e8; color: #284c47; cursor: pointer; opacity: .75; transition: opacity 200ms ease; }
.footer-motion-toggle:hover, .footer-motion-toggle:focus-visible { opacity: 1; }
.footer-motion-toggle:focus-visible { outline: 2px solid #538b80; outline-offset: 3px; }
.footer-motion-toggle svg { width: 13px; height: 13px; }
.footer-motion-toggle .motion-play { display: none; }
.alpine-footer[data-motion="paused"] .motion-play { display: block; }
.alpine-footer[data-motion="paused"] .motion-pause { display: none; }
.dark .footer-motion-toggle { background: #15263be8; color: #ffedc4; border-color: #ffedc440; }
.footer-motion-toggle[hidden] { display: none; }

/* Laptop experiment: a wider drawing keeps the whole lake in a shallow footer. */
@media (min-width: 1024px) {
    .alpine-footer { height: max(clamp(200px, 27svh, 280px), calc(100vw * 444 / 2172)); flex-shrink: 0; }
    .alpine-scene { position: absolute; right: 0; bottom: 0; left: 0; }
    .alpine-cloud--one { width: 14%; max-width: 240px; }
    .alpine-cloud--two { width: 11%; max-width: 180px; }
    .alpine-cloud--three { width: 8%; max-width: 130px; }
    .alpine-moon { width: clamp(28px, 2.5vw, 40px); }
}

@media (prefers-reduced-motion: reduce) {
    .alpine-footer .scene-motion { animation: none !important; }
    .alpine-cloud, .alpine-scene, .footer-motion-toggle { transition: none; }
    .alpine-cloud { transform: none; }
}