/* ── Hero Gradient ── */
.hero-gradient {
    background:
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(163, 51, 29, 0.45) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(212, 154, 66, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(196, 65, 34, 0.25) 0%, transparent 65%),
        linear-gradient(160deg, #1a1208 0%, #2d1a0e 30%, #1e1510 60%, #111110 100%);
}

/* ── CTA Gradient ── */
.cta-gradient {
    background:
        radial-gradient(ellipse 70% 50% at 30% 50%, rgba(212, 154, 66, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 70% 50%, rgba(163, 51, 29, 0.3) 0%, transparent 55%),
        linear-gradient(135deg, #2d1a0e 0%, #1e1510 50%, #111110 100%);
}

/* ── Scroll Reveal ── */
.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal[data-reveal-delay="1"] { transition-delay: 0.1s; }
.reveal[data-reveal-delay="2"] { transition-delay: 0.2s; }
.reveal[data-reveal-delay="3"] { transition-delay: 0.3s; }
.reveal[data-reveal-delay="4"] { transition-delay: 0.4s; }

@media (prefers-reduced-motion: no-preference) {
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal:not(.revealed) {
    opacity: 0;
    transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
    .reveal:not(.revealed) {
        opacity: 1;
        transform: none;
    }
    .reveal {
        transition: none;
    }
}

/* ── Navbar Scroll State ── */
nav.scrolled {
    background: rgba(17, 17, 16, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(212, 154, 66, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* ── Smooth Scroll Offset ── */
section[id] {
    scroll-margin-top: 80px;
}

/* ── Selection Color ── */
::selection {
    background: rgba(212, 154, 66, 0.3);
    color: #f9f0e1;
}

/* ── Image Hover Glow ── */
.group:hover img {
    filter: brightness(1.05);
}

/* ── Button Focus ── */
a:focus-visible, button:focus-visible {
    outline: 2px solid rgba(212, 154, 66, 0.6);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #111110;
}
::-webkit-scrollbar-thumb {
    background: #3d3d3a;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #52524f;
}