/* E-commerce Styles */
.ecommerce-body {
    background-color: transparent;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 1s ease-in-out;
}
.border-subtle {
    border-bottom: 1px solid #E0E0E0;
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Cinematic Styles */
.grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.ambient-glow {
    position: absolute;
    width: 150vw;
    height: 150vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, rgba(255, 86, 43, 0.4) 0%, rgba(31, 15, 15, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/* Hide Scrollbars globally */
html, body {
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color: #180101; /* Default background based on 11.png */
    background-image: url('../images/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: background-color 1s ease-in-out;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}

/* Hide default browser cursor globally */
html, body, a, button, select, input, [onclick], .cursor-pointer {
    cursor: none !important;
}

@keyframes reddishGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-red-gradient {
    background: linear-gradient(-45deg, #070000, #1b0606, #2d0a0a, #0e0202);
    background-size: 300% 300%;
    animation: reddishGradient 15s ease infinite;
}