/* Complementary Custom Styles for Biskra E-Pub Landing Page */

/* Custom Selection */
::selection {
    background: rgba(59, 145, 247, 0.25);
    color: #ffffff;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #070a13;
}
::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}
::-webkit-scrollbar-thumb:hover {
    background: #3b91f7;
}

/* ====== CONTENT VISIBILITY ====== */
section, footer {
    content-visibility: auto;
    contain-intrinsic-size: 600px;
    contain: paint style layout;
}

/* Scroll reveal initial states */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.opacity-100 {
    opacity: 1;
    transform: translateY(0);
}

/* Interactive Card Radial Gradient Glow on Hover */
.card-glow {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.card-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
        220px circle at var(--x, 0px) var(--y, 0px),
        rgba(59, 145, 247, 0.3) 0%,
        rgba(74, 222, 128, 0.1) 50%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.card-glow:hover::before {
    opacity: 1;
}

.card-glow:hover {
    transform: translateY(-5px);
}

/* Float Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* Slow ambient blob float for background glows */
@keyframes blob-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -20px) scale(1.05);
    }
    50% {
        transform: translate(-20px, 10px) scale(0.95);
    }
    75% {
        transform: translate(20px, 20px) scale(1.02);
    }
}
.animate-blob-float {
    animation: blob-float 22s ease-in-out infinite;
    will-change: transform;
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Map filter overlay transitions */
iframe {
    transition: filter 0.5s ease;
}

/* ===================== LIGHT MODE ===================== */
html.light-mode {
    color-scheme: light;
}
html.light-mode body {
    background-color: rgba(238, 241, 245, 0.65);
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(59, 145, 247, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 65%, rgba(74, 222, 128, 0.06) 0%, transparent 50%);
    background-attachment: fixed;
}

/* Backgrounds - subtle brand color infusion */
html.light-mode .bg-bg-darker { background-color: rgba(232, 236, 242, 0.7) !important; }
html.light-mode .bg-bg-background { background-color: rgba(238, 241, 245, 0.65) !important; }
html.light-mode .bg-surface { background-color: rgba(245, 247, 250, 0.88) !important; }
html.light-mode .bg-surface-card { background-color: rgba(228, 232, 239, 0.75) !important; }
html.light-mode .bg-bg-darker\/90 { background-color: rgba(232, 236, 242, 0.7) !important; }
html.light-mode .bg-bg-darker\/95 { background-color: rgba(232, 236, 242, 0.7) !important; }
html.light-mode .bg-bg-darker\/60 { background-color: rgba(232, 236, 242, 0.6) !important; }
html.light-mode .bg-bg-darker\/5 { background-color: rgba(232, 236, 242, 0.05) !important; }
html.light-mode .bg-white { background-color: rgba(238, 241, 245, 0.65) !important; }

/* Brand Blobs for Light Mode Sections */
html.light-mode .bg-brand-blobs {
    position: relative;
    overflow: hidden;
}
html.light-mode .bg-brand-blobs::before,
html.light-mode .bg-brand-blobs::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(120px);
}
html.light-mode .bg-brand-blobs::before {
    background-color: #3b91f7; /* Blue */
    opacity: 0.05;
    top: -15%;
    left: -15%;
}
html.light-mode .bg-brand-blobs::after {
    background-color: #4ade80; /* Green */
    opacity: 0.05;
    bottom: -15%;
    right: -15%;
}
html.light-mode .bg-brand-blobs > * {
    position: relative;
    z-index: 1;
}

/* Fixed brand glow blobs - slightly more visible in light mode */
html.light-mode .fixed.rounded-full.bg-primary\/4,
html.light-mode .fixed.rounded-full.bg-primary\/3 {
    opacity: 0.25 !important;
}
html.light-mode .fixed.rounded-full.bg-secondary\/3,
html.light-mode .fixed.rounded-full.bg-secondary\/4 {
    opacity: 0.25 !important;
}

/* Glass header */
html.light-mode .glass {
    background: rgba(238, 241, 245, 0.7) !important;
    backdrop-filter: blur(16px);
}

/* Text colors */
html.light-mode .text-white { color: #111827 !important; }
html.light-mode .text-on-surface { color: #1f2937 !important; }
html.light-mode .text-on-surface-variant { color: #5b626e !important; }

/* Brand text colors - keep */
html.light-mode .text-primary { color: #3b91f7 !important; }
html.light-mode .text-secondary { color: #4ade80 !important; }

/* Gradient overrides for hero section */
html.light-mode .from-bg-darker { --tw-gradient-from: #e4e8ef !important; }
html.light-mode .to-bg-background { --tw-gradient-to: #eef1f5 !important; }

/* Border */
html.light-mode .border-outline-variant { border-color: rgba(0, 0, 0, 0.08) !important; }
html.light-mode .border-outline-variant\/30 { border-color: rgba(0, 0, 0, 0.03) !important; }
html.light-mode .border-outline-variant\/20 { border-color: rgba(0, 0, 0, 0.02) !important; }
html.light-mode .border-outline-variant\/35 { border-color: rgba(0, 0, 0, 0.035) !important; }

/* Card containers in light mode */
html.light-mode .from-primary\/10 { --tw-gradient-from: rgba(59, 145, 247, 0.05) !important; }
html.light-mode .to-secondary\/5 { --tw-gradient-to: rgba(74, 222, 128, 0.025) !important; }

/* Banner callout */
html.light-mode .bg-primary\/10 { background-color: rgba(59, 145, 247, 0.06) !important; }

/* Scrollbar for light mode */
html.light-mode ::-webkit-scrollbar-track {
    background: #e4e8ef;
}
html.light-mode ::-webkit-scrollbar-thumb {
    background: #c5cad4;
    border: 1px solid rgba(0, 0, 0, 0.03);
}
html.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #3b91f7;
}

/* Map iframe in light mode */
html.light-mode iframe.grayscale {
    filter: none !important;
}

/* Selection */
html.light-mode ::selection {
    background: rgba(59, 145, 247, 0.2);
    color: #ffffff;
}

/* Card glow pseudo-element for light mode */
html.light-mode .card-glow::before {
    background: radial-gradient(
        220px circle at var(--x, 0px) var(--y, 0px),
        rgba(59, 145, 247, 0.15) 0%,
        rgba(74, 222, 128, 0.05) 50%,
        transparent 100%
    ) !important;
}

/* Container backgrounds */
html.light-mode .bg-primary\/10 { background-color: rgba(59, 145, 247, 0.06) !important; }
html.light-mode .bg-secondary\/10 { background-color: rgba(74, 222, 128, 0.06) !important; }
html.light-mode .bg-primary-container { background-color: rgba(59, 145, 247, 0.08) !important; }
html.light-mode .bg-secondary-container { background-color: rgba(74, 222, 128, 0.08) !important; }

/* Gradient accent stays */
html.light-mode .gradient-primary {
    background: linear-gradient(135deg, #3b91f7 0%, #1d4ed8 100%);
}
html.light-mode .gradient-accent {
    background: linear-gradient(135deg, #3cd070 0%, #4ade80 100%);
}

/* Logo text brand colors - ensure they remain */
html.light-mode .text-primary { color: #3b91f7 !important; }
html.light-mode .text-secondary { color: #4ade80 !important; }

/* Active nav link text-primary is already handled above */

/* Contact section surface card */
html.light-mode .bg-surface { background-color: #ffffff !important; }

/* Labels and tags background in light mode */
html.light-mode .bg-surface[class*="rounded-full"] { background-color: rgba(234, 236, 240, 0.8) !important; }

/* Stats cards in light mode */
html.light-mode .bg-bg-darker\/60[class*="rounded-2xl"] {
    background-color: rgba(232, 236, 242, 0.7) !important;
}

/* Gradient text should preserve brand colors */
html.light-mode .from-primary { --tw-gradient-from: #3b91f7 !important; }
html.light-mode .to-secondary { --tw-gradient-to: #4ade80 !important; }

/* Shadow adjustments */
html.light-mode .shadow-primary\/20 {
    box-shadow: 0 4px 6px -1px rgba(59, 145, 247, 0.15), 0 2px 4px -2px rgba(59, 145, 247, 0.1) !important;
}

/* Light mode text gradient should use brand colors (already correct) */

/* Keep text white on gradient buttons in light mode */
html.light-mode .gradient-primary.text-white { color: #ffffff !important; }
html.light-mode .gradient-accent.text-white { color: #ffffff !important; }

/* Labels badge in light mode - text-secondary needs to stay green */
html.light-mode .text-secondary { color: #4ade80 !important; }

/* Hover state for theme toggle button */
html.light-mode .hover\:bg-surface\/50:hover { background-color: rgba(243, 244, 246, 0.5) !important; }

/* Carousel dots inactive state */
html.light-mode .bg-on-surface-variant\/30 { background-color: rgba(156, 163, 175, 0.15) !important; }

/* ===================== SERVICE CARDS ===================== */
.service-details {
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    max-height: 0;
    opacity: 0;
}
.service-details:not(.hidden) {
    max-height: 2000px;
    opacity: 1;
}
.service-toggle .toggle-icon {
    transition: transform 0.3s ease;
}
.service-toggle.active .toggle-icon {
    transform: rotate(180deg);
}

/* ===================== BOOKING MODAL ===================== */
#booking-modal:not(.hidden) {
    display: flex;
}
#booking-modal:not(.hidden) #modal-content {
    transform: scale(1);
    opacity: 1;
}
#booking-modal #modal-content {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
#booking-modal.hidden #modal-content {
    transform: scale(0.95);
    opacity: 0;
}

/* Form inputs focus glow */
#booking-form input:focus,
#booking-form select:focus,
#booking-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(59, 145, 247, 0.15);
}

/* Select arrow */
#booking-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 20px;
}

/* Success animation */
@keyframes successPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
#form-success .material-symbols-outlined {
    animation: successPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===================== LIGHT MODE OVERRIDES FOR NEW ELEMENTS ===================== */
html.light-mode .service-card:hover {
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
}
html.light-mode #booking-form input,
html.light-mode #booking-form select,
html.light-mode #booking-form textarea {
    border-color: rgba(0, 0, 0, 0.12);
    background-color: rgba(238, 241, 245, 0.7);
    color: #111827;
}
html.light-mode #booking-form input::placeholder,
html.light-mode #booking-form textarea::placeholder {
    color: #9ca3af;
}
html.light-mode #booking-form select {
    color: #111827;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
html.light-mode #booking-form input:focus,
html.light-mode #booking-form select:focus,
html.light-mode #booking-form textarea:focus {
    border-color: #3b91f7;
    box-shadow: 0 0 0 3px rgba(59, 145, 247, 0.1);
}
html.light-mode .bg-bg-darker[class*="rounded-xl"] { background-color: rgba(232, 236, 242, 0.75) !important; }

/* ===================== SCROLL PROGRESS BAR ===================== */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b91f7, #4ade80);
    z-index: 9999;
    width: 0%;
    transition: width 50ms linear;
    will-change: width;
}

/* ===================== NEW KEYFRAMES ===================== */
@keyframes spine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes spine2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
@keyframes pulse-border {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes icon-fold {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}
@keyframes scale-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.animate-spine { animation: spine 30s linear infinite; }
.animate-spine-reverse { animation: spine2 30s linear infinite; }
.animate-pulse-border { animation: pulse-border 2s ease-out infinite; }
.animate-icon-fold { animation: icon-fold 0.5s ease; }
.animate-scale-pulse { animation: scale-pulse 3s ease-in-out infinite; }
.animate-ken-burns { animation: ken-burns 12s ease-in-out infinite alternate; }
.animate-glow-ring { animation: glow-ring 2s ease-out infinite; }

/* ===================== IMAGE REVEAL ON SCROLL ===================== */
.img-reveal {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: clip-path;
}
.img-reveal.revealed {
    clip-path: inset(0 0 0 0);
}
.img-reveal-zoom {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.img-reveal-zoom.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ===================== STAGGER REVEAL ===================== */
.stagger-children > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-children.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

/* ===================== ENHANCED SERVICE CARDS ===================== */
.service-card {
    position: relative;
    perspective: 800px;
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    filter: blur(4px);
    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.7s cubic-bezier(0.25, 1, 0.5, 1),
                filter 0.7s ease;
}
.service-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(59, 145, 247, 0.03), rgba(74, 222, 128, 0.02));
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}
.service-card:hover::after {
    opacity: 1;
}
.service-card > div {
    position: relative;
    z-index: 1;
}
.service-card:hover {
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.55);
    transform: translateY(0) scale(1) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.service-card:hover .flex.items-start.gap-6 .text-right span,
.service-card:hover .service-content > p.text-on-surface-variant,
.service-card:hover .service-content .flex.items-start span:last-child {
    color: rgba(243, 244, 246, 0.9);
}

/* 3D tilt inner depth on service card children */
.service-card .service-img {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.service-card .service-content-wrap {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.service-card:hover .service-img {
    transform: translateZ(30px) scale(1.02);
}
.service-card:hover .service-content-wrap {
    transform: translateZ(40px);
}

/* Mobile optimization */
@media (max-width: 768px) {
    .service-card {
        transform: translateY(20px) scale(0.98);
    }
}

/* ===================== IMAGE HOVER SCALE + OVERLAY ===================== */
.img-hover {
    overflow: hidden;
    border-radius: inherit;
    position: relative;
}
.img-hover img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.img-hover:hover img {
    transform: scale(1.05);
    filter: brightness(1.05) contrast(1.02);
}
.img-hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 145, 247, 0.08), rgba(74, 222, 128, 0.04));
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    border-radius: inherit;
    z-index: 2;
}
.img-hover:hover::after {
    opacity: 1;
}
@media (hover: none) {
    .img-hover img { transform: none !important; filter: none !important; }
    .img-hover::after { display: none; }
}

/* ===================== IMAGE SCROLL FADE + SLIDE-UP ===================== */
.img-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Service icon container - 3D fold on hover */
.service-icon-wrap {
    perspective: 600px;
}
.service-icon-wrap .service-icon-inner {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
    will-change: transform;
}
.service-card:hover .service-icon-wrap .service-icon-inner {
    animation: icon-fold 0.6s ease;
}

/* Service toggle button - slide swap effect */
.service-toggle {
    overflow: hidden;
    position: relative;
}
.service-toggle .toggle-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-toggle .toggle-text-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-toggle .toggle-icon {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-toggle.active .toggle-icon {
    transform: rotate(180deg);
}

/* Book now button - animated glow ring */
.book-now {
    position: relative;
    overflow: hidden;
}
.book-now::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.book-now:hover::before {
    opacity: 1;
}

/* Check list items staggered appearance */
.service-content .flex.items-start {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.service-card:hover .service-content .flex.items-start {
    opacity: 1;
    transform: translateX(0);
}
.service-card .service-content .flex.items-start:nth-child(1) { transition-delay: 0ms; }
.service-card .service-content .flex.items-start:nth-child(2) { transition-delay: 50ms; }
.service-card .service-content .flex.items-start:nth-child(3) { transition-delay: 100ms; }
.service-card .service-content .flex.items-start:nth-child(4) { transition-delay: 150ms; }
.service-card .service-content .flex.items-start:nth-child(5) { transition-delay: 200ms; }
.service-card .service-content .flex.items-start:nth-child(6) { transition-delay: 250ms; }

/* ===================== PARALLAX UTILITY ===================== */
.parallax-slow {
    will-change: transform;
    transition: transform 0.1s linear;
}
.parallax-medium {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ===================== COUNTER ANIMATION ===================== */
.stat-number {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ===================== HERO GLOW ENHANCEMENTS ===================== */
.hero-glow-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(59, 145, 247, 0.15);
    pointer-events: none;
}
.hero-glow-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(59, 145, 247, 0.4);
    pointer-events: none;
}

/* ===================== WHY-US CARDS HOVER ===================== */
.why-us-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, background-color 0.3s ease;
}
.why-us-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.3);
}
.why-us-card .why-us-icon {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-us-card:hover .why-us-icon {
    transform: scale(1.15);
}

/* ===================== INSIGHT CAROUSEL ENHANCEMENT ===================== */
.insight-slide {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.dot-indicator {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===================== BLOG CARD ENHANCEMENT ===================== */
.blog-card {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.4);
}

/* ===================== MOBILE & REDUCED MOTION ===================== */
@media (max-width: 768px) {
    .parallax-slow,
    .parallax-medium {
        transform: none !important;
    }
    .service-card::after {
        display: none;
    }
    .service-card:hover {
        transform: translateY(-3px);
    }
    .why-us-card:hover {
        transform: translateY(-2px);
    }
    .img-reveal {
        clip-path: none;
        opacity: 0;
        transition: opacity 0.6s ease;
    }
    .img-reveal.revealed {
        opacity: 1;
    }
    .hero-glow-ring,
    .hero-glow-dot {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .parallax-slow,
    .parallax-medium {
        transform: none !important;
    }
    .img-reveal {
        clip-path: none;
        opacity: 1;
    }
    .img-reveal-zoom {
        opacity: 1;
        transform: scale(1);
    }
    .stagger-children > * {
        opacity: 1;
        transform: translateY(0);
    }
    .service-card {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    .service-content .flex.items-start {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===================== LIGHT MODE OVERRIDES NEW ===================== */
html.light-mode .service-card:hover {
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.12);
}
html.light-mode .service-card:hover .flex.items-start.gap-6 .text-right span,
html.light-mode .service-card:hover .service-content > p.text-on-surface-variant,
html.light-mode .service-card:hover .service-content .flex.items-start span:last-child {
    color: #374151 !important;
}
html.light-mode .service-card::after {
    background: linear-gradient(135deg, rgba(59, 145, 247, 0.04), rgba(74, 222, 128, 0.02));
}
html.light-mode .why-us-card:hover {
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.08);
}
html.light-mode .blog-card:hover {
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.08);
}
html.light-mode #scroll-progress {
    background: linear-gradient(90deg, #3b91f7, #4ade80);
}
html.light-mode .hero-glow-ring {
    border-color: rgba(59, 145, 247, 0.1);
}
html.light-mode .hero-glow-dot {
    background: rgba(59, 145, 247, 0.3);
}
html.light-mode .bg-secondary\/8 {
    background-color: rgba(74, 222, 128, 0.08) !important;
}
html.light-mode .img-hover::after {
    background: linear-gradient(135deg, rgba(59, 145, 247, 0.04), rgba(74, 222, 128, 0.02));
}

/* ===================== BACKGROUND ROCKET ===================== */
#bg-rocket {
    transition: opacity 0.6s ease;
    will-change: bottom, opacity;
    z-index: 0;
    pointer-events: none;
}
#bg-rocket .material-symbols-outlined {
    font-size: 5rem;
    line-height: 1;
    transition: filter 0.3s ease;
}

/* ===================== WHATSAPP FLOATING BUTTON ===================== */
#floating-btns {
    bottom: 24px;
    left: 24px;
}
#consultation-label {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
#consultation-label.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#whatsapp-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    animation: whatsapp-pulse 2s ease-in-out infinite;
}
#whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
    animation: none;
}
#whatsapp-btn i {
    line-height: 1;
}
@keyframes whatsapp-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35); }
    50% { box-shadow: 0 4px 24px rgba(37, 211, 102, 0.55); }
}
html.light-mode #whatsapp-btn {
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
}
html.light-mode #whatsapp-btn:hover {
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
}

/* ===================== REDUCED MOTION OVERRIDES ===================== */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-card:hover {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
    .service-card > div,
    .service-card .service-img,
    .service-card .service-content-wrap {
        transform: none !important;
        transition: none !important;
    }
    #bg-rocket {
        display: none !important;
    }
    #whatsapp-btn {
        animation: none !important;
    }
}

/* ===================== BACK TO TOP BUTTON ===================== */
#back-to-top {
    position: fixed;
    bottom: 92px;
    left: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b91f7, #1d4ed8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 45;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
    box-shadow: 0 4px 12px rgba(59, 145, 247, 0.3);
    cursor: pointer;
    border: none;
    font-size: 20px;
}
#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#back-to-top:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(59, 145, 247, 0.4);
}
html.light-mode #back-to-top {
    box-shadow: 0 4px 12px rgba(59, 145, 247, 0.2);
}

/* ===================== MOBILE OVERLAY ===================== */
#mobile-nav {
    transition: opacity 0.3s ease;
}
#mobile-nav:not(.hidden) {
    display: flex;
    animation: mobileFadeIn 0.3s ease;
}
@keyframes mobileFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===================== GRADIENT SECTION BORDER ===================== */
.section-bordered {
    border-top: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
}
.section-bordered::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 145, 247, 0.2), rgba(74, 222, 128, 0.2), transparent);
    pointer-events: none;
}
html.light-mode .section-bordered::before {
    background: linear-gradient(90deg, transparent, rgba(59, 145, 247, 0.12), rgba(74, 222, 128, 0.12), transparent);
}

/* ===================== ACCENT COLOR LIGHT MODE ===================== */
html.light-mode .text-accent { color: #d97706 !important; }
html.light-mode .bg-accent\/10 { background-color: rgba(217, 119, 6, 0.08) !important; }
html.light-mode .border-accent\/20 { border-color: rgba(217, 119, 6, 0.15) !important; }
html.light-mode .border-accent\/25 { border-color: rgba(217, 119, 6, 0.18) !important; }
html.light-mode .border-accent\/40 { border-color: rgba(217, 119, 6, 0.25) !important; }
html.light-mode .hover\:bg-accent\/15:hover { background-color: rgba(217, 119, 6, 0.1) !important; }
html.light-mode .gradient-accent-warm {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* ===================== BLOG SKELETON LOADING ===================== */
.blog-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
    border-radius: 16px;
}
html.light-mode .blog-skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%);
    background-size: 200% 100%;
}

/* ===================== SERVICE NUMBER BADGE GLOW ===================== */
.service-card .rounded-full.gradient-accent-warm {
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.service-card:hover .rounded-full.gradient-accent-warm {
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
    transform: scale(1.1);
}

/* ===================== LTR / FRENCH LAYOUT ===================== */
html[dir="ltr"] body {
    text-align: left;
}

html[dir="ltr"] .text-right {
    text-align: left !important;
}

html[dir="ltr"] .md\:flex-row-reverse {
    flex-direction: row !important;
}

html[dir="ltr"] .flex-row-reverse {
    flex-direction: row !important;
}

html[dir="ltr"] .md\:flex-row {
    flex-direction: row-reverse !important;
}

html[dir="ltr"] .justify-end {
    justify-content: flex-start !important;
}

html[dir="ltr"] .space-y-3 .flex.items-start {
    flex-direction: row;
}

html[dir="ltr"] .sm\:flex-row-reverse {
    flex-direction: row !important;
}

html[dir="ltr"] #booking-form select {
    background-position: right 12px center;
}

/* Service card number badge */
html[dir="ltr"] .inline-flex.items-center.gap-2.bg-accent {
    flex-direction: row;
}

/* Google map container iframe positioning */
html[dir="ltr"] iframe[title] {
    direction: ltr;
}

/* Hero image stays same regardless of direction */
html[dir="ltr"] .hero-image-wrapper {
    order: 0;
}

/* Blog cards RTL fix */
html[dir="ltr"] .blog-card {
    text-align: left;
}

/* Why us cards */
html[dir="ltr"] .why-us-card .flex.gap-4 {
    flex-direction: row;
}

/* Insight slides RTL override */
html[dir="ltr"] .translate-x-12 {
    --tw-translate-x: -3rem !important;
}

html[dir="ltr"] .-translate-x-1\/2 {
    --tw-translate-x: 50% !important;
}

/* Modal RTL fix */
html[dir="ltr"] #booking-modal label {
    text-align: left;
}

html[dir="ltr"] #booking-form select {
    text-align: left;
    padding-right: 12px;
    padding-left: 36px;
}

/* Footer */
html[dir="ltr"] footer .md\:flex-row-reverse {
    flex-direction: row !important;
}

html[dir="ltr"] footer .justify-end {
    justify-content: flex-start !important;
}

html[dir="ltr"] footer .flex-row-reverse {
    flex-direction: row !important;
}

/* Mobile nav */
html[dir="ltr"] .left-\[-10\%\] {
    left: auto;
    right: -10%;
}
html[dir="ltr"] .right-\[-10\%\] {
    right: auto;
    left: -10%;
}

html[dir="ltr"] .left-\[-15\%\] {
    left: auto;
    right: -15%;
}

html[dir="ltr"] .right-\[8\%\] {
    right: auto;
    left: 8%;
}

html[dir="ltr"] #floating-btns {
    left: 24px;
    right: auto;
    flex-direction: row-reverse;
}

html[dir="ltr"] #back-to-top {
    left: 24px;
    right: auto;
}

html[dir="ltr"] .fixed.right-\[-10\%\] {
    right: auto;
    left: -10%;
}

/* Blob positions LTR - mirror them */
html[dir="ltr"] .fixed.top-\[10\%\].right-\[-10\%\] {
    right: auto;
    left: -10%;
}

html[dir="ltr"] .fixed.top-\[45\%\].left-\[-15\%\] {
    left: auto;
    right: -15%;
}

html[dir="ltr"] .fixed.bottom-\[8\%\].right-\[-12\%\] {
    right: auto;
    left: -12%;
}

/* Fix insight carousel initial translate direction */
html[dir="ltr"] .insight-slide {
    direction: ltr;
}

/* Service toggle icon direction */
html[dir="ltr"] .group-hover\:translate-x-1:hover {
    --tw-translate-x: -0.25rem !important;
}