:root {
    --texture-color: rgba(37, 59, 80, 0.05);
}

.texture-noise {
    background-image:
        radial-gradient(var(--texture-color) 1px, transparent 1px),
        radial-gradient(var(--texture-color) 1px, transparent 1px);
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;
}

.texture-grid {
    background-image:
        linear-gradient(transparent 0, transparent 23px, rgba(0,0,0,0.04) 24px),
        linear-gradient(90deg, transparent 0, transparent 23px, rgba(0,0,0,0.04) 24px);
    background-size: 24px 24px;
}

.texture-diagonal {
    background-image:
        linear-gradient(135deg, rgba(96,165,250,0.07) 0%, rgba(96,165,250,0.0) 35%),
        linear-gradient(315deg, rgba(34,211,238,0.06) 0%, rgba(34,211,238,0.0) 40%);
}

[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

[data-animate].in-view {
    opacity: 1;
    transform: none;
}

[data-animate="slide-right"] {
    transform: translateX(-24px);
}

[data-animate="slide-left"] {
    transform: translateX(24px);
}

[data-animate="zoom-in"] {
    transform: scale(0.95);
}

[data-animate="zoom-in"].in-view {
    transform: scale(1);
}