/* Redot Engine Website - Global Styles */

/* ===== Base ===== */
html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Ensure MudBlazor containers respect viewport width */
.mud-container {
    max-width: 100vw !important;
}

.every-embedded-button-0 {
    border-radius: 8px!important;
}

.every-embedded-button-g
{
     padding: 8px 10px !important;
}

[class*="every-embedded-5"]
{
    background: #05050a!important;
}


/* ===== Announcement Banner ===== */
.announcement-banner {
    background: linear-gradient(90deg, #ff6b6b, #ff8e53);
    padding: 10px 24px;
    text-align: center;
    z-index: 1100;
    position: relative;
}

.announcement-banner a {
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.announcement-banner a:hover {
    text-decoration: underline !important;
}

.announcement-banner .highlight {
    font-weight: 700;
}

/* ===== Hero Section ===== */
.hero-bg {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
}

/* ===== Download Hero ===== */
.download-hero {
    background: url('https://image.redotengine.org/background.png') center/cover no-repeat;
    border-radius: 12px;
    margin: 0 20px;
    position: relative;
}

@media (min-width: 1024px) {
    .download-hero {
        margin: 0 160px;
    }
}



/* ===== Platform Card Hover ===== */
.platform-card {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.platform-card:hover {
    transform: translateY(-4px);
    border-color: rgba(242, 140, 56, 0.3) !important;
}

/* ===== Section Backgrounds ===== */
.section-dark {
    background-color: #0e0e0e;
}

.section-gradient {
    background: linear-gradient(180deg, #0e0e0e 0%, #0a0a0a 100%);
}

/* ===== Footer ===== */
.site-footer {
    background-color: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer a {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: #F28C38 !important;
}

/* ===== Feature Card Hover ===== */
.feature-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(242, 140, 56, 0.12) !important;
    border-color: rgba(242, 140, 56, 0.3) !important;
}

/* ===== Mobile Navigation ===== */
/* Default: Desktop visible, mobile hidden */
.desktop-nav {
    display: flex;
}

.mobile-menu-btn {
    display: none;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    /* Reduce container padding on mobile */
    .mud-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Smaller hero text on mobile */
    .hero-bg h1, .section-dark h1, .section-dark h2 {
        font-size: 1.75rem;
    }
    
    /* Ensure buttons are touch-friendly */
    .mud-button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Footer links touch targets */
    .site-footer a {
        display: inline-block;
        padding: 8px 0;
        min-height: 44px;
    }
    
    /* Mobile nav drawer improvements */
    .mud-drawer {
        width: 280px;
    }
    
    .mud-nav-link {
        min-height: 48px;
        padding: 12px 16px;
    }
    
    /* Mobile: Hide desktop nav, show mobile button */
    .desktop-nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
}

/* ===== Marquee ===== */
.marquee-container {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-track {
    display: flex;
    gap: 24px;
    white-space: nowrap;
    animation: marquee-scroll 25s linear infinite;
    width: max-content;
}

.marquee-reverse .marquee-track {
    animation-direction: reverse;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    flex-shrink: 0;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===== Feature Highlight Icons ===== */
.feature-highlight-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: #7c1d1d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.features-highlight-grid {
    padding: 64px 0;
    position: relative;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ===== Blazor Error Boundary ===== */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ===== Light Rays Effect ===== */
.light-rays {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.light-rays::before,
.light-rays::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(242, 140, 56, 0.03) 20deg,
        transparent 40deg,
        rgba(242, 140, 56, 0.02) 60deg,
        transparent 80deg,
        rgba(224, 123, 57, 0.02) 100deg,
        transparent 120deg,
        rgba(242, 140, 56, 0.03) 140deg,
        transparent 160deg,
        rgba(224, 123, 57, 0.02) 180deg,
        transparent 200deg
    );
    animation: light-rays-rotate 30s linear infinite;
}

.light-rays::before {
    top: -50%;
    left: -50%;
    transform-origin: center;
}

.light-rays::after {
    top: -50%;
    right: -50%;
    transform-origin: center;
    animation-direction: reverse;
    animation-duration: 25s;
}

@keyframes light-rays-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Particle Network Effect ===== */
.particle-network {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(242, 140, 56, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(242, 140, 56, 0.4);
}

.particle-1 { top: 20%; left: 10%; animation: particle-float-1 15s ease-in-out infinite; }
.particle-2 { top: 60%; left: 25%; animation: particle-float-2 18s ease-in-out infinite; animation-delay: -3s; }
.particle-3 { top: 30%; left: 40%; animation: particle-float-3 20s ease-in-out infinite; animation-delay: -6s; }
.particle-4 { top: 70%; left: 55%; animation: particle-float-4 16s ease-in-out infinite; animation-delay: -9s; }
.particle-5 { top: 40%; left: 70%; animation: particle-float-5 19s ease-in-out infinite; animation-delay: -12s; }
.particle-6 { top: 80%; left: 85%; animation: particle-float-6 17s ease-in-out infinite; animation-delay: -15s; }
.particle-7 { top: 15%; left: 60%; animation: particle-float-1 21s ease-in-out infinite; animation-delay: -2s; }
.particle-8 { top: 50%; left: 80%; animation: particle-float-2 14s ease-in-out infinite; animation-delay: -8s; }
.particle-9 { top: 85%; left: 20%; animation: particle-float-3 22s ease-in-out infinite; animation-delay: -11s; }
.particle-10 { top: 10%; left: 90%; animation: particle-float-4 16s ease-in-out infinite; animation-delay: -5s; }

@keyframes particle-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    25% { transform: translate(30px, -50px) scale(1.2); opacity: 0.8; }
    50% { transform: translate(60px, 20px) scale(0.8); opacity: 0.5; }
    75% { transform: translate(20px, 60px) scale(1.1); opacity: 0.7; }
}

@keyframes particle-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    25% { transform: translate(-40px, 30px) scale(0.9); opacity: 0.7; }
    50% { transform: translate(-20px, -60px) scale(1.3); opacity: 0.9; }
    75% { transform: translate(50px, -20px) scale(0.8); opacity: 0.6; }
}

@keyframes particle-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(50px, 40px) scale(1.2); opacity: 0.7; }
    50% { transform: translate(-30px, 50px) scale(0.9); opacity: 0.5; }
    75% { transform: translate(-60px, -30px) scale(1.1); opacity: 0.8; }
}

@keyframes particle-float-4 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    25% { transform: translate(-50px, -40px) scale(0.8); opacity: 0.4; }
    50% { transform: translate(40px, -50px) scale(1.2); opacity: 0.8; }
    75% { transform: translate(30px, 40px) scale(1); opacity: 0.6; }
}

@keyframes particle-float-5 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    25% { transform: translate(40px, 60px) scale(1.1); opacity: 0.7; }
    50% { transform: translate(-50px, 30px) scale(0.8); opacity: 0.5; }
    75% { transform: translate(-20px, -50px) scale(1.3); opacity: 0.9; }
}

@keyframes particle-float-6 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    25% { transform: translate(-30px, -30px) scale(1.2); opacity: 0.8; }
    50% { transform: translate(30px, -40px) scale(0.9); opacity: 0.6; }
    75% { transform: translate(60px, 20px) scale(1.1); opacity: 0.7; }
}

/* ===== Enhanced Aurora Gradient Mesh Effect ===== */
.aurora-bg {
    position: relative;
    overflow: hidden;
}

.aurora-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    will-change: transform;
}

.aurora-blob-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(242, 140, 56, 0.5) 0%, rgba(242, 140, 56, 0) 70%);
    top: -250px;
    left: -150px;
    animation: aurora-float-1 15s ease-in-out infinite;
    animation-delay: 0s;
}

.aurora-blob-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(224, 123, 57, 0.45) 0%, rgba(224, 123, 57, 0) 70%);
    top: 40%;
    right: -200px;
    animation: aurora-float-2 18s ease-in-out infinite;
    animation-delay: -5s;
}

.aurora-blob-3 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(124, 29, 29, 0.55) 0%, rgba(124, 29, 29, 0) 70%);
    bottom: -150px;
    left: 30%;
    animation: aurora-float-3 18s ease-in-out infinite;
    animation-delay: -10s;
}

.aurora-blob-4 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(242, 140, 56, 0.3) 0%, rgba(242, 140, 56, 0) 70%);
    top: 30%;
    left: 50%;
    animation: aurora-float-4 25s ease-in-out infinite;
    animation-delay: -15s;
}

.aurora-blob-5 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(26, 26, 46, 0.5) 0%, rgba(26, 26, 46, 0) 70%);
    bottom: 20%;
    left: -100px;
    animation: aurora-float-5 23s ease-in-out infinite;
    animation-delay: -8s;
}

@keyframes aurora-float-1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        transform: translate(100px, 80px) scale(1.1);
        opacity: 0.5;
    }
    90% {
        opacity: 0.6;
    }
}

@keyframes aurora-float-2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    50% {
        transform: translate(-80px, -60px) scale(1.15);
        opacity: 0.4;
    }
    90% {
        opacity: 0.5;
    }
}

@keyframes aurora-float-3 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.55;
    }
    50% {
        transform: translate(60px, -100px) scale(1.2);
        opacity: 0.45;
    }
    90% {
        opacity: 0.55;
    }
}

@keyframes aurora-float-4 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    50% {
        transform: translate(-70px, 90px) scale(1.1);
        opacity: 0.35;
    }
    90% {
        opacity: 0.4;
    }
}

@keyframes aurora-float-5 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.45;
    }
    50% {
        transform: translate(120px, 50px) scale(1.05);
        opacity: 0.4;
    }
    90% {
        opacity: 0.45;
    }
}

/* Mobile adjustments for aurora */
@media (max-width: 768px) {
    .aurora-blob {
        filter: blur(60px);
    }
    
    .aurora-blob-1 {
        width: 350px;
        height: 350px;
    }
    
    .aurora-blob-2 {
        width: 300px;
        height: 300px;
    }
    
    .aurora-blob-3 {
        width: 280px;
        height: 280px;
    }
    
    .aurora-blob-4 {
        width: 250px;
        height: 250px;
    }
    
    .aurora-blob-5 {
        width: 320px;
        height: 320px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .aurora-blob {
        animation: none;
        opacity: 0.3;
    }
}

/* ===== GSAP Animation Support ===== */
.gsap-word {
    display: inline-block;
    white-space: nowrap;
    margin-right: 0.3em;
    will-change: transform, opacity;
}

.magnetic-btn {
    display: inline-block;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Fix text wrapping - ensure proper line breaks */
.hero-animate-text .gsap-word,
.section-animate-text .gsap-word,
.download-animate-text .gsap-word {
    white-space: nowrap;
}

/* Hero text responsive sizing */
.hero-animate-text {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
}

@media (max-width: 1200px) {
    .hero-animate-text {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }
}

@media (max-width: 768px) {
    .hero-animate-text {
        font-size: 2rem;
        line-height: 1.3;
    }
}

/* Prevent text wrapping issues */
.hero-animate-text,
.section-animate-text,
.download-animate-text {
    overflow: visible;
    word-wrap: normal;
}

.magnetic-btn {
    display: inline-block;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Prevent text wrapping issues - ensure words stay together */
.hero-animate-text,
.section-animate-text,
.download-animate-text {
    overflow: visible;
}

/* Tablet and smaller responsive adjustments */
@media (max-width: 1024px) {
    .hero-animate-text {
        word-wrap: normal;
        hyphens: none;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .hero-animate-text {
        word-wrap: normal;
        hyphens: none;
    }
    
    /* Reduce parallax effect on mobile for better performance */
    .aurora-blob {
        animation-duration: 30s;
    }
}

/* Ensure animation targets don't cause layout shift */
.hero-animate-text,
.section-animate-text,
.download-animate-text {
    overflow: hidden;
}

/* Smooth reveal for feature and download cards */
.feature-animate,
.download-animate {
    will-change: transform, opacity;
}

/* Hero video parallax support */
.hero-video {
    will-change: transform;
}

/* Download tabs animation support */
.download-tabs {
    will-change: transform, opacity;
}

/* Mobile adjustments for GSAP */
@media (max-width: 768px) {
    .magnetic-btn {
        /* Disable magnetic effect on mobile for better touch experience */
        transform: none !important;
    }
}

/* Reduced motion for GSAP animations */
@media (prefers-reduced-motion: reduce) {
    .gsap-word,
    .magnetic-btn,
    .feature-animate,
    .download-animate,
    .hero-video,
    .download-tabs {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto;
    }
}