/**
 * Pallot: KTN's decorative lime and blue circles (from the logo) laid over a
 * card. The SVG lives in assets/pallot.svg (brand colors stay in the file,
 * not in CSS) and is injected on the front end by includes/blocks/pallot.php,
 * so the editor never shows raw SVG; in the editor the same file is shown as
 * a background image.
 *
 * globalClass: pallot   on an empty GB container inside a card
 *
 * Variants (position; the parent gets position: relative automatically):
 *   pallot--ylaoikea    top right, bleeding out of the card (hero)
 *   pallot--alaoikea    bottom right, spilling below the card (contact card;
 *                       the card must not clip overflow)
 *   pallot--alavasen    bottom left, spilling out of an image card (service
 *                       pages, KTN 2026-10-12); below 768px it stays inside
 *                       the image, because the stacked text column starts
 *                       right under it (KTN 2026-10-18)
 *   pallot--kulma       top right, small and tight to the corner, so it does
 *                       not reach the header above a hero (service page heroes,
 *                       KTN 2026-10-14)
 *
 * Structure:
 *   card.gb-container (position relative, overflow as wanted)
 *     .pallot.pallot--ylaoikea.gb-container.observe-visibility   (empty; svg added by PHP)
 *     … siblings after the pallot stack above it
 *   In accordion-cards (the KTN hero) the pallot sits in the open card and
 *   fades out when the card closes; see the accordion rules at the end.
 *
 * Animation: with the observe-visibility class the circles scale in one after
 * another when the card enters the viewport (is-visible), then drift slowly
 * on different rhythms; off with prefers-reduced-motion. Without JS the
 * circles are simply visible.
 *
 * Tuning: --pallot-opacity (0.9), --pallot-drift (12px)
 */

:root {
    --pallot-opacity: 0.9;
    --pallot-drift: 12px;
}

.gb-container:has(> .pallot) {
    position: relative;
}

.pallot {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    line-height: 0;
    opacity: var(--pallot-opacity);
}

/* Whatever follows the pallot in the card (content, form) stays above it */
.pallot ~ * {
    position: relative;
    z-index: 2;
}

/* The block after a card with a spilling pallot (the text column after an
   image, stacked on mobile) also stays above the circles */
.gb-container:has(> .pallot) + .gb-container {
    position: relative;
    z-index: 2;
}

.pallot svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Editor preview: GB renders the empty container with its own min-height
   and position; show the file as a background in the right spot instead. */
.pallot.block-editor-block-list__layout {
    position: absolute;
    min-height: 0;
    aspect-ratio: 1000 / 800;
    background: url(../../assets/pallot.svg) center / contain no-repeat;
}

.pallot--ylaoikea {
    top: -6%;
    right: -14%;
    width: 46%;
    opacity: 0.8;
}

.pallot--alaoikea {
    right: -10%;
    bottom: -32%;
    width: 64%;
    transform: rotate(12deg);
}

.pallot--alavasen {
    left: -4%;
    bottom: 0;
    width: 28%;
    transform: rotate(-24deg);
}

.pallot--kulma {
    top: -3%;
    right: -6%;
    width: 32%;
}

/* A pallot that spills outside its card must not widen the page: the section
   clips sideways only (clip keeps the vertical spill visible, and the
   absolutely positioned circles paint over the next, unpositioned section).
   The contact card's spill goes over the footer, which is transparent and
   sits one level higher (footer.css), so that section gets a stacking level. */
.color-section:has(.pallot) {
    overflow-x: clip;
}

.color-section:has(.pallot--alaoikea) {
    position: relative;
    z-index: 2;
}

/* Animation: scale in, then drift. Each circle has its own rhythm. */
.pallot .pallo {
    transform-box: fill-box;
    transform-origin: center;
}

.js .pallot.observe-visibility .pallo {
    opacity: 0;
    transform: scale(0.4);
}

.js .pallot.observe-visibility.is-visible .pallo {
    animation: pallo-in 0.7s var(--transition-timing-function) forwards,
               pallo-drift var(--pallo-drift-duration, 10s) ease-in-out var(--pallo-delay, 0s) infinite alternate;
}

.pallot .pallo-1 { --pallo-delay: 0s;    --pallo-drift-duration: 11s; }
.pallot .pallo-2 { --pallo-delay: 0.1s;  --pallo-drift-duration: 9s; }
.pallot .pallo-3 { --pallo-delay: 0.2s;  --pallo-drift-duration: 13s; }
.pallot .pallo-4 { --pallo-delay: 0.3s;  --pallo-drift-duration: 8s; }
.pallot .pallo-5 { --pallo-delay: 0.4s;  --pallo-drift-duration: 12s; }
.pallot .pallo-6 { --pallo-delay: 0.5s;  --pallo-drift-duration: 10s; }
.pallot .pallo-7 { --pallo-delay: 0.6s;  --pallo-drift-duration: 9s; }
.pallot .pallo-8 { --pallo-delay: 0.7s;  --pallo-drift-duration: 14s; }

.js .pallot.observe-visibility.is-visible .pallo {
    animation-delay: var(--pallo-delay), calc(var(--pallo-delay) + 0.7s);
}

@keyframes pallo-in {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pallo-drift {
    from { translate: 0 0; }
    to   { translate: calc(var(--pallot-drift) * -1) var(--pallot-drift); }
}

/* Inside accordion-cards: the decoration belongs to the open card only */
.accordion-card .pallot {
    transition: opacity var(--accordion-duration, 0.6s) var(--transition-timing-function);
}

.accordion-card:not(.is-active) .pallot {
    opacity: 0;
}

@media only screen and (min-width: 768px) {
    .pallot--ylaoikea {
        top: -18%;
        right: -14%;
        width: 50%;
        opacity: var(--pallot-opacity);
    }

    .pallot--alavasen {
        left: -6%;
        bottom: -12%;
        width: 30%;
    }
}

@media only screen and (min-width: 990px) {
    .pallot--alaoikea {
        right: -6%;
        bottom: -40%;
        width: 46%;
    }

    .pallot--alavasen {
        left: -8%;
        bottom: -22%;
        width: 34%;
    }

    .pallot--kulma {
        top: -4%;
        right: -4%;
        width: 24%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accordion-card .pallot {
        transition: none;
    }

    .js .pallot.observe-visibility .pallo,
    .js .pallot.observe-visibility.is-visible .pallo {
        opacity: 1;
        transform: none;
        animation: none;
    }
}