/* The living Vestland landscape. Driven by three registered custom properties set from scene.js:
   --heat   (CO2):        haze, sun colour, glacier melt
   --strain (footprint):  forest thinning
   --power  (energy):     window light and chimney smoke                                     */

.scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: --heat var(--dur-slow) var(--ease-in-out),
                --strain var(--dur-slow) var(--ease-in-out),
                --power var(--dur-slow) var(--ease-in-out);

    --sky-top: #8fcbe0;
    --sky-bottom: #e9f4f1;
    --range-far: #9db9c4;
    --rock: #5f7a85;
    --wall: #2f4f5a;
    --water-top: #3e8aa0;
    --water-bottom: #134556;
    --shore: #3e6b47;
    --tree: #23452f;
}

.sky-top { stop-color: var(--sky-top); }
.sky-bottom { stop-color: var(--sky-bottom); }
.haze-top { stop-color: #d9a47a; }
.haze-bottom { stop-color: #f1dcc0; }
.sky-haze { opacity: calc(var(--heat) * .85); }
.haze { fill: #b98e6c; opacity: calc(var(--heat) * .28); mix-blend-mode: multiply; pointer-events: none; }

.stars, .aurora { opacity: 0; }

.sun-disc { fill: color-mix(in oklab, #ffd66b, #e5602f calc(var(--heat) * 100%)); }
.sun-glow { opacity: calc(.55 + var(--heat) * .45); }
.sun { animation: sun-rise 2.2s var(--ease-out) backwards .3s; }

.cloud { fill: #fff; opacity: calc(.85 - var(--heat) * .35); }
.c1 { animation: drift 70s linear infinite; }
.c2 { animation: drift 95s linear infinite reverse; }
.c3 { animation: drift 60s linear infinite; }

.range-far { fill: var(--range-far); }
.rock { fill: var(--rock); }
.glacier {
    fill: var(--glacier);
    transform-box: fill-box;
    transform-origin: 50% 0;
    transform: scale(calc(1 - var(--heat) * .8), calc(1 - var(--heat) * .9));
}
.wall-left, .wall-right { fill: var(--wall); }
.water-top { stop-color: color-mix(in oklab, var(--water-top), #8a7a52 calc(var(--heat) * 45%)); }
.water-bottom { stop-color: var(--water-bottom); }
.shore-left, .shore-right { fill: var(--shore); }

.shimmer path {
    fill: none;
    stroke: #e6f4f6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 18 26;
    opacity: .45;
    animation: shimmer 6s linear infinite;
}
.shimmer path:nth-child(even) { animation-duration: 9s; animation-direction: reverse; }

.ferry { animation: sail 80s linear infinite; }
.hull { fill: #f4f1ea; }
.deck { fill: var(--stove-red); }
.stack { fill: #1c2c33; }

.house .wall { fill: var(--stove-red); }
.house .roof { fill: #2d2a2a; }
.house .chimney { fill: #3a3433; }
.house .window {
    fill: color-mix(in oklab, #3a4a50, #ffd772 calc(var(--power) * 100%));
    filter: drop-shadow(0 0 calc(var(--power) * 6px) #ffcf5a);
}
.smoke circle {
    fill: #ebe8e2;
    opacity: 0;
    filter: blur(1.2px);
    transform-box: fill-box;
    transform-origin: center;
    animation: smoke 4.5s var(--ease-out) infinite;
}
.smoke circle:nth-child(2) { animation-delay: 1.5s; }
.smoke circle:nth-child(3) { animation-delay: 3s; }
.smoke { opacity: clamp(0, calc(var(--power) * 2.2), 1); }

.forest { fill: var(--tree); }
.f1 { opacity: clamp(.06, calc(1 - (var(--strain) - .55) * 4), 1); }
.f2 { opacity: clamp(.06, calc(1 - (var(--strain) - .3) * 4), 1); }
.f3 { opacity: clamp(.06, calc(1 - (var(--strain) - .8) * 4), 1); }

/* Entrance: the landscape rises in layers */
.layer { animation: rise 1.4s var(--ease-out) backwards; }
.range-far { animation-delay: .05s; }
.massif { animation-delay: .15s; }
.wall-left, .wall-right { animation-delay: .3s; }
.water { animation-delay: .4s; }
.shore-left, .shore-right { animation-delay: .5s; }
.house, .forest { animation: rise 1.2s var(--ease-spring) backwards .7s; }
.f2 { animation-delay: .8s; }
.f3 { animation-delay: .9s; }

@keyframes rise { from { transform: translateY(60px); opacity: 0; } }
@keyframes sun-rise { from { transform: translateY(120px); opacity: 0; } }
@keyframes drift { from { transform: translateX(-120px); } to { transform: translateX(120px); } }
@keyframes shimmer { to { stroke-dashoffset: -88; } }
@keyframes sail { from { transform: translate(-90px, 492px); } to { transform: translate(860px, 492px); } }
@keyframes smoke {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    20% { opacity: .55; }
    100% { opacity: 0; transform: translate(16px, -52px) scale(2.6); }
}
@keyframes twinkle { 50% { opacity: .35; } }
@keyframes aurora { 0%, 100% { transform: translateX(0) skewX(0); opacity: .55; } 50% { transform: translateX(-30px) skewX(-6deg); opacity: .9; } }

/* Dusk over the fjord */
@media (prefers-color-scheme: dark) {
    .scene {
        --sky-top: #071923;
        --sky-bottom: #24485a;
        --range-far: #2a4552;
        --rock: #34505b;
        --wall: #142b33;
        --water-top: #1d4e5f;
        --water-bottom: #06151b;
        --shore: #1d3a27;
        --tree: #0e2216;
        --glacier: #cfe2e6;
    }
    .stars { opacity: calc(1 - var(--heat) * .8); fill: #fff; }
    .stars circle { animation: twinkle 3.5s ease-in-out infinite; }
    .stars circle:nth-child(3n) { animation-delay: 1.2s; }
    .stars circle:nth-child(3n+1) { animation-delay: 2.1s; }
    .aurora { opacity: calc(.75 - var(--heat) * .7); animation: aurora 14s ease-in-out infinite; transform-box: fill-box; }
    .sun-disc { fill: color-mix(in oklab, #f2efe3, #e5602f calc(var(--heat) * 100%)); }
    .sun-glow { opacity: .35; }
    .cloud { fill: #3d5866; }
    .haze-top { stop-color: #5a3a2c; }
    .haze-bottom { stop-color: #7d5a3e; }
}

@media (prefers-reduced-motion: reduce) {
    .scene *, .scene { animation: none !important; }
    .ferry { transform: translate(420px, 492px); }
}