/* Shape divider — i2t3 component styles
 * A full-width SVG shape that transitions between two sections. Place it
 * between two bands; set its fill to match the following section's colour.
 * Meant to sit flush (no spacing tab).
 */

.i2t3-shapedivider {
    line-height: 0;
    width: 100%;
}

.i2t3-shapedivider__svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Default fill if no colour picked */
.i2t3-shapedivider__svg path {
    fill: #ffffff;
}

/* Flip vertically (e.g. turn a bottom wave into a top wave).
 * Scoped to the static divider; the animated variant flips at container
 * level (see below) to avoid clashing with the clone/track transforms.
 */
.i2t3-shapedivider:not(.i2t3-shapedivider--animated).i2t3-shapedivider--flip .i2t3-shapedivider__svg {
    transform: scaleY(-1);
}

/* Mirror horizontally */
.i2t3-shapedivider:not(.i2t3-shapedivider--animated).i2t3-shapedivider--mirror .i2t3-shapedivider__svg {
    transform: scaleX(-1);
}

/* Both at once */
.i2t3-shapedivider:not(.i2t3-shapedivider--animated).i2t3-shapedivider--flip.i2t3-shapedivider--mirror .i2t3-shapedivider__svg {
    transform: scale(-1, -1);
}

/* --- Animated moving wave (Karma styles 21 / 22, CSS-only) ---------------
 * Three SVG clones sit side by side inside a track; the middle clone is
 * mirrored on the Y axis so the seam matches. The track is translated by
 * two full widths (-200% / +200%) on an infinite linear loop, giving a
 * seamless horizontal scroll. No JS / .start gate (unlike the original).
 */
.i2t3-shapedivider--animated {
    position: relative;
    height: 80px; /* fallback; overridden by inline --height */
    overflow: hidden;
}

.i2t3-shapedivider--animated .i2t3-shapedivider__track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 300%;
    height: 100%;
    animation-duration: var(--i2t3-sd-speed, 45s);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.i2t3-shapedivider--animated .i2t3-shapedivider__svg {
    flex: 0 0 33.3333%;
    width: 33.3333%;
    height: 100%;
}

/* Middle clone mirrored horizontally so the edges line up seamlessly */
.i2t3-shapedivider--animated .i2t3-shapedivider__svg:nth-child(2) {
    transform: scaleX(-1);
}

/* Scroll left */
.i2t3-shapedivider--anim-left .i2t3-shapedivider__track {
    animation-name: i2t3-shapedivider-to-left;
}

/* Scroll right */
.i2t3-shapedivider--anim-right .i2t3-shapedivider__track {
    animation-name: i2t3-shapedivider-to-right;
}

@keyframes i2t3-shapedivider-to-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-66.6666%, 0, 0); }
}

@keyframes i2t3-shapedivider-to-right {
    from { transform: translate3d(-66.6666%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* Flip vertically also applies to the animated divider. Applied on the
 * container (not the track) so it does not clash with the track animation,
 * which drives `transform` on the track itself.
 */
.i2t3-shapedivider--animated.i2t3-shapedivider--flip {
    transform: scaleY(-1);
}

/* Mirror horizontally on the animated divider, container-level for the same reason */
.i2t3-shapedivider--animated.i2t3-shapedivider--mirror {
    transform: scaleX(-1);
}

.i2t3-shapedivider--animated.i2t3-shapedivider--flip.i2t3-shapedivider--mirror {
    transform: scale(-1, -1);
}

/* Respect reduced-motion: stop the loop but keep the wave visible */
@media (prefers-reduced-motion: reduce) {
    .i2t3-shapedivider--animated .i2t3-shapedivider__track {
        animation: none;
    }
}