/* Voices247 – »Byen«: bevægelse og døgn i footeren (Kim 24/10). Scenen bygges af js/v247-byen.js.
   Kun CSS-/SVG-animationer. Pause når footeren er ude af syne eller fanen er skjult; stille scene ved prefers-reduced-motion. */

/* Teksten ligger altid over byen og himlen */
.v247-footer .v247-footer-brand,
.v247-footer .v247-footer-col,
.v247-footer .v247-footer-legal { position: relative; z-index: 1; }

/* Serveren har allerede valgt døgnfase og kalenderlag: den statiske dagsby vises kun om dagen uden begivenhed,
   så der aldrig blinker en dagsby om aftenen, før v247-byen.js har bygget scenen. */
.v247-footer-skyline:not([data-byen-phase="day"]) .byen-static,
.v247-footer[data-byen-event] .v247-footer-skyline .byen-static { display: none; }

/* Døgnets lys over hele footeren (blød overgang mellem faserne) */
.v247-footer::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 12, 10, .34), rgba(6, 12, 10, 0) 72%);
    opacity: 0; transition: opacity 4s ease;
}
.v247-footer[data-byen-phase="dusk"]::before,
.v247-footer[data-byen-phase="dawn"]::before { opacity: .55; }
.v247-footer[data-byen-phase="night"]::before { opacity: 1; }
.v247-footer[data-byen-event="halloween"]::before { background: linear-gradient(180deg, rgba(20, 10, 30, .45), rgba(20, 10, 30, 0) 75%); }
.v247-footer[data-byen-event="newyear"]::before { background: linear-gradient(180deg, rgba(6, 8, 18, .5), rgba(6, 8, 18, 0) 80%); }

.v247-footer-skyline .byen-sun { transition: transform 60s linear; }

/* Havvindmøllerne: farten følger vinden (data-byen-wind) */
.v247-footer-skyline .byen-rotor { animation: byen-spin calc(var(--byen-spin, 15s) * var(--byen-k, 1)) linear infinite; }
.v247-footer-skyline[data-byen-wind="fast"] .byen-rotor { --byen-spin: 4.6s; }
.v247-footer-skyline[data-byen-wind="calm"] .byen-rotor,
.v247-footer-skyline[data-byen-wind="storm"] .byen-rotor { animation-play-state: paused; } /* stille vejr: står stille · storm: stoppet */
@keyframes byen-spin { to { transform: rotate(360deg); } }

/* Vimplen på kajen */
.v247-footer-skyline .byen-pennant { transform: rotate(38deg); transition: transform 3s ease; }
.v247-footer-skyline .byen-flutter { transform-origin: 0 0; animation: byen-flutter 3.4s ease-in-out infinite alternate; }
.v247-footer-skyline[data-byen-wind="calm"] .byen-pennant { transform: rotate(80deg); }
.v247-footer-skyline[data-byen-wind="calm"] .byen-flutter { animation: none; }
.v247-footer-skyline[data-byen-wind="fast"] .byen-pennant { transform: rotate(14deg); }
.v247-footer-skyline[data-byen-wind="fast"] .byen-flutter { animation-duration: 1.1s; }
.v247-footer-skyline[data-byen-wind="storm"] .byen-pennant { transform: rotate(0deg); }
.v247-footer-skyline[data-byen-wind="storm"] .byen-flutter { animation: byen-flutter-storm .32s linear infinite alternate; }
@keyframes byen-flutter { from { transform: skewY(-5deg) scaleX(.97); } to { transform: skewY(4deg) scaleX(1); } }
@keyframes byen-flutter-storm { from { transform: skewY(-2deg); } to { transform: skewY(2deg) scaleX(1.03); } }

/* Både, ballon, skyer */
.v247-footer-skyline .byen-glide { animation: byen-glide 200s linear infinite; }
@keyframes byen-glide { from { transform: translateX(var(--byen-a)); } to { transform: translateX(var(--byen-b)); } }
.v247-footer-skyline .byen-sail { animation: byen-sail 70s ease-in-out infinite alternate; }
@keyframes byen-sail { 0% { transform: translateX(-26px); } 48% { transform: translateX(10px) rotate(-1.5deg); } 100% { transform: translateX(30px); } }
.v247-footer-skyline .byen-balloon { animation: byen-balloon 540s linear infinite; animation-delay: -120s; }
@keyframes byen-balloon { 0% { transform: translateX(-180px); opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(760px); opacity: 0; } }
.v247-footer-skyline .byen-bob { animation: byen-bob 7s ease-in-out infinite alternate; }
@keyframes byen-bob { from { transform: translateY(-2.5px); } to { transform: translateY(2.5px); } }
.v247-footer-skyline .byen-cloud { animation: byen-cloud 140s ease-in-out infinite alternate; }
@keyframes byen-cloud { from { transform: translateX(-34px); } to { transform: translateX(34px); } }
.v247-footer-skyline .byen-steam { animation: byen-steam 9s ease-in-out infinite alternate; }
@keyframes byen-steam { from { transform: translateY(1.5px); opacity: .7; } to { transform: translateY(-2px); opacity: 1; } }

/* Nat */
.v247-footer-skyline .byen-twinkle { animation: byen-twinkle 7s ease-in-out infinite alternate; }
@keyframes byen-twinkle { 0%, 60% { opacity: 1; } 100% { opacity: .35; } }

/* Begivenheder */
.v247-footer-skyline .byen-burst { opacity: 0; animation: byen-burst 7s ease-out infinite; }
@keyframes byen-burst {
    0% { opacity: 0; transform: scale(.2); }
    5% { opacity: 1; }
    12% { transform: scale(1); }
    28% { opacity: .85; transform: scale(1.07) translateY(2px); }
    38% { opacity: 0; transform: scale(1.12) translateY(5px); }
    100% { opacity: 0; transform: scale(1.12) translateY(5px); }
}
.v247-footer-skyline .byen-hover { animation: byen-hover 8s ease-in-out infinite alternate; }
@keyframes byen-hover { from { transform: translate(-3px, 1.5px); } to { transform: translate(3px, -2px); } }
.v247-footer-skyline .byen-flap { animation: byen-flap .55s ease-in-out infinite alternate; }
@keyframes byen-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.v247-footer-skyline .byen-candle { animation: byen-candle 3.1s ease-in-out infinite; }
@keyframes byen-candle { 0%, 100% { opacity: 1; } 18% { opacity: .78; } 34% { opacity: .95; } 61% { opacity: .7; } 80% { opacity: .92; } }
.v247-footer-skyline .byen-fog { animation: byen-fog 46s ease-in-out infinite alternate; }
@keyframes byen-fog { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
.v247-footer-skyline .byen-sleigh { opacity: 0; animation: byen-sleigh 80s linear infinite; animation-delay: -6s; }
@keyframes byen-sleigh { 0% { transform: translate(-260px, 18px); opacity: 0; } 4% { opacity: 1; } 34% { opacity: 1; } 38% { transform: translate(260px, -22px); opacity: 0; } 100% { transform: translate(260px, -22px); opacity: 0; } }
.v247-footer-skyline .byen-fire { transform-origin: 0 -2px; animation: byen-fire .9s ease-in-out infinite alternate; }
@keyframes byen-fire { 0% { transform: scale(1, .92); } 40% { transform: scale(.97, 1.05) skewX(2deg); } 100% { transform: scale(1.02, .97) skewX(-2deg); } }
.v247-footer-skyline .byen-sparks { animation: byen-sparks 3.2s linear infinite; }
@keyframes byen-sparks { from { transform: translateY(6px); opacity: 1; } to { transform: translateY(-10px); opacity: .2; } }
.v247-footer-skyline .byen-wave { animation: byen-wave 3s ease-in-out infinite alternate; }
@keyframes byen-wave { from { transform: skewY(-3deg); } to { transform: skewY(2.5deg) scaleX(.97); } }
.v247-footer-skyline .byen-snow { animation: byen-snow 42s linear infinite; }
@keyframes byen-snow { from { transform: translate(0, 0); } 50% { transform: translate(6px, 100px); } to { transform: translate(0, 200px); } }

/* v10: kalender, astronomi, ugerytme og små ting */
.v247-footer[data-byen-event="earthhour"]::before { background: linear-gradient(180deg, rgba(4, 8, 7, .55), rgba(4, 8, 7, .15) 80%); }
.v247-footer-skyline .byen-plane { animation: byen-plane 150s linear infinite; animation-delay: -38s; }
@keyframes byen-plane { 0% { transform: translateX(-240px); opacity: 0; } 3% { opacity: 1; } 55% { opacity: 1; } 58% { transform: translateX(900px); opacity: 0; } 100% { transform: translateX(900px); opacity: 0; } }
.v247-footer-skyline .byen-banner { transform-origin: -6px 0; animation: byen-flutter 2.6s ease-in-out infinite alternate; }
.v247-footer-skyline .byen-gull { animation: byen-gull 13s ease-in-out infinite alternate; }
@keyframes byen-gull { 0% { transform: translate(-8px, 1px) rotate(-3deg); } 50% { transform: translate(4px, -2.5px) rotate(2deg) scaleY(.8); } 100% { transform: translate(10px, 1px) rotate(-1deg); } }
.v247-footer-skyline .byen-kite { transform-origin: 0 6px; animation: byen-kite 6s ease-in-out infinite alternate; }
@keyframes byen-kite { from { transform: rotate(-7deg) translateY(1px); } to { transform: rotate(6deg) translateY(-1.5px); } }
.v247-footer-skyline .byen-aurora { animation: byen-aurora 24s ease-in-out infinite alternate; }
@keyframes byen-aurora { 0% { opacity: .65; transform: translateX(-10px) scaleY(.95); } 50% { opacity: 1; } 100% { opacity: .75; transform: translateX(12px) scaleY(1.06); } }
.v247-footer-skyline .byen-meteor { opacity: 0; animation: byen-meteor 12s linear infinite; }
@keyframes byen-meteor { 0%, 88% { opacity: 0; transform: translate(0, 0); } 90% { opacity: 1; } 96% { opacity: 0; transform: translate(-14px, 7px); } 100% { opacity: 0; } }
.v247-footer-skyline .byen-beam { animation: byen-beam 16s ease-in-out infinite alternate; }
@keyframes byen-beam { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.v247-footer-skyline .byen-dance { animation: byen-dance 9s ease-in-out infinite alternate; }
@keyframes byen-dance { from { transform: rotate(-5deg) scale(.96); } to { transform: rotate(5deg) scale(1.04); } }

/* Pause: ude af syne / skjult fane. Stille scene: brugeren har bedt om mindre bevægelse. */
.v247-footer-skyline.byen-paused *,
.v247-footer-skyline.byen-paused *::before { animation-play-state: paused !important; }
.v247-footer-skyline.byen-still * { animation: none !important; transition: none !important; }
.v247-footer-skyline.byen-still .byen-burst, .v247-footer-skyline.byen-still .byen-meteor, .v247-footer-skyline.byen-still .byen-sleigh { opacity: 1; } /* stille scene: fyrværkeri og stjerneskud står stille, men ses */
@media (prefers-reduced-motion: reduce) {
    .v247-footer-skyline * { animation: none !important; transition: none !important; }
    .v247-footer-skyline .byen-burst, .v247-footer-skyline .byen-meteor, .v247-footer-skyline .byen-sleigh { opacity: 1; }
    .v247-footer::before { transition: none; }
}

/* Kim 26/10: byen glider blødt ind i stedet for at blinke fra den statiske dagsby. Uden JavaScript vises den statiske by som før. */
/* v247-manual.css sætter opacity: 1 !important på byen – derfor !important og højere specificitet her. */
@media (scripting: enabled) {
    .v247-footer svg.v247-footer-skyline { transition: opacity .7s ease; }
    .v247-footer svg.v247-footer-skyline:not(.byen-ready) { opacity: 0 !important; }
}
@media (scripting: enabled) and (prefers-reduced-motion: reduce) {
    .v247-footer svg.v247-footer-skyline { transition: none; }
}