/*
 * ITB Vega – lekki animowany nagłówek
 * Układ bazowy: 1920 × 900 px, odtworzony z eksportu LayerSlider 7.9.5.
 */

.itbvega-hero,
.itbvega-hero * {
    box-sizing: border-box;
}

.itbvega-hero {
    --itbvega-ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
    --itbvega-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --itbvega-ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);

    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 1920 / 900;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
    line-height: 0;
    background: #fff;
    animation: itbvega-hero-reveal 350ms ease both;
}

.itbvega-hero--full-width {
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.itbvega-hero__stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
}

.itbvega-hero__layer {
    --itbvega-layer-opacity: 1;
    --itbvega-blend-mode: normal;
    --itbvega-intro-x: 0%;
    --itbvega-intro-y: 0%;
    --itbvega-intro-scale-x: 1;
    --itbvega-intro-scale-y: 1;
    --itbvega-intro-rotate: 0deg;
    --itbvega-final-rotate: 0deg;
    --itbvega-intro-opacity: 0;
    --itbvega-intro-origin: 50% 50%;
    --itbvega-intro-delay: 0ms;
    --itbvega-intro-duration: 1000ms;
    --itbvega-intro-easing: var(--itbvega-ease-in-out-quint);
    --itbvega-loop-x: 0%;
    --itbvega-loop-y: 0%;
    --itbvega-loop-scale-x: 1;
    --itbvega-loop-scale-y: 1;
    --itbvega-loop-rotate: 0deg;
    --itbvega-loop-opacity: 1;
    --itbvega-loop-origin: 50% 50%;
    --itbvega-loop-delay: 0ms;
    --itbvega-loop-duration: 6000ms;
    --itbvega-loop-easing: var(--itbvega-ease-in-out-sine);

    position: absolute;
    display: block;
    opacity: var(--itbvega-layer-opacity);
    mix-blend-mode: var(--itbvega-blend-mode);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.itbvega-hero__enter,
.itbvega-hero__picture,
.itbvega-hero__asset {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.itbvega-hero__enter {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1, 1) rotate(var(--itbvega-final-rotate));
    transform-origin: var(--itbvega-intro-origin);
    animation-name: itbvega-hero-intro;
    animation-duration: var(--itbvega-intro-duration);
    animation-timing-function: var(--itbvega-intro-easing);
    animation-delay: var(--itbvega-intro-delay);
    animation-fill-mode: both;
}

.itbvega-hero__picture,
.itbvega-hero__loop {
    transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg);
    transform-origin: var(--itbvega-loop-origin);
}

.itbvega-hero__layer--has-loop .itbvega-hero__loop {
    animation-name: itbvega-hero-loop;
    animation-duration: var(--itbvega-loop-duration);
    animation-timing-function: var(--itbvega-loop-easing);
    animation-delay: var(--itbvega-loop-delay);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}

.itbvega-hero .itbvega-hero__asset {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: fill;
    border: 0;
    vertical-align: top;
}

/* Niebo. */
.itbvega-hero__layer--sky {
    left: -4.947917%;
    top: -33.666667%;
    width: 120.364583%;
    height: 144.888889%;
    --itbvega-intro-duration: 500ms;
}

/* Trzy plany lasu. */
.itbvega-hero__layer--trees-3 {
    left: -0.416667%;
    top: 50.222222%;
    width: 100.729167%;
    height: 39.555556%;
    --itbvega-intro-scale-y: 0;
    --itbvega-intro-opacity: 1;
    --itbvega-intro-origin: center bottom;
    --itbvega-intro-delay: 250ms;
    --itbvega-intro-duration: 1000ms;
    --itbvega-intro-easing: var(--itbvega-ease-out-quint);
    --itbvega-loop-scale-x: 1.03;
    --itbvega-loop-delay: 250ms;
    --itbvega-loop-duration: 6000ms;
}

.itbvega-hero__layer--trees-2 {
    left: -0.729167%;
    top: 58.666667%;
    width: 101.40625%;
    height: 38.444444%;
    --itbvega-intro-scale-y: 0;
    --itbvega-intro-opacity: 1;
    --itbvega-intro-origin: center bottom;
    --itbvega-intro-delay: 100ms;
    --itbvega-intro-duration: 1000ms;
    --itbvega-intro-easing: var(--itbvega-ease-out-quint);
    --itbvega-loop-scale-x: 1.04;
    --itbvega-loop-delay: 100ms;
    --itbvega-loop-duration: 5500ms;
}

.itbvega-hero__layer--trees-1 {
    left: -0.416667%;
    top: 62.777778%;
    width: 100.9375%;
    height: 39.111111%;
    --itbvega-intro-scale-y: 0;
    --itbvega-intro-opacity: 1;
    --itbvega-intro-origin: center bottom;
    --itbvega-intro-duration: 800ms;
    --itbvega-intro-easing: var(--itbvega-ease-out-quint);
    --itbvega-loop-scale-x: 1.05;
    --itbvega-loop-duration: 4450ms;
}

/* Miękkie efekty świetlne. */
.itbvega-hero__layer--swoosh-4 {
    left: -13.854167%;
    top: -16.222222%;
    width: 127.760417%;
    height: 120.111111%;
    --itbvega-layer-opacity: 0.5;
    --itbvega-blend-mode: hard-light;
    --itbvega-intro-y: 46.253469%;
    --itbvega-intro-scale-x: 1.5;
    --itbvega-intro-scale-y: 1.5;
    --itbvega-intro-duration: 4000ms;
    --itbvega-intro-easing: var(--itbvega-ease-out-quint);
    --itbvega-loop-scale-x: 1.05;
    --itbvega-loop-scale-y: 1.05;
    --itbvega-loop-duration: 6000ms;
}

.itbvega-hero__layer--swoosh-2 {
    left: -26.614583%;
    top: -24.777778%;
    width: 88.4375%;
    height: 114.555556%;
    --itbvega-layer-opacity: 0.5;
    --itbvega-blend-mode: hard-light;
    --itbvega-intro-y: -19.398642%;
    --itbvega-intro-scale-x: 1.5;
    --itbvega-intro-scale-y: 1.5;
    --itbvega-intro-duration: 4000ms;
    --itbvega-intro-easing: var(--itbvega-ease-out-quint);
    --itbvega-loop-scale-x: 1.05;
    --itbvega-loop-scale-y: 1.05;
    --itbvega-loop-duration: 6000ms;
}

.itbvega-hero__layer--swoosh-1 {
    left: -1.302083%;
    top: -60.111111%;
    width: 119.375%;
    height: 178.222222%;
    --itbvega-layer-opacity: 0.5;
    --itbvega-blend-mode: hard-light;
    --itbvega-intro-x: -21.815009%;
    --itbvega-intro-scale-x: 1.5;
    --itbvega-intro-scale-y: 1.5;
    --itbvega-intro-duration: 14000ms;
    --itbvega-intro-easing: var(--itbvega-ease-out-quint);
    --itbvega-loop-scale-x: 0.9;
    --itbvega-loop-scale-y: 1.05;
    --itbvega-loop-delay: 14000ms;
    --itbvega-loop-duration: 6000ms;
}

/* Osiem rozmieszczonych zestawów gwiazd. */
.itbvega-hero__layer--stars-1-a {
    left: -11.666667%;
    top: 3.111111%;
    width: 42.34375%;
    height: 23.222222%;
    --itbvega-intro-delay: 1000ms;
    --itbvega-loop-delay: 14000ms;
    --itbvega-loop-duration: 1000ms;
    --itbvega-loop-easing: linear;
    --itbvega-loop-opacity: 0.3;
}

.itbvega-hero__layer--stars-2-a {
    left: 68.90625%;
    top: 8.333333%;
    width: 30.208333%;
    height: 22.666667%;
    --itbvega-intro-delay: 1100ms;
    --itbvega-loop-delay: 14000ms;
    --itbvega-loop-duration: 1600ms;
    --itbvega-loop-easing: linear;
    --itbvega-loop-opacity: 0.3;
}

.itbvega-hero__layer--stars-1-b {
    left: 67.760417%;
    top: -4.555556%;
    width: 44.583333%;
    height: 24.444444%;
    --itbvega-intro-delay: 1200ms;
    --itbvega-loop-delay: 14000ms;
    --itbvega-loop-duration: 1500ms;
    --itbvega-loop-easing: linear;
    --itbvega-loop-opacity: 0.3;
}

.itbvega-hero__layer--stars-2-b {
    left: 0%;
    top: 0%;
    width: 32.604167%;
    height: 24.444444%;
    --itbvega-intro-delay: 1400ms;
    --itbvega-loop-delay: 14000ms;
    --itbvega-loop-duration: 1400ms;
    --itbvega-loop-easing: linear;
    --itbvega-loop-opacity: 0.3;
}

.itbvega-hero__layer--stars-1-c {
    left: 68.177083%;
    top: 8.333333%;
    width: 47.239583%;
    height: 25.888889%;
    --itbvega-intro-delay: 1400ms;
    --itbvega-loop-delay: 14000ms;
    --itbvega-loop-duration: 1300ms;
    --itbvega-loop-easing: linear;
    --itbvega-loop-opacity: 0.3;
}

.itbvega-hero__layer--stars-2-c {
    left: -1.09375%;
    top: 17.555556%;
    width: 33.333333%;
    height: 25%;
    --itbvega-intro-delay: 1500ms;
    --itbvega-loop-delay: 14000ms;
    --itbvega-loop-duration: 1200ms;
    --itbvega-loop-easing: linear;
    --itbvega-loop-opacity: 0.3;
}

.itbvega-hero__layer--stars-1-d {
    left: 67.760417%;
    top: 27.555556%;
    width: 41.354167%;
    height: 22.666667%;
    --itbvega-intro-delay: 1700ms;
    --itbvega-loop-delay: 14000ms;
    --itbvega-loop-duration: 1100ms;
    --itbvega-loop-easing: linear;
    --itbvega-loop-opacity: 0.3;
}

.itbvega-hero__layer--stars-2-d {
    left: 76.5625%;
    top: -2.666667%;
    width: 34.21875%;
    height: 25.666667%;
    --itbvega-intro-delay: 1600ms;
    --itbvega-loop-delay: 14000ms;
    --itbvega-loop-duration: 1550ms;
    --itbvega-loop-easing: linear;
    --itbvega-loop-opacity: 0.3;
}

/* Księżyc, rowerzysta i logo. */
.itbvega-hero__layer--moon {
    left: 32.239583%;
    top: -14.555556%;
    width: 35.520833%;
    height: 78.777778%;
    --itbvega-layer-opacity: 0.8;
    --itbvega-blend-mode: lighten;
    --itbvega-intro-scale-x: 0;
    --itbvega-intro-delay: 300ms;
    --itbvega-intro-duration: 1000ms;
    --itbvega-final-rotate: -5deg;
}

.itbvega-hero__layer--cyclist {
    left: 38.489583%;
    top: 4.444444%;
    width: 23.020833%;
    height: 49.111111%;
    --itbvega-intro-x: -180.995475%;
    --itbvega-intro-scale-x: 0;
    --itbvega-intro-scale-y: 0;
    --itbvega-intro-delay: 150ms;
    --itbvega-intro-duration: 2000ms;
    --itbvega-final-rotate: -4deg;
}

.itbvega-hero__layer--logo {
    left: 8.385417%;
    top: 6.333333%;
    width: 9.010417%;
    height: 20%;
    --itbvega-intro-scale-x: 0;
    --itbvega-intro-delay: 1100ms;
    --itbvega-intro-duration: 1000ms;
}

.itbvega-hero--paused .itbvega-hero__enter,
.itbvega-hero--paused .itbvega-hero__loop {
    animation-play-state: paused !important;
}

@keyframes itbvega-hero-reveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes itbvega-hero-intro {
    from {
        opacity: var(--itbvega-intro-opacity);
        transform:
            translate3d(var(--itbvega-intro-x), var(--itbvega-intro-y), 0)
            scale(var(--itbvega-intro-scale-x), var(--itbvega-intro-scale-y))
            rotate(var(--itbvega-intro-rotate));
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1, 1) rotate(var(--itbvega-final-rotate));
    }
}

@keyframes itbvega-hero-loop {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg);
    }

    to {
        opacity: var(--itbvega-loop-opacity);
        transform:
            translate3d(var(--itbvega-loop-x), var(--itbvega-loop-y), 0)
            scale(var(--itbvega-loop-scale-x), var(--itbvega-loop-scale-y))
            rotate(var(--itbvega-loop-rotate));
    }
}

/*
 * Mobilny kadr zastępczy. Używa dokładnie tych samych warstw, lecz scena jest
 * powiększona i przycięta do pionowego formatu. Po eksporcie Home-Mobile można
 * tu podstawić jego dokładne współrzędne bez zmiany PHP ani plików graficznych.
 */
@media (max-width: 767px) {
    .itbvega-hero {
        height: clamp(430px, 143.589744vw, 640px);
        aspect-ratio: auto;
    }

    .itbvega-hero__stage {
        inset: auto;
        top: 0;
        bottom: 0;
        left: 50%;
        width: auto;
        height: 100%;
        aspect-ratio: 1920 / 900;
        transform: translateX(-50%);
    }

    .itbvega-hero__layer--logo {
        left: 35.2%;
        top: 6.25%;
        width: 9.04%;
        height: 20%;
    }

    .itbvega-hero__layer--stars-1-a,
    .itbvega-hero__layer--stars-2-a,
    .itbvega-hero__layer--stars-1-b,
    .itbvega-hero__layer--stars-2-b,
    .itbvega-hero__layer--stars-1-c,
    .itbvega-hero__layer--stars-2-c,
    .itbvega-hero__layer--stars-1-d,
    .itbvega-hero__layer--stars-2-d {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .itbvega-hero,
    .itbvega-hero__enter,
    .itbvega-hero__loop {
        animation: none !important;
    }
}