/* Germaniya manzaralari: sahifa tepasidagi animatsiyali banner. Faqat transform/opacity animatsiya qilinadi. */
.scene{position:relative;margin:0 0 22px;height:clamp(130px,24vw,200px);border-radius:14px;overflow:hidden;background:var(--sky);box-shadow:0 0 0 1px var(--line);isolation:isolate}
.scene.compact{height:clamp(84px,13vw,112px);margin-bottom:18px}
.scene>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:var(--o,50% 100%);animation:sc-zoom 48s ease-in-out infinite alternate;animation-delay:var(--t)}
.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--vp,50% 45%);opacity:0;transition:opacity .7s ease}
.scene video.on{opacity:1}
.scene[data-s="berlin"]{--vp:50% 30%}.scene[data-s="bayern"]{--vp:50% 40%}
.scene figcaption{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 20px);padding:5px 11px 5px 8px;border-radius:999px;background:rgba(10,16,28,.62);color:#fff;font-size:13px;line-height:1.3;backdrop-filter:blur(4px)}
.scene figcaption .ic{width:14px;height:14px;color:#86A8FF}
.scene figcaption span{color:#D5DEE8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene.compact figcaption{left:8px;bottom:8px;font-size:12px;padding:3px 9px 3px 6px}
@keyframes sc-zoom{from{transform:scale(1)}to{transform:scale(1.04)}}
@keyframes sc-drift{from{transform:translateX(-260px)}to{transform:translateX(1140px)}}
@keyframes sc-tw{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes sc-go{from{transform:translateX(-200px)}to{transform:translateX(1100px)}}
@keyframes sc-back{from{transform:translateX(1500px)}to{transform:translateX(500px)}}
.scene .cl{fill:var(--cloud);opacity:.85;animation:sc-drift 150s linear infinite;animation-delay:var(--t)}
.scene .cl.c2{opacity:.6;animation-duration:230s;animation-delay:calc(var(--t) - 90s)}
.scene .tw,.skyline .tw{animation:sc-tw 5s ease-in-out infinite;animation-delay:var(--t)}
.scene .tw:nth-of-type(2n){animation-duration:7s}
.scene .tw:nth-of-type(3n){animation-duration:3.6s}
.scene .ship{animation:sc-go 120s linear infinite;animation-delay:var(--t)}
.scene .train{animation:sc-back 34s linear infinite;animation-delay:var(--t)}
.scene .a{fill:var(--a)}.scene .b{fill:var(--b)}.scene .c{fill:var(--c)}.scene .d{fill:var(--d)}.scene .w{fill:var(--w)}
.scene .far{fill:var(--far)}.scene .gr{fill:var(--gr)}.scene .wa{fill:var(--wa)}
.scene .st{fill:#fff}.scene .moon{fill:#FFF3C4}.scene .sun{fill:var(--sun,#FFE9A8)}
.scene .sh{fill:#fff;opacity:.35}
.scene .ln{fill:none;stroke:var(--d);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.scene .hl{fill:none;stroke:#fff;stroke-opacity:.55;stroke-width:1.6}
.scene .tree{fill:var(--tree,#1E2A3A)}

.scene[data-s="berlin"]{--sky:linear-gradient(#1B2550 0%,#4A3F78 45%,#C9727F 78%,#F3B37A 100%);--o:38% 100%;--cloud:#F6C8C0;--a:#EBCFA4;--b:#B58E66;--c:#3F7A68;--d:#4A3A4E;--w:#FFE08A;--far:#3A3566;--gr:#241F3D;--tree:#1D1A33}
.scene[data-s="berlin"] .turm .a{fill:#C9CEE4}.scene[data-s="berlin"] .turm .b{fill:#8C92B4}.scene[data-s="berlin"] .turm .c{fill:#D6453D}
.scene[data-s="koeln"]{--sky:linear-gradient(#3B2A5C 0%,#A64B6B 40%,#F0795A 72%,#FFC57A 100%);--o:58% 100%;--cloud:#FFD3B0;--a:#2E2440;--b:#241B34;--c:#C8102E;--d:#1D1529;--w:#FFD98A;--far:#57305A;--wa:#3F2F63;--sun:#FFE2A0}
.scene[data-s="bayern"]{--sky:linear-gradient(#4FA3EA 0%,#9DCDF5 60%,#DDF0FB 100%);--o:64% 100%;--cloud:#FFFFFF;--a:#F5F1E8;--b:#D9D2C2;--c:#C2553D;--d:#43557A;--w:#3B4A66;--gr:#3E8A4E;--sun:#FFF4C2}
.scene[data-s="bayern"] .mt1{fill:#9DB4D6}.scene[data-s="bayern"] .snow{fill:#fff}.scene[data-s="bayern"] .mt2{fill:#6C8DB3}.scene[data-s="bayern"] .hill{fill:#2F7046}
.scene[data-s="bayern"] .lake{fill:#2E86C1}.scene[data-s="bayern"] .rock{fill:#6F7F6A}.scene[data-s="bayern"] .rock2{fill:#8C9B84}.scene[data-s="bayern"] .pine{fill:#1F5235}
.scene[data-s="bayern"] .cl{opacity:.95}.scene[data-s="bayern"] .sh{opacity:.5}
.scene[data-s="hamburg"]{--sky:linear-gradient(#0D2C47 0%,#1F5C78 48%,#5FA3A0 80%,#F2C48A 100%);--o:62% 100%;--cloud:#BFDDE2;--a:#CBEAF2;--b:#33475C;--c:#8A4632;--d:#14212E;--w:#FFDF8E;--far:#1B3B55;--wa:#123A55}
.scene[data-s="hamburg"] .michel .c{fill:#4F9C86}.scene[data-s="hamburg"] .ship .c{fill:#D6453D}.scene[data-s="hamburg"] .ship .a{fill:#E8B23A}.scene[data-s="hamburg"] .ship .b{fill:#E9EEF2}

/* Siluet qatori: kirish sahifasi va sayohat pardasi tubida */
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(30vh,240px);color:#15306B;overflow:visible;pointer-events:none}
.skyline *{fill:currentColor;stroke:none}
.skyline .w,.skyline .hl,.skyline .ln{display:none}
.skyline .far{opacity:.55}
.jr .skyline{opacity:0;transition:opacity .8s ease;z-index:0}
.jr[data-scene="land"] .skyline,.jr[data-scene="a1"] .skyline,.jr[data-scene="back"] .skyline{opacity:1}
@media (max-width:520px){.scene figcaption span{display:none}.scene{margin-bottom:18px}}
@media (prefers-reduced-motion:reduce){.scene>svg,.scene *{animation:none!important}}

/* Sahifa foni: joriy manzara rangidagi juda och tus (tepadan so'nib boradi) va sahifa tubidagi shaharlar silueti. */
body[data-tint="berlin"]{--tint:#7A5BC0}body[data-tint="koeln"]{--tint:#F0795A}body[data-tint="bayern"]{--tint:#3F97E6}body[data-tint="hamburg"]{--tint:#1F9C98}
body[data-tint]:not([data-tint=""]){background:linear-gradient(to bottom,color-mix(in srgb,var(--tint) 13%,var(--bg)) 0,var(--bg) 560px) no-repeat,var(--bg)}
.pageline{position:relative;z-index:-1;height:150px;margin-top:-150px;overflow:hidden;pointer-events:none}
.pageline .skyline{height:100%;color:color-mix(in srgb,var(--tint,var(--ink)) 13%,var(--bg))}
body.authmode .pageline,body:not([data-tint]) .pageline,body[data-tint=""] .pageline{display:none}
/* Video o'rniga rasm (A1: tungi Brandenburger Tor) — chizilgan manzara ustini to'liq yopadi */
.scene .scene-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
@media (min-width:1000px){.scene .scene-photo{object-position:50% 27%}} /* keng banner: kvadriga va darvoza tepasi birga */