/**
 * Base Styles — Reset, Variables, Typography
 *
 * @package Smokeboxx
 */

/* Smokeboxx Design Variables */
:root {
    --sb-orange: #E94E1B;
    --sb-orange-dark: #C7411A;
    --sb-black: #000000;
    --sb-dark: #0A0A0A;
    --sb-dark-gray: #141414;
    --sb-surface: #1A1A1A;
    --sb-white: #FFFFFF;
    --sb-gray: #888888;
    --sb-light-gray: #333333;
    --sb-success: #22C55E;
    --sb-error: #EF4444;
    --sb-warning: #F59E0B;
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--sb-black);
    color: var(--sb-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: clip;
    max-width: 100vw;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
}

/* Scroll Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.animate-fade.visible {
    opacity: 1;
}

.animate-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scale.visible {
    opacity: 1;
    transform: scale(1);
}

.animate-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.animate-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}