/* v14 latausruutu (kierros 14 L): valikon pudotuspaneelin ilme. Tumma läpikuultava lasi taivaan päällä,
   vaalea tornipiirros, joka täyttyy kerros kerrokselta alhaalta ylös todellisen edistymisen mukaan (js/site.js, --lp).
   Näkyy CSS:llä heti ensimmäisestä ruudusta (html.loading asetetaan headin skriptissä), joten välähdystä ei synny. */
.loader{display:none}
html.loading{overflow:hidden}
html.loading .loader{position:fixed;inset:0;z-index:80;display:block;overflow:hidden;color:#f7f7f5;
  background:linear-gradient(180deg,rgba(13,14,17,.84) 0%,rgba(15,15,15,.86) 55%,rgba(12,12,13,.9) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(115%);backdrop-filter:blur(26px) saturate(115%);
  transition:opacity 1s cubic-bezier(.45,0,.25,1)}   /* tasainen häivytys tummasta taivaaseen: ei nopeaa kirkkaushyppyä */
/* hento valo tornin takana ja hämärä reunoille (kuten valikossa), ei liikettä */
html.loading .loader::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42rem 34rem at 50% 58%,rgba(247,247,245,.055),transparent 62%),radial-gradient(70rem 44rem at 50% 120%,rgba(79,124,240,.07),transparent 60%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html.loading .loader{background:#0f0f0f}}
html.loader-out .loader{opacity:0;pointer-events:none}

/* wordmark ylhäällä, hiljainen teksti alhaalla */
.loader_brand{position:absolute;left:50%;top:clamp(1.5rem,6vh,3.25rem);transform:translateX(-50%);margin:0;line-height:1;color:#f7f7f5}
.loader_brand .brandsvg{height:1.5rem}
.loader_brand i{display:none}
.loader_note{position:absolute;left:50%;bottom:clamp(1.5rem,6vh,3.25rem);transform:translateX(-50%);margin:0;white-space:nowrap;font-size:.6875rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:rgba(247,247,245,.62)}

/* torni: sama piirros kuin valikossa, vaaleilla viivoilla */
.loader_tower{position:absolute;left:50%;top:51%;height:60vh;height:60svh;aspect-ratio:64/210;transform:translate(-50%,-50%)}
.loader_svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:transform 1.1s var(--io),opacity .8s var(--out)}
.loader_svg *{vector-effect:non-scaling-stroke}
.lt_base .ol,.lt_base .rl{fill:none;stroke:rgba(247,247,245,.2);stroke-width:1}
.lt_base .fl{stroke:rgba(247,247,245,.06);stroke-width:1}
.lt_base .ml{stroke:rgba(247,247,245,.035);stroke-width:1}
.lt_base .lt_flag{fill:none;stroke:rgba(247,247,245,.2)}
/* täyttö: valkoiset ääriviivat, kerrosviivat näkyviin, lasi hennosti valaistu */
.lt_fill .ol{fill:none;stroke:#f7f7f5;stroke-width:1.15}
.lt_fill polygon.ol{fill:rgba(247,247,245,.085)}
.lt_fill .fl{stroke:rgba(247,247,245,.34);stroke-width:1}
.lt_fill .ml{stroke:rgba(247,247,245,.12);stroke-width:1}
.lt_fill .rl{fill:none;stroke:rgba(247,247,245,.6);stroke-width:1}
.lt_fill .lt_flag{fill:#f7f7f5;stroke:none}
.loader_svg .gl{stroke:rgba(247,247,245,.3);stroke-width:1}
/* sininen kerrosviiva täytön yläreunassa (tasainen hehku, ei sykettä) */
.lt_band{stroke:var(--accent-l);stroke-width:1.5;filter:drop-shadow(0 0 4px rgba(79,124,240,.75));transition:opacity .5s ease}

/* kerroslaskuri seuraa kerrosviivaa tornin oikealla puolella; ohut johdin jatkaa viivaa */
.loader_n{position:absolute;left:100%;bottom:calc(1.9% + var(--lp,0) * 91.9%);transform:translateY(50%);display:flex;align-items:center;gap:.6rem;white-space:nowrap;line-height:1;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:rgba(247,247,245,.6);font-variant-numeric:tabular-nums}
.loader_n::before{content:"";width:1.5rem;height:1px;background:linear-gradient(90deg,rgba(79,124,240,.85),rgba(247,247,245,.35))}
.loader_n b{font-size:1.0625rem;font-weight:400;letter-spacing:.02em;color:#f7f7f5;margin-left:-.15rem}
.loader_n small{font-size:inherit;text-decoration:none;color:rgba(247,247,245,.42);letter-spacing:.06em}

/* sisääntulo: elementit nousevat esiin pehmeästi (vain ensimmäisellä ruudulla, CSS:llä) */
@keyframes ldIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ldInX{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}
html.loading .loader_brand,html.loading .loader_note{animation:ldInX .9s var(--out) backwards}
html.loading .loader_note{animation-delay:.15s}
html.loading .loader_svg{animation:ldIn 1s var(--out) .05s backwards}

/* valmis: kerrosviiva ja laskuri häipyvät, torni nousee hieman ja ruutu häivytetään (1 s) */
html.loader-done .lt_band{opacity:0}
html.loader-done .loader_n{opacity:0;transition:opacity .45s ease}
html.loader-done .loader_svg{transform:translateY(-1.5%) scale(1.015)}
html.loader-out .loader_svg{opacity:0}
html.loader-out .loader_brand,html.loader-out .loader_note{opacity:0;transition:opacity .5s ease}

@media (max-width:767px){
  .loader_tower{height:50svh;top:50%}
  .loader_brand .brandsvg{height:1.3rem}
  .loader_n{gap:.45rem}
  .loader_n::before{width:.75rem}
  .loader_n b{font-size:.9375rem}
  .loader_n small{display:none}   /* kapealla ruudulla laskuri mahtuu reunaan asti ilmavasti */
}
@media (max-height:600px){.loader_tower{height:54svh}}
html.reduced .loader_brand,html.reduced .loader_note,html.reduced .loader_svg{animation:none}
html.reduced.loader-done .loader_svg{transform:none}
html.reduced .loader{transition-duration:.4s}

/* evästebanneri näytetään vasta loaderin jälkeen (ei peitä latausruutua) */
html.loading #cc-root{opacity:0!important;pointer-events:none!important;transition:none!important}