/* =============================================================================
   Aviapolis-skrollianimaatio

   Osa 1  Perusta ja rakenne
   Osa 2  Alkuperäiset tyylit (skrolli.tietoa.fi/aviapolis, poimittu 19.8.2026)
   Osa 3  Latausindikaattori
   Osa 4  Staattinen vaihtoehto (prefers-reduced-motion, no-JS)
   ============================================================================= */

/* --- Osa 1: perusta ja rakenne ------------------------------------------- */

/* Huom: ei globaalia box-sizing: border-box. Alkuperäinen sivu käytti selaimen
   oletusta (content-box), ja .sa-callout sekä .button-white on mitoitettu sen
   mukaan: leveys + padding. Border-box kutistaisi laatikot. */

html {
    /* Skrollaus tapahtuu aina askeleittain, ei hyppäyksinä. */
    scroll-behavior: auto;
}

body {
    margin: 0;
    padding: 0;
    background: #D14200;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    /* Estää ylivenymisen ketjuuntumisen sivun päättyessä. */
    overscroll-behavior-y: none;
}

#target_start {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
}

/* Skrollipituus tulee ScrollTriggerin pin-spacerista: 667 kuvaa x 40 px
   = 26 680 px, plus pinnatun elementin oma ruudullinen. */
.scrollsequence-wrap {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    /* Näytetään vasta kun esilataus on valmis: script.js lisää .ready.
       Häivytys on CSS-siirtymä eikä GSAP-tween, koska tween jäisi kesken
       jos välilehti on taustalla latauksen valmistuessa.
       Huom: pelkkä opacity, ei visibility – visibility periytyy laatikoihin,
       ja GSAP tulkitsisi ne autoAlpha-arvoltaan nollaksi. */
    opacity: 0;
    transition: opacity 1.25s ease;
}

.scrollsequence-wrap.ready { opacity: 1; }

/* Jos välilehti on taustalla kun lataus valmistuu, siirtymä jäisi kesken. */
.scrollsequence-wrap.no-fade { transition: none; }

.scrollsequence-sticky {
    position: relative;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
}

.scrollsequence-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

/* --- Osa 2: alkuperäiset tyylit ------------------------------------------ */

.scrollsequence-pages-wrap {
    position: relative;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.scrollsequence-page {
    position: relative;
    display: block;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

:root {
    --sa-callout-width: 200px;
}

.sa-callout {
    color: black;
    background: #ffcc99cf;
    padding: calc(var(--sa-callout-width) * 0.1);
    border-radius: 15px;
    width: calc(var(--sa-callout-width) * 1.2);
    box-shadow: 7px 7px 5px 1px #fc942d45;
    font-family: Arial, Helvetica, sans-serif;
    /* GSAP kirjoittaa transformin tähän; will-change pitää sen omalla tasollaan. */
    will-change: transform;
}

/* Alkuperäisessä kaikki otsikot olivat h1. Otsikkotasot on korjattu
   (ensimmäinen laatikko h1, loput h2), joten tyyli koskee molempia. */
.sa-callout h1,
.sa-callout h2 {
    font-weight: 700;
    font-size: calc(var(--sa-callout-width) * 0.11);
    line-height: calc(var(--sa-callout-width) * 0.12);
    margin: 0 0 30px;
    letter-spacing: -0.03em;
}

.sa-callout p {
    font-size: calc(var(--sa-callout-width) * 0.05);
    line-height: calc(var(--sa-callout-width) * 0.06);
}

.sa-callout a { color: inherit; }

/* Laatikoiden sijoittelu */
.sa-center-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sa-right-center {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translate(0, -50%);
}

.sa-left-center {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translate(0, -50%);
}

/* Vasen ylänurkka: paluu alkuun */
.ssq-top-left {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 600px;
    text-align: left;
    margin: 0;
    color: white;
    z-index: 2;
}

.button-white {
    border: none;
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 10px 10px;
    margin: 0;
    visibility: visible;
    width: calc(var(--sa-callout-width) * 0.1);
    height: calc(var(--sa-callout-width) * 0.1);
}

.button-white img { width: 100%; height: 100%; }

.button-white:hover,
.button-white:focus {
    color: initial;
    background-color: #e2e2e2;
    text-decoration: none;
}

/* Pystysuuntainen näyttö: kuva ylös 55 vh:n kaistaan, tekstit sen alle */
@media (max-aspect-ratio: 1/1) {
    .scrollsequence-pages-wrap { height: 55vh; }

    .sa-right-center,
    .sa-left-center,
    .sa-center-center {
        top: 57vh;
        left: 50%;
        right: auto;
        transform: translate(-50%, 0);
    }
}

/* Laatikon skaalaus näytön leveyden mukaan */
@media (max-width: 600px)  { :root { --sa-callout-width: 200px; } }
@media (min-width: 900px)  { :root { --sa-callout-width: 300px; } }
@media (min-width: 1400px) { :root { --sa-callout-width: 500px; } }
@media (min-width: 2600px) { :root { --sa-callout-width: 800px; } }

/* "Rullaa alas" -kehote (vain box0) */
.kehote {
    text-align: center;
    color: white;
    animation: rullaKehote 3s ease-in-out infinite;
}

.kehote img {
    width:  calc(var(--sa-callout-width) * .3);
    height: calc(var(--sa-callout-width) * .3);
}

@keyframes rullaKehote {
    0%   { opacity: 0; }
    20%  { opacity: 0.85; }
    40%  { transform: translateY(2em); opacity: 0; }
    100% { transform: translateY(2em); opacity: 0; }
}

/* --- Osa 3: latausindikaattori ------------------------------------------- */

#loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D14200;
    transition: opacity .6s ease;
}

#loader.done {
    opacity: 0;
    pointer-events: none;
}

#loader-inner { text-align: center; padding: 0 24px; box-sizing: border-box; }

#loader-text {
    margin: 0 0 18px;
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .8;
}

#loader-track {
    width: min(240px, 60vw);
    height: 2px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .25);
    overflow: hidden;
}

#loader-bar {
    width: 0%;
    height: 100%;
    background: #fff;
    transition: width .2s ease;
}

#loader-percent {
    margin: 12px 0 0;
    font-size: 12px;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

/* --- Osa 4: staattinen vaihtoehto ---------------------------------------- */

#noscript-note {
    box-sizing: border-box;
    display: none;
    max-width: 46rem;
    margin: 0 auto;
    padding: 12vh 24px;
    line-height: 1.5;
}

#noscript-note h1 { font-size: 2rem; letter-spacing: -0.03em; }
#noscript-note a  { color: #fff; }

#static-doc {
    box-sizing: border-box;
    max-width: 48rem;
    margin: 0 auto;
    padding: 40px 24px 96px;
}

#static-doc .static-intro {
    margin: 0 0 48px;
    line-height: 1.5;
}

#static-doc .static-intro h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.03em;
    margin: 0 0 .5em;
}

#show-animation {
    font: inherit;
    font-weight: 700;
    color: #D14200;
    background: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    margin: 8px 0 0;
    cursor: pointer;
}

#show-animation:hover,
#show-animation:focus { background: #ffcc99; }

#static-doc .static-section { margin: 0 0 64px; }

#static-doc .static-section img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0 0 20px;
    background: rgba(0, 0, 0, .15);
}

#static-doc .sa-callout {
    box-sizing: border-box;
    width: auto;
    margin: 0;
    padding: 24px 28px;
    will-change: auto;
}

#static-doc .sa-callout h1,
#static-doc .sa-callout h2 {
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: 1.2;
    margin: 0 0 16px;
}

#static-doc .sa-callout p {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 12px;
}

#static-doc .sa-callout p:last-child { margin-bottom: 0; }
#static-doc .kehote { display: none; }