/* === FONTS === */
/* Imported in base.html */

/* === CUSTOM ANIMATIONS === */
@keyframes scrollDown {
    0% { transform: translateY(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(10px); opacity: 0; }
}

.animate-scroll {
    animation: scrollDown 2s infinite;
}

/* === EFFECTS === */
.noise-bg {
    position: relative;
}

.noise-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.05"/></svg>');
    pointer-events: none;
    z-index: 1;
}

.gradient-mesh {
    background-color: #0a0a0a;
    background-image: 
        radial-gradient(at 0% 0%, hsla(0,0%,20%,0.15) 0px, transparent 50%),
        radial-gradient(at 50% 0%, hsla(0,0%,15%,0.1) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(0,0%,20%,0.15) 0px, transparent 50%);
}

/* Image reveal effect */
.reveal-img-container {
    position: relative;
    overflow: hidden;
}

.reveal-img-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #121212;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    transform: translateX(0);
}

.reveal-img-container.active::after {
    transform: translateX(101%);
}

/* === MODULE STYLES === */
/* module: home */
.hero-text-outline {
    -webkit-text-stroke: 1px rgba(255,255,255,0.2);
    color: transparent;
}