/* =========================================================
   FONTS
========================================================= */

@font-face {
    font-family: Dosis;
    src: url("./fontit/Dosis-Bold.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: Open-Sans;
    src: url("./fontit/OpenSans_Condensed-Regular.ttf") format("truetype");
    font-display: swap;
}


/* =========================================================
   GLOBAL TYPOGRAPHY
========================================================= */

html {
    font-family: Open-Sans, Arial, sans-serif;
}

body,
button,
input,
textarea,
select {
    font-family: Open-Sans, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Dosis, Arial, sans-serif;
}


/* =========================================================
   LOADING SCREEN
========================================================= */

.loader {
    position: relative;
    width: 90px;
    height: 90px;
}

.loader::before {
    content: "";
    box-sizing: border-box;

    position: absolute;
    inset: 0;

    width: 90px;
    height: 90px;

    border-radius: 50%;
    border-top: 3px solid #71C949;
    border-right: 3px solid transparent;

    animation: spinner8217 0.8s linear infinite;
}

@keyframes spinner8217 {
    to {
        transform: rotate(360deg);
    }
}

#loading-screen {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}


/* =========================================================
   ETUSIVU
========================================================= */

.Palvelut {
    position: relative;
    overflow: hidden;
}

.Palvelut::before {
    content: "";

    position: absolute;
    top: 38%;
    left: 50%;

    transform: translateX(-10%);

    width: calc(100vw - (100% - 1700px) / 2);
    height: 40%;

    background-color: #94B0ED;

    z-index: -1;

    border-radius: 12px 0 0 12px;
}

.mainbanner {
    background:
        linear-gradient(
            to right,
            #181F42 20%,
            #355BAD 70%,
            #B9D0FF 100%
        );

    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 14px 16px -1px rgba(0, 0, 0, 0.50);
}

/*
 * Hero image movement is controlled with JS.
 * Avoid CSS transition here because it can make the
 * parallax movement feel delayed or floaty.
 */
#landingimg {
    will-change: transform;
}

@media (max-width: 768px) {

    .Palvelut::before {
        top: 24%;
        height: 70%;
    }

    .mainbanner {
        background:
            linear-gradient(
                to bottom,
                #181F42 20%,
                #355BAD 70%,
                #B9D0FF 100%
            );
    }

}


/* =========================================================
   MEISTÄ
========================================================= */

.truncate-lines {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;

    max-height: 5.9em;
}

#instagram-feed {
    align-items: flex-start;
}


/* =========================================================
   PALVELUT
========================================================= */

@keyframes rotateImg {
    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }
}

.rotate-banner {
    animation: rotateImg 18s linear infinite;

    transform-origin: 50% 50%;
    will-change: rotate;
}


.service-accordion {
    position: relative;
    overflow: hidden;

    transition:
        border-color 250ms ease,
        box-shadow 250ms ease;
}

.service-accordion::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.6;

    background:
        radial-gradient(
            220px 220px at 0 0,
            rgba(255, 255, 255, 0.16),
            transparent 60%
        ),
        radial-gradient(
            260px 260px at 100% 100%,
            rgba(113, 201, 73, 0.22),
            transparent 60%
        );
}

.service-accordion::after {
    content: "";
    position: absolute;
    top: 0;
    left: 1rem;
    right: 1rem;
    height: 1px;
    pointer-events: none;
    opacity: 0.4;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent
        );
}

.service-accordion:hover {
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.9);
}

.service-accordion[open] {
    border-color: #71C949;

    box-shadow:
        0 0 0 1px #71C949,
        0 22px 60px rgba(0, 0, 0, 0.9);
}


/* Summary */

.service-accordion-summary {
    position: relative;
    z-index: 1;
}

.service-accordion-summary::-webkit-details-marker {
    display: none;
}

.service-accordion-summary::marker {
    content: "";
}


/* Arrow */

.service-accordion-arrow {
    transition:
        transform 250ms cubic-bezier(.22, 1, .36, 1),
        background-color 250ms ease;
}

.service-accordion[open] .service-accordion-arrow {
    transform: rotate(180deg);
    background-color: rgba(255, 255, 255, 0.1);
}


/* Content */

.service-accordion-content {
    position: relative;
    z-index: 1;

    animation: serviceAccordionIn 300ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes serviceAccordionIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =========================================================
   SCROLL REVEALS

   Used by the newer data-reveal animation system.
   Elements animate only once and stay visible afterwards.
========================================================= */

.js [data-reveal]:not(.ref-item) {
    --reveal-duration: 680ms;
    --reveal-delay: 0ms;

    opacity: 0;

    translate: 0 0;
    scale: 1;

    transition:
        opacity
            var(--reveal-duration)
            cubic-bezier(.22, 1, .36, 1)
            var(--reveal-delay),

        translate
            var(--reveal-duration)
            cubic-bezier(.22, 1, .36, 1)
            var(--reveal-delay),

        scale
            var(--reveal-duration)
            cubic-bezier(.22, 1, .36, 1)
            var(--reveal-delay);

    will-change:
        opacity,
        translate,
        scale;

    backface-visibility: hidden;
}


/* Main content reveal */

.js [data-reveal="fade-up"]:not(.ref-item) {
    translate: 0 24px;
}


/* Used mainly by hero visuals */

.js [data-reveal="fade-left"]:not(.ref-item) {
    translate: 30px 0;
}


/* Compact proof cards */

.js [data-reveal="zoom-in"]:not(.ref-item) {
    translate: 0 12px;
    scale: 0.97;
}


/* Final state */

.js [data-reveal].is-revealed:not(.ref-item) {
    opacity: 1;

    translate: 0 0;
    scale: 1;

    will-change: auto;
}


/* =========================================================
   MOBILE REVEAL ADJUSTMENTS
========================================================= */

@media (max-width: 767px) {

    .js [data-reveal="fade-up"]:not(.ref-item) {
        translate: 0 14px;
    }

    .js [data-reveal="fade-left"]:not(.ref-item) {
        translate: 14px 0;
    }

    .js [data-reveal="zoom-in"]:not(.ref-item) {
        translate: 0 9px;
        scale: 0.985;
    }

}


/* =========================================================
   COOKIE CONSENT
========================================================= */

.cookie-consent {
    /*
     * Intentionally extremely high so the cookie notice
     * remains above chat widgets and other floating UI.
     */
    z-index: 2147483647 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate3d(
        0,
        100%,
        0
    );

    transition:
        transform
            420ms
            cubic-bezier(.22, 1, .36, 1),

        opacity
            280ms
            ease,

        visibility
            0s
            linear
            420ms;

    will-change:
        transform,
        opacity;

    backface-visibility: hidden;
}

.cookie-consent.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate3d(
        0,
        0,
        0
    );

    transition:
        transform
            420ms
            cubic-bezier(.22, 1, .36, 1),

        opacity
            280ms
            ease,

        visibility
            0s;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    /*
     * New data-reveal elements
     */
    .js [data-reveal]:not(.ref-item) {
        opacity: 1 !important;

        translate: none !important;
        scale: 1 !important;

        transition: none !important;

        will-change: auto !important;
    }
    
    .service-accordion-content {
    animation: none !important;
}

.service-accordion-arrow {
    transition: none !important;
}


    /*
     * Cookie banner
     */
    .cookie-consent {
        transform: none;
        transition: none;
    }

    .cookie-consent.is-visible {
        transform: none;
    }


    /*
     * Rotating decorative images
     */
    .rotate-banner {
        animation: none;
    }

}