/* Custom site CSS */
:root {
    --primary: #F26A21;
    --accent-blue: #3B82F6;
    --site-card-radius: 1rem;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Plus Jakarta Sans', sans-serif
}

.hero-gradient {
    background: radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.15) 0%, rgba(11, 17, 33, 0) 70%)
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #FFFFFF, #CBD5E1)
}

.floating-soft {
    animation: floatY 10s ease-in-out infinite
}

.glow-border {
    position: relative
}

.glow-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(circle at 20% 20%, rgba(242, 106, 33, 0.25), transparent 45%), radial-gradient(circle at 80% 30%, rgba(59, 130, 246, 0.15), transparent 45%);
    filter: blur(12px);
    opacity: .6;
    z-index: 0;
    transition: opacity .5s ease
}

.glow-border:hover::before {
    opacity: 1
}

.reveal {
    opacity: 0;
    transform: translateY(26px) scale(.99);
    transition: opacity .8s ease, transform .8s ease
}

.reveal.show {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.reveal-stagger>* {
    opacity: 0;
    transform: translateY(18px) scale(.995);
    transition: opacity .6s ease, transform .6s ease
}

.reveal-stagger>*.show {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.cta-pulse {
    position: relative;
    overflow: hidden
}

.cta-pulse::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(242, 106, 33, 0.3) 0%, rgba(242, 106, 33, 0) 55%);
    animation: pulseGlow 2.6s ease-in-out infinite;
    opacity: 0;
    border-radius: inherit
}

.cta-pulse:hover::after {
    opacity: .7
}

@keyframes floatY {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes pulseGlow {
    0% {
        transform: scale(.7);
        opacity: .2
    }

    50% {
        transform: scale(1);
        opacity: .6
    }

    100% {
        transform: scale(1.2);
        opacity: 0
    }
}

.nav-link-active {
    position: relative
}

.nav-link-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent-blue));
    border-radius: 999px;
    transform-origin: left center;
    transform: scaleX(1)
}

.ripple {
    position: relative;
    overflow: hidden
}

.ripple .ripple-effect {
    position: absolute;
    border-radius: 999px;
    transform: scale(0);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.35);
    animation: rippleAnim .7s ease-out
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0
    }
}

.tilt {
    perspective: 1000px
}

.tilt-inner {
    transition: transform .4s ease;
    will-change: transform
}

.tilt-inner,
.tilt-inner img,
.glow-border,
.cta-pulse,
.ripple {
    border-radius: inherit
}

.tilt-inner,
.glow-border,
.cta-pulse,
.ripple {
    overflow: hidden
}

.tilt {
    overflow: hidden;
    --card-radius: 1rem;
    border-radius: var(--card-radius)
}

.tilt * {
    border-radius: inherit
}

.tilt *::before,
.tilt *::after {
    border-radius: inherit
}

.tilt img {
    display: block;
    -webkit-clip-path: inset(0 round var(--card-radius));
    clip-path: inset(0 round var(--card-radius));
}

.tilt .absolute,
.tilt>.absolute {
    -webkit-clip-path: inset(0 round var(--card-radius));
    clip-path: inset(0 round var(--card-radius));
}

.parallax {
    will-change: transform;
    transform: translateZ(0)
}

/* Prefer reduced motion */
@media (prefers-reduced-motion:reduce) {

    .floating-soft,
    .reveal,
    .cta-pulse::after,
    .ripple .ripple-effect {
        animation: none !important;
        transition: none !important
    }
}