/* Unify background across the entire document to slate-50 (#f8fafc) */
body { background-color: #f8fafc; overflow-x: hidden; }

.text-brand-gradient {
    background: linear-gradient(135deg, #0EA5E9 0%, #0D9488 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-brand-gradient {
    background: linear-gradient(135deg, #031E29 0%, #0A3A50 100%);
}

/* Shine effect for buttons */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg); animation: shine 3.5s infinite;
}
@keyframes shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

/* 3D Social Media Icon Cards Styling */
.social-3d-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 0.3s ease;
}

/* Float & Wobble Keyframes for organic overlay movement */
@keyframes float-wa {
    0%, 100% { transform: translateY(0px) rotate(-5deg) scale(1); }
    50% { transform: translateY(-12px) rotate(-2deg) scale(1.03); }
}
@keyframes float-ig {
    0%, 100% { transform: translateY(0px) rotate(8deg) scale(1); }
    50% { transform: translateY(-15px) rotate(12deg) scale(1.05); }
}
@keyframes float-yt {
    0%, 100% { transform: translateY(0px) rotate(-8deg) scale(1); }
    50% { transform: translateY(-10px) rotate(-12deg) scale(1.02); }
}
@keyframes float-fb {
    0%, 100% { transform: translateY(0px) rotate(6deg) scale(1); }
    50% { transform: translateY(-18px) rotate(2deg) scale(1.04); }
}
@keyframes float-x {
    0%, 100% { transform: translateY(0px) rotate(-10deg) scale(1); }
    50% { transform: translateY(-14px) rotate(-6deg) scale(1.03); }
}
@keyframes float-ln {
    0%, 100% { transform: translateY(0px) rotate(12deg) scale(1); }
    50% { transform: translateY(-11px) rotate(6deg) scale(1.05); }
}

/* Animation Classes */
.anim-float-wa { animation: float-wa 5s ease-in-out infinite; }
.anim-float-ig { animation: float-ig 6s ease-in-out infinite 0.5s; }
.anim-float-yt { animation: float-yt 5.5s ease-in-out infinite 1s; }
.anim-float-fb { animation: float-fb 6.5s ease-in-out infinite 0.2s; }
.anim-float-x { animation: float-x 5.2s ease-in-out infinite 1.2s; }
.anim-float-ln { animation: float-ln 5.8s ease-in-out infinite 0.8s; }

@keyframes pulse-shadow {
    0%, 100% { transform: scale(0.95); opacity: 0.15; }
    50% { transform: scale(1.05); opacity: 0.25; }
}
.runner-shadow-pulse {
    animation: pulse-shadow 4s ease-in-out infinite;
}

/* Premium linear fade masking to blend bottom edge of runner smoothly */
.fade-bottom-mask {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 95%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 95%);
}

/* Continuous scrolling marquee animation keyframes */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.animate-scroll-left {
    animation: scroll-left 30s linear infinite;
}
.animate-scroll-right {
    animation: scroll-right 30s linear infinite;
}
.marquee-container:hover .animate-scroll-left,
.marquee-container:hover .animate-scroll-right {
    animation-play-state: paused;
}

/* Slow, float animation for holographic elements */
@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
}

/* Custom sequential beam travel stroke animation */
@keyframes beam-travel {
    0% { stroke-dashoffset: 150; }
    50%, 100% { stroke-dashoffset: 0; }
}
.animate-beam {
    animation: beam-travel 5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

/* Hide scrollbars cleanly across multiple engines */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}