/* ===== Kolkata sunset scene ===== */
.scene { position: absolute; inset: 0; overflow: hidden; z-index: -3; background: #f6d3a2; }
.scene-img { position: absolute; inset: -3%; background: url('../assets/images/scene.jpg') 50% 62% / cover no-repeat; animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { to { scale: 1.07; translate: -1.2% -1%; } }
.rays { position: absolute; left: 52%; top: 72%; width: 240vmax; height: 240vmax; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, #fff3cc00 0deg 6deg, #fff3cc55 8deg, #fff3cc00 10deg 17deg); -webkit-mask-image: radial-gradient(circle, #000 0, #0008 22%, #0000 48%); mask-image: radial-gradient(circle, #000 0, #0008 22%, #0000 48%); mix-blend-mode: screen; opacity: .55; animation: spin 150s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.sun-glow { position: absolute; left: 52%; top: 72%; width: 42vmin; height: 42vmin; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fffef4 0%, #fff0c0cc 18%, #ffd28a55 45%, #ffc07000 70%); mix-blend-mode: screen; animation: glow 6s ease-in-out infinite; }
@keyframes glow { 50% { scale: 1.18; opacity: .8; } }
.river { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: repeating-linear-gradient(90deg, #fff0 0 38px, #fffbe8aa 38px 44px, #fff0 44px 92px, #fffbe866 92px 95px, #fff0 95px 150px); -webkit-mask-image: radial-gradient(ellipse 34% 90% at 52% 100%, #000 0, #0000 75%); mask-image: radial-gradient(ellipse 34% 90% at 52% 100%, #000 0, #0000 75%); filter: blur(1.5px); mix-blend-mode: soft-light; animation: glint 9s linear infinite; }
@keyframes glint { to { background-position: 300px 0; } }
.birds i { position: absolute; left: -60px; top: var(--y); width: 26px; height: 12px; animation: fly var(--d) linear var(--w) infinite; }
.birds i::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1 3c5-2 9 0 12 6 3-6 7-8 12-6-5 0-8 2-12 9C9 5 6 3 1 3Z' fill='%233a2a2a'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .55; animation: flap .5s ease-in-out infinite alternate; }
@keyframes fly { 0% { translate: 0 0; } 50% { translate: 55vw -3vh; } 100% { translate: 112vw 1vh; } }
@keyframes flap { to { scale: 1 .35; } }
.haze { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 58% at 50% 46%, #fffaf0e6 0%, #fff7e8c4 40%, #fff3e000 76%), linear-gradient(#fff6e8aa, #fff6e800 30%); }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 760px) {
  .scene-img { background-image: url('../assets/images/scene-sm.jpg'); background-position: 50% 70%; }
  .haze { background: radial-gradient(ellipse 95% 60% at 50% 46%, #fffaf0ee 0%, #fff7e8d0 50%, #fff3e000 85%), linear-gradient(#fff6e8aa, #fff6e800 30%); }
}
@media (prefers-reduced-motion: reduce) { .scene *, .scene *::before { animation: none !important; } }