/* CUSTOM VARIABLE STYLES & GLOWS */
:root {
    --brand-accent: #00e096;
    --brand-navyBg: #000000;
    --brand-navyBgSecondary: #0a0a0c;
    --brand-navyCard: rgba(13, 13, 16, 0.75);
    --brand-accent-glow: 0 0 25px rgba(0, 224, 150, 0.35);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--brand-navyBg);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-accent);
}

/* Hide Scrollbar for utilities */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Three.js Background canvas positioning */
#three-canvas {
    mask-image: radial-gradient(circle, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 60%, transparent 100%);
}

/* perspective container for 3D hero dashboard */
.perspective-container {
    perspective: 1500px;
    transform-style: preserve-3d;
}

.transform-3d {
    transform-style: preserve-3d;
    transform: rotateX(8deg) rotateY(-12deg) rotateZ(3deg);
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Ambient soft pulse animation for floating items */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.floating-element {
    animation: float 6s ease-in-out infinite;
}

/* WhatsApp floating pulse effect */
@keyframes pulse-gentle {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(37, 211, 102, 0.3);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 25px rgba(37, 211, 102, 0.6);
    }
}

.animate-pulse-gentle {
    animation: pulse-gentle 2.5s ease-in-out infinite;
}

/* Glassmorphism custom tags */
.glass-glow-card {
    background: var(--brand-navyCard);
    border: 1px solid rgba(0, 224, 150, 0.1);
    backdrop-filter: blur(20px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.glass-glow-card:hover {
    border-color: rgba(0, 224, 150, 0.3);
    box-shadow: 0 0 25px rgba(0, 224, 150, 0.15);
}

/* Modal Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Active tab state */
.market-tab-btn.active {
    background: rgba(0, 224, 150, 0.15);
    border: 1px solid rgba(0, 224, 150, 0.3);
    color: var(--brand-accent);
}

/* Form inputs styling */
input:focus,
select:focus {
    box-shadow: 0 0 10px rgba(0, 224, 150, 0.15);
}

/* Interactive Calculator Slot State */
.slot-btn.active {
    border-color: var(--brand-accent) !important;
    background: rgba(0, 224, 150, 0.05) !important;
    box-shadow: 0 0 10px rgba(0, 224, 150, 0.15);
}

/* Timeline animations */
.timeline-bullet {
    transition: all 0.3s ease;
}

.timeline-bullet.active {
    background: var(--brand-accent);
    color: #000;
    box-shadow: 0 0 15px var(--brand-accent);
    border-color: var(--brand-accent);
}

/* Slow draw animation for simulated SVG chart path */
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

.graph-draw-anim {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Slow draw animation for progress circular gauge */
@keyframes progressDraw {
    from {
        stroke-dasharray: 0, 100;
    }
}

.progress-circle-anim {
    animation: progressDraw 2.5s ease-out forwards;
}

/* Custom fade effects for page loads */
.timeline-node {
    opacity: 0.3;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.timeline-node.visible {
    opacity: 1;
    transform: translateY(0);
}

/* MOBILE RESPONSIiveness OVERRIDES */
@media (max-width: 1023px) {

    /* Disable 3D tilt transform on smaller/touch screens for clean navigation and readability */
    .transform-3d {
        transform: none !important;
    }

    .perspective-container {
        perspective: none !important;
    }
}

@media (max-width: 639px) {

    /* Set custom sizing for mobile buttons/icons spacing */
    .animate-pulse-gentle {
        bottom: 5.5rem;
        right: 1rem;
        padding: 0.75rem !important;
    }
}

/* Customer Support Chat Widget Styles */
#chat-widget {
    will-change: transform, opacity;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

#chat-widget.show-widget {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

@keyframes pulse-blue {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(0, 224, 150, 0.3);
    }

    50% {
        box-shadow: 0 0 25px rgba(0, 224, 150, 0.6);
    }
}

.animate-pulse-blue {
    animation: pulse-blue 2s ease-in-out infinite;
}

/* Force hardware accelerated smoothing on video elements to prevent jagged/pixelated edges */
video {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    outline: 1px solid transparent;
    border: 1px solid transparent;
}

/* Smooth Video Fade-In on Load */
#hero-bg-video {
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

#hero-bg-video.video-loaded {
    opacity: 1;
}

/* Beautiful dynamic background gradient fallback for hero section */
.hero-video-container {
    background: radial-gradient(circle at 50% 50%, #0c0f1d 0%, #000000 100%) !important;
}

/* Announcement Marquee Ticker */
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    width: 100%;
    user-select: none;
}

.marquee-content {
    flex-shrink: 0;
    display: inline-block;
    padding-right: 4rem;
    animation: marquee-scroll 25s linear infinite;
}

@keyframes marquee-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}