@charset "UTF-8";

/* =========================================
   BASE & TYPOGRAPHY
   ========================================= */
body {
    background-color: #FFFFFF;
    color: #111111;
    /* Updated to #111111 */
    font-feature-settings: "palt";
    line-height: 1.8;
    letter-spacing: 0.04em;
}

/* =========================================
   ANIMATION SYSTEM (REVEAL BLUR)
   ========================================= */
.reveal-blur {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px);
    transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1),
        transform 1s cubic-bezier(0.19, 1, 0.22, 1),
        filter 1s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform, filter;
}

.reveal-blur.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* =========================================
   STAGGER DELAYS
   ========================================= */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

.delay-500 {
    transition-delay: 500ms;
}

/* =========================================
   UTILITIES
   ========================================= */
/* Text Strokes */
.text-stroke {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);
    color: transparent;
}

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

/* Grids */
.grid-bg {
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

/* Hover Effects */
.hover-glow:hover {
    box-shadow: 0 0 20px rgba(225, 29, 72, 0.4);
}

/* Marquee Mask */
.marquee-mask {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Text Marker */
.text-marker {
    background: linear-gradient(transparent 60%, rgba(253, 243, 0, 0.8) 60%);
    display: inline;
    padding: 0 4px;
}

/* =========================================
   CUSTOM EASING & ANIMATION UTILS
   ========================================= */
.ease-expo {
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.gsap-reveal {
    opacity: 0;
    visibility: hidden;
}

/* =========================================
   MOBILE MENU & NAV UTILS
   ========================================= */
#mobile-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.nav-cta {
    background-color: currentColor;
}

.text-brand-dark .nav-cta {
    color: #fff;
    background-color: #111;
}

.text-white .nav-cta {
    color: #111;
    background-color: #fff;
}