/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;800&display=swap');

/* === CUSTOM ANIMATIONS === */
@keyframes noise {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}

/* === EFFECTS === */
.grain-overlay::before {
    content: "";
    position: fixed;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.05;
    pointer-events: none;
    z-index: 9999;
    animation: noise 8s steps(10) infinite;
}

.skew-bg {
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}

.text-stroke {
    -webkit-text-stroke: 1px rgba(255,255,255,0.2);
    color: transparent;
}

/* === MODULE STYLES === */

/* module: home */
.hero-gradient {
    background: linear-gradient(to bottom, rgba(17,17,17,0.2), rgba(17,17,17,1)), url('/static/img/hero.jpg');
    background-size: cover;
    background-position: center;
}

/* module: dashboard */
.progress-bar-glow {
    box-shadow: 0 0 15px rgba(204, 255, 0, 0.4);
}