/* Bootstrap Override and Custom Styles - White Background, Black Text, Yellow Accents */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Smooth Scroll Performance Optimizations */
html {
    scroll-behavior: auto; /* Disable default smooth scroll to prevent conflicts */
}

* {
    /* Optimize animations during scroll */
    will-change: auto;
}

/* Disable transforms during scroll for better performance */
.scrolling * {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Performance optimizations */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Locomotive Scroll CSS - Disabled to prevent conflicts */
html.has-scroll-smooth {
    overflow: visible !important;
}

html.has-scroll-dragging {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.has-scroll-smooth body {
    overflow: visible !important;
}

.has-scroll-smooth [data-scroll-container] {
    min-height: 100vh;
}

.pointer {
    cursor: pointer;
}

.atom-container {
    width: 300px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0 auto;
}

.atom {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.atoms3 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -49%);
    z-index: 2;
    border-radius: 16px;
    box-shadow: 0 0 12px 0px #dddddd;
    animation: floatController 3s ease-in-out infinite;
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.15);
    transform-origin: center center;
    transform-style: preserve-3d;
}

.orbit1 { transform: translate3d(-50%, -50%, 0) rotateX(70deg) rotateY(0deg); }
.orbit2 { 
    transform: translate3d(-50%, -50%, 0) rotateX(70deg) rotateY(120deg); 
    border-color: rgba(0,0,0,0.25);
}
.orbit3 { 
    transform: translate3d(-50%, -50%, 0) rotateX(70deg) rotateY(240deg); 
    border-color: rgba(0,0,0,0.25);
}

.orbit .electron {
    width: 14px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center; 
    transform-style: preserve-3d; 
}

.electron-visual {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ffffff;
    color: #000000 !important;
    font-size: 18px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center center; 
}

.orbit1 .electron-visual {
    transform: rotateX(-70deg); 
}
.orbit2 .electron-visual {
    transform: rotateY(-120deg) rotateX(-70deg); 
}
.orbit3 .electron-visual {
    transform: rotateY(-240deg) rotateX(-70deg); 
}

@keyframes orbit-electron-2 {
    0% {
        transform:
            translate(-50%, -50%)
            rotateZ(0deg)
            translateX(125px)
            rotateZ(0deg);
    }
    100% {
        transform:
            translate(-50%, -50%)
            rotateZ(360deg)
            translateX(125px)
            rotateZ(-360deg);
    }
}
.orbit1 .electron1 { animation: orbit-electron-2 6s linear infinite; }
.orbit1 .electron2 { animation: orbit-electron-2 6s linear infinite; animation-delay: -3s; }
.orbit2 .electron1 { animation: orbit-electron-2 6s linear infinite; }
.orbit2 .electron2 { animation: orbit-electron-2 6s linear infinite; animation-delay: -3s; }
.orbit3 .electron1 { animation: orbit-electron-2 6s linear infinite; }
.orbit3 .electron2 { animation: orbit-electron-2 6s linear infinite; animation-delay: -3s; }

.orbit-tail {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 255px; /* Should match orbit width */
    height: 255px; /* Should match orbit height */
    border-radius: 50%;

    /* 1. Define the visual style of the tail: a dashed line */
    border-width: 5px;
    border-style: solid;
    border-color: rvar(--color-indigo-700); /* Fallback to original color */
    border-image-source: linear-gradient(to right, var(--color-indigo-700), rgba(255, 255, 255, 0));
    border-image-slice: 1; /* Ensures the entire image is used for the border */

    /* 2. Use a conic-gradient mask to reveal only a segment of the border */
    -webkit-mask-image: conic-gradient(
        transparent 0deg,
        transparent 230deg,  /* Tail is invisible up to this point */
        white 230deg,        /* Start of the visible tail segment */
        white 270deg,        /* End of the visible tail segment (40deg long) */
        transparent 270deg   /* Remainder is invisible */
    );
    mask-image: conic-gradient(
        transparent 0deg,
        transparent 230deg,
        white 230deg,
        white 270deg,
        transparent 270deg
    );

    transform-origin: center center;
    transform-style: preserve-3d;
    transform: translate3d(-50%, -50%, 0); 
}

@keyframes orbit-tail-spin {
    0% {
        transform: translate3d(-50%, -50%, -1px) rotateZ(0deg);
    }
    100% {
        transform: translate3d(-50%, -50%, -1px) rotateZ(360deg);
    }
}

/* Apply to all tails, syncing with electron animations */
.orbit1 .electron1-tail { animation: orbit-tail-spin 6s linear infinite; }
.orbit1 .electron2-tail { animation: orbit-tail-spin 6s linear infinite; animation-delay: -3s; }
.orbit2 .electron1-tail { animation: orbit-tail-spin 6s linear infinite; }
.orbit2 .electron2-tail { animation: orbit-tail-spin 6s linear infinite; animation-delay: -3s; }
.orbit3 .electron1-tail { animation: orbit-tail-spin 6s linear infinite; }
.orbit3 .electron2-tail { animation: orbit-tail-spin 6s linear infinite; animation-delay: -3s; }

@keyframes floatController {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(5px);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-5px);
    }
}

.extension-badge {
    background-color: var(--color-indigo-600);
    color: var(--color-white);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    /* font-size: 0.8rem; */
    margin: 2px 0;
    display: inline-block;
    cursor: normal;
}

.extension-badge.yellow {
    background: #ffffff;
    color: #000000;
}

.extension-badge.yellow:hover {
    background: var(--color-gray-200);
}

.extension-badge:hover {
    background: var(--color-indigo-700);
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-scrollbar {
    position: absolute;
    right: 0;
    top: 0;
    width: 11px;
    height: 100vh;
    transform-origin: center right;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
}

.c-scrollbar:hover {
    transform: scaleX(1.45);
}

.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
    opacity: 1;
}

.c-scrollbar_thumb {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ffcc00;
    width: 7px;
    border-radius: 10px;
    margin: 2px;
    cursor: -webkit-grab;
    cursor: grab;
}

.has-scroll-dragging .c-scrollbar_thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000000;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
}

.nav-links .nav-link {
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.nav-links .nav-link:hover {
    color: #ffcc00;
}

/* Section Base Styles */
.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 5rem 2rem;
    background-color: #ffffff;
}

/* Hero Section - Typography Only with Yellow Accents */
.hero-section {
    background: linear-gradient(135deg, #ffcc00 0%, #ffaa00 100%);
    color: #000000;
    text-align: center;
    min-height: 100vh;
}

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #000000;
}

.hero-subtitle {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 2rem;
    color: #000000;
}

.hero-description {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    line-height: 1.8;
    color: #000000;
}

.hero-logos .badge {
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid #000000;
    color: #000000;
    backdrop-filter: blur(10px);
}

/* Floating Components - Outside Document Flow */
.floating-components {
    position: relative;
    pointer-events: none;
}

.floating-component {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 1000;
    pointer-events: none;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.floating-component.visible {
    opacity: 1;
}

.component-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
}

/* Component 1 Section - Component visible from start, white background */
.component-1-section {
    background-color: #ffffff;
    min-height: 120vh; /* Tall enough for smooth animation */
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000000;
}

.component-1-section .container {
    position: relative;
    z-index: 1;
}

.component-1-section .display-4 {
    color: #000000;
}

.component-1-section .lead {
    color: #333333;
}

.component-1-section .badge {
    background-color: #ffcc00 !important;
    color: #000000 !important;
    border: 2px solid #000000;
}

/* Component 2 Section - Component 2 visible from start, white background */
.component-2-section {
    background-color: #ffffff;
    min-height: 120vh; /* Tall enough for smooth animation */
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000000;
}

.component-2-section .container {
    position: relative;
    z-index: 1;
}

.component-2-section .display-4 {
    color: #000000;
}

.component-2-section .lead {
    color: #333333;
}

.component-2-section .badge {
    background-color: #ffcc00 !important;
    color: #000000 !important;
    border: 2px solid #000000;
}

.beam {
    display: none;
}

/* Barcode Section - White background with yellow accents */
.barcode-section {
    color: #000000;
    /* display: flex; */
    /* align-items: center; */
}

.barcode-section .container {
    position: relative;
    z-index: 1;
}

.barcode-section h3 {
    color: #000000;
    font-weight: bold;
}

.barcode-section p {
    color: #333333;
}

.barcode-wrapper {
    margin-bottom: 2rem;
}

.barcode-placeholder {
    width: 200px;
    height: 200px;
    background: #ffffff;
    border: 4px solid #ffcc00;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

.barcode-placeholder i {
    font-size: 4rem;
    color: #ffcc00;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #000000, transparent);
    animation: scan 2s infinite;
}

@keyframes scan {
    0% { transform: translateY(-4px); }
    50% { transform: translateY(200px); }
    100% { transform: translateY(204px); }
}

.scan-message {
    font-size: 1.2rem;
    color: #000000;
    animation: pulse 2s infinite;
    margin-top: 2rem;
    font-weight: 500;
}

@keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Technical Section - White background, black text, yellow accents */
.technical-section {
    background-color: #ffffff;
    color: #000000;
    min-height: 100vh;
    display: flex;
    align-items: center;
    border-top: 1px solid #000000;
}

.technical-section .container {
    position: relative;
    z-index: 1;
}

.technical-section h2 {
    font-size: 3rem;
    color: #ffcc00;
    margin-bottom: 4rem;
    font-weight: bold;
}

.tech-item {
    background: #ffffff;
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    border: 2px solid #000000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.tech-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #ffcc00;
}

.tech-item i {
    font-size: 3rem;
    color: #ffcc00;
    margin-bottom: 1rem;
}

.tech-item h5 {
    color: #000000;
    margin-bottom: 1rem;
    font-weight: bold;
}

.tech-item p {
    color: #333333;
    line-height: 1.6;
}

/* Footer Section - White background, black text */
.footer-section {
    background-color: #ffffff;
    color: #000000;
    min-height: 50vh;
    display: flex;
    align-items: center;
    border-top: 3px solid #ffcc00;
}

.footer-section .container {
    position: relative;
    z-index: 1;
}

.footer-item h5 {
    color: #ffcc00;
    margin-bottom: 1rem;
    font-weight: bold;
}

.footer-item p {
    margin-bottom: 0.5rem;
    color: #000000;
}

.footer-item i {
    margin-right: 10px;
    color: #ffcc00;
}

.social-links a {
    color: #000000;
    font-size: 1.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: #ffcc00;
    transform: translateY(-2px);
}

/* Enhanced Floating Component Styles */
.component-1-wrapper {
    z-index: 1000;
}

.component-2-wrapper {
    z-index: 1001;
}

/* Animation States */
.floating-component.entering {
    opacity: 1 !important;
    border: 2px solid rgba(255, 204, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.2);
}

.floating-component.sticky {
    position: fixed !important;
    opacity: 1 !important;
    border: 3px solid #ffcc00;
    box-shadow: 0 0 30px rgba(255, 204, 0, 0.5);
    animation: fixedPulse 2s infinite;
}

.floating-component.hidden {
    opacity: 0;
    border: none;
    box-shadow: none;
}

@keyframes fixedPulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 204, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 204, 0, 0.8);
    }
}

/* Loading Animation */
body.loaded .floating-component {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Center Crosshair Indicator (for demonstration) */
.center-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.3;
}

.center-indicator::before,
.center-indicator::after {
    content: '';
    position: absolute;
    background: #ffcc00;
}

.center-indicator::before {
    width: 20px;
    height: 2px;
    top: 9px;
    left: 0;
}

.center-indicator::after {
    width: 2px;
    height: 20px;
    top: 0;
    left: 9px;
}


/* Bootstrap Responsive Overrides */
@media (max-width: 768px) {
    .nav-container {
        padding: 1rem;
    }

    .nav-links {
        gap: 1rem;
        font-size: 0.9rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .floating-component {
        width: 250px;
        height: 250px;
    }

    .barcode-placeholder {
        width: 150px;
        height: 150px;
    }

    .barcode-placeholder i {
        font-size: 3rem;
    }

    .technical-section h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .floating-component {
        width: 200px;
        height: 200px;
    }

    .barcode-placeholder {
        width: 120px;
        height: 120px;
    }

    .barcode-placeholder i {
        font-size: 2rem;
    }

    .technical-section h2 {
        font-size: 1.8rem;
    }
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--color-indigo-700);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-indigo-700);
}

.scoll-content{
    height: 100%;
}

.marquee-inner {
    animation: marqueeScroll 15s linear infinite;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Parallax Image Styles - Each as individual sticky element */
.parallax-image {
    position: sticky;
    width: 125px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;
    will-change: transform;
    z-index: 10; /* Ensure they're above other content */
}

.parallax-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.1s ease-out;
}

/* Different layers with different sticky behaviors */
.parallax-bg {
    z-index: 4;
    opacity: 1;
    transform: scale(1);
    top: 30vh;
    padding-bottom: 120px;
    bottom: 100px;
}

.parallax-mid {
    z-index: 3;
    opacity: 1;
    transform: scale(1);
    top: 30vh;
    bottom: 100px;
}

.parallax-fg {
    z-index: 2;
    opacity: 1;
    transform: scale(1);
    top: 30vh;
}

/* Spacer for sticky effect */
.sticky-spacer {
    height: 300px;
}

/* Enhanced parallax with scroll-based transforms */
@media (prefers-reduced-motion: no-preference) {
    .parallax-bg {
        transform: translateY(calc(var(--scroll-y, 0) * 0.3)) scale(1);
    }
    
    .parallax-mid {
        transform: translateY(calc(var(--scroll-y, 0) * 0.6)) scale(1);
    }
    
    .parallax-fg {
        transform: translateY(calc(var(--scroll-y, 0) * 1.0)) scale(1);
    }
}

/* Smooth transitions */
.parallax-image {
    transition: transform 0.1s ease-out, opacity 0.3s ease;
}

/* Intersection Observer animations */
.parallax-image.animate-in {
    animation: slideInUp 0.8s ease-out forwards;
}

.parallax-image.animate-out {
    animation: slideOutDown 0.8s ease-out forwards;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .parallax-container {
        height: 80vh;
    }
    
    .parallax-bg {
        top: 15vh;
    }
    
    .parallax-mid {
        top: 15vh;
    }
    
    .parallax-fg {
        top: 15vh;
    }
}

@media (max-width: 480px) {
    .parallax-container {
        height: 60vh;
    }
    
    .parallax-bg {
        top: 12vh;
    }
    
    .parallax-mid {
        top: 12vh;
    }
    
    .parallax-fg {
        top: 12vh;
    }
}

/* Scroll animation styles */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animate__animated {
    opacity: 1;
    transform: translateY(0);
}