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

/* ================================================================
   CROSS-PLATFORM GPU OPTIMIZATION
   Use proper compositing hints instead of disabling features
   ================================================================ */

/* Force GPU compositing on elements that animate during scroll */
nav#navigation,
.particles-bg,
#floatingLinesMiddleDesktop,
#floatingLinesMiddleMobile,
#floatingLinesBottomDesktop,
#floatingLinesBottomMobile {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize backdrop-filter performance with proper layering */
nav#navigation,
#sidebarContent,
#sidebarOverlay {
    /* Promote to own compositing layer for better blur performance */
    isolation: isolate;
}

/* Ensure canvases are properly composited */
.particles-bg canvas,
#floatingLinesMiddleDesktop canvas,
#floatingLinesBottomDesktop canvas {
    transform: translateZ(0);
}

/* Reduce repaints during scroll by containing sections */
section {
    contain: layout style paint;
}

/* ================================================================ */

/* Smooth scrolling with padding for fixed nav */
html,
body {
    scroll-behavior: smooth; /* Native smooth scroll fallback before Lenis takes over */
    scroll-padding-top: 7rem;
    overflow-x: hidden !important;
    max-width: 100vw;
    background-color: #000814;
    /* Prevent white flash during repaint */
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar IE/Edge */
    /* scroll-snap-type: y proximity; -- Removed because it conflicts with Lenis smooth scrolling and causes jitter */
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}

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

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

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Smooth gradient fade for service cards */
.service-card-gradient {
    background: linear-gradient(to top,
            rgba(29, 78, 216, 0.95) 0%,
            rgba(30, 80, 220, 0.85) 10%,
            rgba(37, 99, 235, 0.75) 20%,
            rgba(59, 130, 246, 0.45) 40%,
            rgba(96, 165, 250, 0.3) 60%,
            rgba(147, 197, 253, 0.15) 80%,
            transparent 100%);
}

/* Glow border (About section content container) */
@keyframes glowBorderShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.glow-border {
    position: relative;
    isolation: isolate;
    padding: 2px;
    background: linear-gradient(90deg, #3b82f6, #06b6d4, #2563eb, #3b82f6);
    background-size: 300% 300%;
    animation: glowBorderShift 7s ease infinite;
    /* Force to own layer for smooth parallax on iPad */
    transform: translate3d(0, 0, 0);
}

.glow-border::before {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -1;
    border-radius: inherit;
    background: inherit;
    filter: blur(22px);
    opacity: 0.25;
    /* Isolate the expensive blur filter to its own layer */
    transform: translate3d(0, 0, 0);
}

/* Disable glow border animation on mobile for better performance */
@media (max-width: 767px) {
    .glow-border {
        animation: none;
        background: linear-gradient(90deg, #3b82f6, #06b6d4, #2563eb, #3b82f6);
        background-size: 100% 100%;
    }

    .glow-border::before {
        display: none;
    }
}

.glow-border__inner {
    height: 100%;
    width: 100%;
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .glow-border {
        animation: none;
    }
}

/* Active navigation link styles */
nav {
    position: relative;
    overflow: visible;
}

/* Navigation bar scroll states (no left/translate animations to avoid "arc" movement) */
#navShell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding-top: 0;
    pointer-events: none;
    will-change: padding-top;
    transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#navShell #navigation {
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    will-change: width, max-width, border-radius;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#navShell.nav-shell-scrolled {
    padding-top: 1rem;
}

#navShell.nav-shell-scrolled #navigation {
    width: 95%;
    max-width: 100rem;
    border-radius: 1rem;
}

nav>div {
    position: relative;
}

.nav-link {
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    cursor: pointer;
}

.nav-link:hover {
    color: white;
    transform: translateY(-2px) scale(1.05);
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.nav-link:active {
    transform: translateY(0px) scale(0.98);
    opacity: 0.8;
    transition: all 0.1s ease;
}

.nav-link.active {
    color: white;
    transform: translateY(1px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.jules-link {
    color: #60a5fa;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    text-decoration: none;
}

.jules-link:hover {
    color: #93c5fd;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}

.nav-link.active:hover {
    transform: translateY(0px) scale(1.02);
}

.nav-link.active:active {
    transform: translateY(2px) scale(0.97);
    opacity: 0.8;
    transition: all 0.1s ease;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: white;
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    transform: translateY(26px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: underlineFadeIn 0.3s ease-out;
}

@keyframes underlineFadeIn {
    from {
        opacity: 0;
        transform: translateY(26px) scaleX(0);
    }

    to {
        opacity: 1;
        transform: translateY(26px) scaleX(1);
    }
}

/* Contain overflow to prevent scrollbar */
@media (min-width: 1024px) {
    header {
        overflow-x: hidden !important;
        overflow-y: hidden;
        max-width: 100vw;
    }
}

/* Services, About, and Contact sections - defer rendering until near viewport */
#services,
#apropos,
#contact {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
    /* Placeholder size before render */
}

/* Particles Background */
.particles-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

.particles-bg canvas {
    width: 100%;
    height: 100%;
    filter: blur(var(--particles-blur, 2px));
}

/* Startup Animation */
.flicker-animation {
    animation: lightFlicker 1.5s linear;
}

@keyframes lightFlicker {
    0% {
        opacity: 1;
    }

    33.33% {
        opacity: 1;
    }

    38.56% {
        opacity: 0.7;
    }

    42.48% {
        opacity: 1;
    }

    47.71% {
        opacity: 0.85;
    }

    55.56% {
        opacity: 0.4;
    }

    59.48% {
        opacity: 1;
    }

    66.01% {
        opacity: 0.6;
    }

    76.47% {
        opacity: 0.2;
    }

    84.31% {
        opacity: 0.1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeInSmooth {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.flicker-animation {
    animation: lightFlicker 1.5s linear;
}

.flicker-animation-in {
    animation: lightFlickerIn 1.0s linear forwards;
}

.fade-in {
    animation: fadeIn 1s ease-in forwards;
}

.quick-fade-in-desktop {
    transform-origin: left center;
    animation: fadeInScaleDesktop 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    backface-visibility: hidden;
    perspective: 1000px;
}

.quick-fade-in-mobile {
    transform-origin: right center;
    animation: fadeInScaleMobile 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes fadeInScaleDesktop {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

@keyframes fadeInScaleMobile {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleDesktop {
    from {
        transform: scale(0.85);
    }

    to {
        transform: scale(1);
    }
}

@keyframes scaleMobile {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1);
    }
}

.maison-lit-anim-desktop {
    transform-origin: left center;
    animation:
        scaleDesktop 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards,
        fadeInSmooth 0.8s ease-in 1.0s forwards;
    backface-visibility: hidden;
    perspective: 1000px;
}

.maison-lit-anim-mobile {
    transform-origin: right center;
    animation:
        scaleMobile 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards,
        fadeInSmooth 0.8s ease-in 1.0s forwards;
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInMobile {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in-mobile {
    animation: fadeInMobile 1s ease-in forwards;
}

/* Hide line break in hero subtitle on tablet to keep it on one line */
@media (min-width: 768px) and (max-width: 1023px) {
    #hero-subtitle br {
        display: none;
    }
}

.particles-fade-in {
    animation: fadeInParticles 1s ease-in forwards;
}

@keyframes fadeInParticles {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.6;
    }
}

/* Initially hide waves and particles */
.startup-hidden {
    opacity: 0;
}

#hero-gradient {
    transition: background 1s ease-in;
}

.fade-up {
    animation: fadeUp 1s ease-out forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Robust scroll locking */
.stop-scrolling {
    overflow: hidden !important;
}

/* Mobile Sidebar */
#mobileSidebar.sidebar-open {
    display: block;
}

#sidebarOverlay {
    transition: opacity 0.3s ease-out;
    will-change: opacity;
}

#mobileSidebar.sidebar-open #sidebarOverlay {
    opacity: 0;
}

#sidebarContent {
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

#mobileSidebar.sidebar-open #sidebarContent {
    transform: translateX(0);
}

.nav-link-mobile.active {
    color: white;
}

/* Parallax elements - optimized for cross-platform performance */
[data-parallax-speed] {
    /* Use contain instead of will-change to reduce GPU memory pressure */
    contain: layout style paint;
    /* Only use GPU acceleration when actively animating */
    transform: translateZ(0);
    backface-visibility: hidden;
    /* transition removed to prevent conflict with JS smoothing */
}

.parallax-wrapper,
[data-parallax-speed].parallax-active {
    will-change: transform;
}

.parallax-wrapper {
    contain: layout style paint;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    /* Hardware isolation with transient will-change memory overhead */
}

/* Cross-platform scroll performance optimization */
@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
    }
}

/* Force GPU compositing for smooth scroll containers */
.particles-bg canvas,
#floatingLinesMiddleDesktop canvas,
#floatingLinesBottomDesktop canvas,
#floatingLinesMiddleMobile canvas,
#floatingLinesBottomMobile canvas {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce paint complexity for better scroll performance */
@media screen {
    section {
        contain: layout style paint;
    }
}

/* Disable parallax will-change on mobile for better performance */
@media (max-width: 767px) {
    [data-parallax-speed] {
        contain: none;
        backface-visibility: visible;
    }

    /* Remove expensive mix-blend-overlay on mobile */
    .about-image-overlay {
        mix-blend-mode: normal;
    }
}

/* Note: TLH Intro Splash CSS has been inlined into index.html/en.html for better performance */


/* ================================================================
   COOKIE CONSENT (ORESTBIDA) THEME OVERRIDES
   ================================================================ */

:root {
    --cc-bg: #0f172a;
    --cc-text: #f1f5f9;
    --cc-btn-primary-bg: #2563eb;
    --cc-btn-primary-text: #ffffff;
    --cc-btn-primary-hover-bg: #1d4ed8;
    --cc-btn-secondary-bg: #334155;
    --cc-btn-secondary-text: #f1f5f9;
    --cc-btn-secondary-hover-bg: #475569;
    --cc-toggle-on-bg: #3b82f6;
    --cc-toggle-off-bg: #64748b;
    --cc-toggle-on-knob-bg: #fff;
    --cc-toggle-off-knob-bg: #fff;
    --cc-separator-border: rgba(255, 255, 255, 0.1);
    --cc-modal-border: rgba(255, 255, 255, 0.2);
    --cc-font-family: 'Inter', sans-serif;
}

#cc-main .cm {
    background: var(--cc-bg) !important;
    border: 1px solid var(--cc-modal-border) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(12px) !important;
}

#cc-main .cm__title {
    color: #3b82f6 !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em !important;
}

#cc-main .cm__btn {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.2s ease !important;
}

#cc-main .cm__btn--primary {
    background: linear-gradient(to right, #2563eb, #0891b2) !important;
    border: none !important;
}

#cc-main .cm__btn--primary:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px) !important;
}

#cc-main .cm__btn--secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#cc-main .cm__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

#cc-main .pm {
    background: var(--cc-bg) !important;
    border-radius: 1.5rem !important;
    border: 1px solid var(--cc-modal-border) !important;
}

#cc-main .pm__section {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 1rem !important;
}

#cc-main .pm__badge {
    background: #1e293b !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

#cc-main .cc__link {
    color: #3b82f6 !important;
    text-decoration: none !important;
}

#cc-main .cc__link:hover {
    text-decoration: underline !important;
}