/* Layout: one full-bleed SVG valley that re-frames itself to the screen; light follows the real sun over St. Petersburg */
:root{
  --sky0:#1b2050; --sky1:#3b3a72; --sky2:#7a5683; --sky3:#d0786e; --sky4:#f7b06e;
  --sun:#ffb060; --sunglow:#ff9a5a; --cloud:#e8a08a;
  --far:#9d8fb3; --snow:#f6dcd6; --mid:#6e6890; --haze:#e09a7c; --gorge:#55617a;
  --cliff:#33465a; --cliffhi:#6a7f96; --rim:#f0a575; --pine:#1f3036; --moss:#44533e;
  --bank:#2b3d3b; --fore:#152022; --stone:#ecd6bc; --stonesh:#b9a38b; --roof:#5c7f78;
  --river:#7d9fb6; --foam:#f3f2f2; --gold:#e0a040; --amber:#c8692f; --rust:#9b3f2a; --olive:#8d8a3c; --trunk:#2a2220; --birds:#2a2140;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:#141a36;overflow:hidden}
.stage{position:fixed;inset:0}
#scene{width:100%;height:100%;display:block}

#scene path,#scene rect,#scene circle,#scene ellipse{transition:fill 3s ease}
.f-far{fill:var(--far)} .f-snow{fill:var(--snow)} .f-mid{fill:var(--mid)} .f-gorge{fill:var(--gorge)}
.f-cliff{fill:var(--cliff)} .f-pine{fill:var(--pine)} .f-moss{fill:var(--moss)} .f-bank{fill:var(--bank)} .f-fore{fill:var(--fore)}
.f-stone{fill:var(--stone)} .f-stonesh{fill:var(--stonesh)} .f-roof{fill:var(--roof)} .f-river{fill:var(--river)}
.f-foam{fill:var(--foam)} .f-gold{fill:var(--gold)} .f-amber{fill:var(--amber)} .f-rust{fill:var(--rust)}
.f-olive{fill:var(--olive)} .f-trunk{fill:var(--trunk)} .f-cloud{fill:var(--cloud)} .f-sun{fill:var(--sun)}
.s-hi{stroke:var(--cliffhi);fill:none} .s-rim{stroke:var(--rim);fill:none} .s-foam{stroke:var(--foam);fill:none}
.s-river{stroke:var(--river);fill:none} .s-stone{stroke:var(--stonesh);fill:none} .s-birds{stroke:var(--birds);fill:none}

#stars,#moon,#lights,#glow,#mist,#fireflies,#sunglow,#sun,#flock{transition:opacity 3s ease}

.flow{animation:flow linear infinite}
@keyframes flow{to{stroke-dashoffset:var(--off)}}
.pulse{animation:pulse 3.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes pulse{from{transform:scale(.88);opacity:.45}to{transform:scale(1.12);opacity:.8}}
.rise{animation:rise 7s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes rise{0%{transform:translateY(0) scale(.7);opacity:0}25%{opacity:.6}100%{transform:translateY(-80px) scale(1.7);opacity:0}}
.drift{animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-60px)}to{transform:translateX(70px)}}
.cloud{animation:cloud 140s ease-in-out infinite alternate}
@keyframes cloud{from{transform:translateX(-160px)}to{transform:translateX(220px)}}
.tw{animation:tw ease-in-out infinite alternate}
@keyframes tw{from{opacity:.2}to{opacity:1}}
.flock{animation:fly 80s linear infinite}
@keyframes fly{from{transform:translate(-500px,40px)}to{transform:translate(2500px,-70px)}}
.bird{animation:flap .8s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.25)}}
.flick{animation:flick 5s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:1}46%{opacity:.9}50%{opacity:.55}54%{opacity:.95}}

/* stop-color через классы: inline style запрещён CSP */
.sc-foam{stop-color:var(--foam)}
.sc-haze{stop-color:var(--haze)}
.sc-river{stop-color:var(--river)}
.sc-sky0{stop-color:var(--sky0)}
.sc-sky1{stop-color:var(--sky1)}
.sc-sky2{stop-color:var(--sky2)}
.sc-sky3{stop-color:var(--sky3)}
.sc-sky4{stop-color:var(--sky4)}
.sc-sunglow{stop-color:var(--sunglow)}

/* Ссылка на все сервисы: едва заметная, появляется через 2 секунды */
.more {
  position: fixed; right: calc(1.4rem + env(safe-area-inset-right)); bottom: calc(1.1rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .4rem;
  color: #f4ead8; opacity: 0; text-decoration: none;
  font: .82rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .1em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .65), 0 0 2px rgba(0, 0, 0, .5);
  padding: .5rem .35rem;
  animation: appear 1.4s 2.2s ease-out forwards;
  transition: opacity .3s, gap .3s;
}
.more svg { opacity: .8; }
.more:hover, .more:focus-visible { opacity: 1 !important; gap: .65rem; }
.more:focus-visible { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: 4px; border-radius: 4px; }
@keyframes appear { to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .more { animation: none; opacity: .6; transition: none; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* Панель с временем, погодой и светилами: слева сверху, тонкий шрифт, не спорит с пейзажем */
.info {
  position: fixed; top: calc(1rem + env(safe-area-inset-top)); left: calc(1.4rem + env(safe-area-inset-left));
  max-width: min(26rem, calc(100vw - 2.8rem));
  color: #f4ead8; font: .85rem/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .55);
  opacity: 0; animation: infoIn 1.4s .6s ease-out forwards;
  pointer-events: none;
}
.info a { pointer-events: auto; }
.info .clock { font-size: 2.6rem; font-weight: 200; line-height: 1.05; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.info .place { opacity: .85; }
.info .local { opacity: .85; margin-top: .25rem; }
.info .skew { opacity: .85; color: #ffd9a0; }
.info .line { opacity: .8; margin-top: .25rem; }
.info .credit { display: inline-block; margin-top: .35rem; font-size: .68rem; opacity: .45; color: inherit; text-decoration: none; }
.info .credit:hover, .info .credit:focus-visible { opacity: .9; text-decoration: underline; }
@keyframes infoIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .info { animation: none; opacity: 1; } }
@media (max-width: 480px) { .info .clock { font-size: 2.1rem; } .info { font-size: .78rem; } }
.info::before {
  content: ""; position: absolute; inset: -1.2rem -2.4rem -1.2rem -1.8rem; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 28% 40%, rgba(8, 14, 30, .42), rgba(8, 14, 30, 0) 72%);
}

/* Погода: осадки на canvas, вспышка молнии, круги на воде */
#precip { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flash { position: fixed; inset: 0; background: #eef3ff; opacity: 0; pointer-events: none; }
.flash.on { animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: 0; } 6% { opacity: .75; } 14% { opacity: .08; } 22% { opacity: .55; } 100% { opacity: 0; } }
.ripple { fill: none; stroke: #f3f6fa; stroke-width: 1.3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ripple 1.9s ease-out infinite; }
@keyframes ripple { 0% { transform: scale(.25); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ripple, .flash.on { animation: none; } }