/* Particles background — i2t3 component styles
 * An animated canvas (connected/dots/bubbles/snow/stars) or a CSS-only parallax
 * decoration behind optional content. The canvas/deco colour follows the
 * text-* class (theme-aware); canvas animation by the own canvas script.
 * Min-height comes from the i2t3_particles_min_height field (inline style).
 */

.i2t3-particles {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.i2t3-particles__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.i2t3-particles__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 2rem;
}
.i2t3-particles__title { margin-bottom: .75rem; }
.i2t3-particles__text > :last-child { margin-bottom: 0; }

/* --- Parallax decoration (CSS-only port of Karma's static deco look) --- */
.i2t3-particles__deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    color: var(--i2t3-particles-accent, #0d6efd);
    pointer-events: none;
}
.i2t3-particles__deco > span { position: absolute; }

/* Free-floating circles, slowly drifting up/down. */
.i2t3-particles__orb {
    border-radius: 50%;
    animation: i2t3-particles-float var(--i2t3-float-speed, 8s) ease-in-out infinite;
}
.i2t3-particles__orb--accent { background: var(--i2t3-particles-accent, #0d6efd); }
.i2t3-particles__orb--muted  { background: rgba(var(--i2t3-particles-accent-rgb, 13,110,253), .25); }

/* Larger dotted block (Karma particle-dots), rebuilt as a radial-dot pattern. */
.i2t3-particles__dot--lg {
    width: 162px;
    height: 162px;
    background-image: radial-gradient(currentColor 2px, transparent 2.5px);
    background-size: 18px 18px;
    opacity: .55;
}

/* Diagonal repeating lines (Karma particle-repeating-lines). */
.i2t3-particles__lines {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: repeating-linear-gradient(-55deg,
        transparent 0.8px,
        var(--i2t3-particles-accent, #0d6efd) 1.6px,
        var(--i2t3-particles-accent, #0d6efd) 3px,
        transparent 3.8px,
        transparent 10px);
    opacity: .6;
}

@keyframes i2t3-particles-float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-18px); }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .i2t3-particles__orb { animation: none; }
}