/**
 * WOW Animations - Premium Visual Effects
 * Stunning, jaw-dropping animations for public pages
 */

/* ================================================
   CSS CUSTOM PROPERTIES
   ================================================ */
:root {
    /* Aurora gradient colors */
    --aurora-1: #003875;
    --aurora-2: #0096c7;
    --aurora-3: #00b4d8;
    --aurora-4: #48cae4;
    --aurora-5: #90e0ef;

    /* Glow colors */
    --glow-primary: rgba(0, 150, 199, 0.6);
    --glow-accent: rgba(0, 180, 216, 0.4);
    --glow-white: rgba(255, 255, 255, 0.15);

    /* Animation timings */
    --animation-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --animation-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ================================================
   TYPEWRITER EFFECT
   ================================================ */
.typewriter-text {
    display: inline;
}

.typewriter-cursor {
    display: inline-block;
    animation: blink 0.7s step-end infinite;
    font-weight: 300;
    color: var(--aurora-3);
    margin-left: 2px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ================================================
   HERO IMAGE EXPAND ANIMATION (Delayed Start)
   ================================================ */
.hero-image-rotate {
    animation: heroExpand 3s ease-in-out 3;
    /* Runs only 3 times */
    animation-delay: 4s;
    /* Starts after other hero animations */
    animation-fill-mode: forwards;
    /* Stays at final state after animation ends */
    transform-origin: center center;
}

@keyframes heroExpand {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.hero-image-rotate:hover {
    animation: none;
    transform: scale(1) !important;
}

/* ================================================
   ICON POP ANIMATION
   ================================================ */
.icon-pop {
    display: inline-block;
    animation: iconPop 2s ease-in-out infinite;
}

@keyframes iconPop {

    0%,
    70%,
    100% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.3);
    }

    80% {
        transform: scale(0.95);
    }

    85% {
        transform: scale(1.15);
    }

    90% {
        transform: scale(1);
    }
}

/* ================================================
   BUTTON SHAKE ANIMATION
   ================================================ */
.btn-shake {
    animation: btnShake 3s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes btnShake {

    0%,
    85%,
    100% {
        transform: translateX(0);
    }

    87% {
        transform: translateX(-5px) rotate(-1deg);
    }

    89% {
        transform: translateX(5px) rotate(1deg);
    }

    91% {
        transform: translateX(-4px) rotate(-1deg);
    }

    93% {
        transform: translateX(4px) rotate(1deg);
    }

    95% {
        transform: translateX(-2px);
    }

    97% {
        transform: translateX(2px);
    }
}

.btn-shake:hover {
    animation-play-state: paused;
}

/* ================================================
   BADGE POP ANIMATION (Checkmark style one-by-one)
   ================================================ */
.badge-pop {
    opacity: 0;
    transform: translateX(-20px) scale(0.8);
    animation: badgePopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: var(--badge-delay, 3s);
}

@keyframes badgePopIn {
    0% {
        opacity: 0;
        transform: translateX(-20px) scale(0.8);
    }

    60% {
        opacity: 1;
        transform: translateX(5px) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Circle icon check animation */
.badge-check {
    position: relative;
    transform: scale(0);
    animation: badgeCheckPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: calc(var(--badge-delay, 3s) + 0.1s);
}

.badge-pop:nth-child(1) .badge-check {
    animation-delay: 3.6s;
}

.badge-pop:nth-child(2) .badge-check {
    animation-delay: 4.1s;
}

.badge-pop:nth-child(3) .badge-check {
    animation-delay: 4.6s;
}

@keyframes badgeCheckPop {
    0% {
        transform: scale(0) rotate(-45deg);
    }

    50% {
        transform: scale(1.2) rotate(5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ================================================
   SERVICE CARD 3D FLIP EFFECT
   ================================================ */
.flip-card {
    perspective: 1000px;
    height: 280px;
    /* Isolate each card's stacking context */
    position: relative;
    z-index: 1;
    isolation: isolate;
}

/* Raise z-index only on hover so flipping card stays on top */
.flip-card:hover {
    z-index: 10;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1rem;
    overflow: hidden;
}

.flip-card-front {
    background-size: cover;
    background-position: center;
}

.flip-card-back {
    /* Dusty/Weathered Pallet Design - matching navigation */
    background: #f5f0e8 !important;
    /* Dusty cream base */
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    /* Maroon accent border matching navigation */
    border: 3px solid rgba(123, 30, 30, 0.25);
    pointer-events: auto;
    z-index: 10;
    /* Dusty texture gradient - simulates weathered wood/pallet */
    background-image:
        /* Subtle grain/noise effect */
        repeating-linear-gradient(90deg,
            transparent 0px,
            rgba(139, 119, 101, 0.04) 1px,
            transparent 2px,
            transparent 4px),
        /* Aged gradient overlay */
        linear-gradient(135deg,
            rgba(245, 240, 232, 1) 0%,
            rgba(235, 228, 215, 0.95) 25%,
            rgba(240, 234, 222, 0.98) 50%,
            rgba(232, 225, 210, 0.95) 75%,
            rgba(245, 240, 232, 1) 100%),
        /* Subtle stain spots for weathered look */
        radial-gradient(ellipse at 15% 25%, rgba(139, 119, 101, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 75%, rgba(139, 119, 101, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 10%, rgba(139, 119, 101, 0.04) 0%, transparent 35%) !important;
    /* Inner shadows for aged/worn effect */
    box-shadow:
        0 8px 25px rgba(123, 30, 30, 0.15),
        inset 0 2px 4px rgba(139, 119, 101, 0.15),
        inset 0 -2px 4px rgba(139, 119, 101, 0.1),
        inset 3px 0 6px rgba(139, 119, 101, 0.08),
        inset -3px 0 6px rgba(139, 119, 101, 0.08);
}

.flip-card-back h4 {
    color: #7b1e1e;
    /* Maroon matching navigation links */
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.flip-card-back ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    text-align: left;
    display: inline-block;
}

.flip-card-back ul li {
    color: #5a4a42;
    /* Dark brown for readability on cream */
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    padding-left: 1.5rem;
    position: relative;
    text-align: left;
    font-weight: 500;
}

.flip-card-back ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #7b1e1e;
    /* Maroon checkmarks */
    font-weight: bold;
}

.flip-card-back .btn-flip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Maroon gradient button */
    background: linear-gradient(135deg, #7b1e1e 0%, #9a2424 100%);
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
    position: relative;
    z-index: 100;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(123, 30, 30, 0.3);
}

.flip-card-back .btn-flip:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(123, 30, 30, 0.4);
    background: linear-gradient(135deg, #9a2424 0%, #7b1e1e 100%);
}

/* ================================================
   WHY CHOOSE SECTION - ANIMATED ICONS
   ================================================ */

/* Quality Badge - Changes to Yellow on viewport */
.icon-quality-badge {
    transition: all 0.6s ease;
}

.icon-quality-badge.animate-active {
    color: #fbbf24 !important;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
    animation: qualityShine 2s ease-in-out infinite;
}

@keyframes qualityShine {

    0%,
    100% {
        text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
    }

    50% {
        text-shadow: 0 0 30px rgba(251, 191, 36, 0.9), 0 0 40px rgba(251, 191, 36, 0.4);
    }
}

/* Clock - Rotating animation */
.icon-clock-rotate {
    display: inline-block;
    animation: clockRotate 10s linear infinite;
}

@keyframes clockRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Dollar - Expand and Contract pulse */
.icon-dollar-pulse {
    display: inline-block;
    animation: dollarPulse 1.5s ease-in-out infinite;
}

@keyframes dollarPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

/* Emergency - Red glow pulsing like emergency light */
.icon-emergency-glow {
    animation: emergencyGlow 1s ease-in-out infinite alternate;
}

.icon-emergency-glow-container {
    animation: emergencyContainerGlow 1s ease-in-out infinite alternate;
}

@keyframes emergencyGlow {
    0% {
        color: #f87171;
        text-shadow: 0 0 10px rgba(248, 113, 113, 0.5);
    }

    100% {
        color: #dc2626;
        text-shadow: 0 0 25px rgba(220, 38, 38, 0.9), 0 0 35px rgba(220, 38, 38, 0.6);
    }
}

@keyframes emergencyContainerGlow {
    0% {
        background: linear-gradient(135deg, rgba(248, 113, 113, 0.2), rgba(220, 38, 38, 0.2));
        border-color: rgba(248, 113, 113, 0.3);
        box-shadow: 0 0 15px rgba(248, 113, 113, 0.3);
    }

    100% {
        background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.3));
        border-color: rgba(220, 38, 38, 0.5);
        box-shadow: 0 0 30px rgba(220, 38, 38, 0.5), 0 0 40px rgba(220, 38, 38, 0.3);
    }
}

/* Pointing Hand Animation */
.pointing-hand-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.pointing-hand {
    font-size: 2.5rem;
    color: #fbbf24;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5));
}

.pointing-hand-left {
    animation: pointingBounceLeft 1s ease-in-out infinite;
}

.pointing-hand-right {
    animation: pointingBounceRight 1s ease-in-out infinite;
}

@keyframes pointingBounceLeft {

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

    50% {
        transform: translateX(8px);
    }
}

@keyframes pointingBounceRight {

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

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

/* Why Choose Grid - Rotate in from top-right */
.why-choose-card {
    opacity: 0;
    transform: translateX(100px) translateY(-50px) rotateY(45deg);
    animation: rotateInFromTopRight 0.8s ease-out forwards;
    perspective: 1000px;
}

.why-choose-card:nth-child(1) {
    animation-delay: 0.1s;
}

.why-choose-card:nth-child(2) {
    animation-delay: 0.3s;
}

.why-choose-card:nth-child(3) {
    animation-delay: 0.5s;
}

.why-choose-card:nth-child(4) {
    animation-delay: 0.7s;
}

@keyframes rotateInFromTopRight {
    0% {
        opacity: 0;
        transform: translateX(100px) translateY(-50px) rotateY(45deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotateY(0deg);
    }
}

/* ================================================
   WHY CHOOSE FLIP CARD EFFECT (2D - stays in bounds)
   ================================================ */
.why-choose-flip-card {
    height: 380px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 1.5rem;
}

.why-choose-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.why-choose-flip-card-front,
.why-choose-flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.why-choose-flip-card-front {
    opacity: 1;
    transform: scale(1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.why-choose-flip-card-back {
    opacity: 0;
    transform: scale(0.95);
    z-index: 1;
    /* Dusty/Weathered Pallet Design */
    background: #f5f0e8 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    /* Maroon accent border */
    border: 3px solid rgba(123, 30, 30, 0.25);
    /* Dusty texture gradient */
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0px,
            rgba(139, 119, 101, 0.04) 1px,
            transparent 2px,
            transparent 4px),
        linear-gradient(135deg,
            rgba(245, 240, 232, 1) 0%,
            rgba(235, 228, 215, 0.95) 25%,
            rgba(240, 234, 222, 0.98) 50%,
            rgba(232, 225, 210, 0.95) 75%,
            rgba(245, 240, 232, 1) 100%),
        radial-gradient(ellipse at 15% 25%, rgba(139, 119, 101, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 75%, rgba(139, 119, 101, 0.06) 0%, transparent 40%) !important;
    /* Inner shadows for aged effect */
    box-shadow:
        0 8px 25px rgba(123, 30, 30, 0.15),
        inset 0 2px 4px rgba(139, 119, 101, 0.15),
        inset 0 -2px 4px rgba(139, 119, 101, 0.1),
        inset 3px 0 6px rgba(139, 119, 101, 0.08),
        inset -3px 0 6px rgba(139, 119, 101, 0.08);
}

/* Hover effect - fade transition */
.why-choose-flip-card:hover .why-choose-flip-card-front {
    opacity: 0;
    transform: scale(0.95);
    z-index: 1;
}

.why-choose-flip-card:hover .why-choose-flip-card-back {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.why-choose-flip-card-back h4 {
    color: #7b1e1e;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.why-choose-flip-card-back .back-description {
    color: #5a4a42;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    font-weight: 500;
}

.why-choose-flip-card-back ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    text-align: left;
}

.why-choose-flip-card-back ul li {
    color: #5a4a42;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    padding-left: 1.75rem;
    position: relative;
    font-weight: 500;
}

.why-choose-flip-card-back ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #7b1e1e;
    font-weight: bold;
    font-size: 1rem;
}

.why-choose-flip-card-back .btn-flip-why {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7b1e1e 0%, #9a2424 100%);
    color: #fff;
    padding: 0.65rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
    box-shadow: 0 4px 15px rgba(123, 30, 30, 0.3);
}

.why-choose-flip-card-back .btn-flip-why:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(123, 30, 30, 0.4);
    background: linear-gradient(135deg, #9a2424 0%, #7b1e1e 100%);
    color: #fff;
}

/* Decorative glow on front */
.why-choose-flip-card-front .decorative-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    opacity: 0.1;
    filter: blur(60px);
    transform: translate(30%, -30%);
}

/* Hover hint text */
.why-choose-flip-card-front .hover-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.why-choose-flip-card-front .hover-hint i {
    animation: rotateHint 2s ease-in-out infinite;
}

@keyframes rotateHint {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
}

/* ================================================
   1. AURORA GRADIENT BACKGROUNDS
   ================================================ */
.aurora-bg {
    position: relative;
    overflow: hidden;
}

/* ================================================
   OUR STORY SECTION ANIMATIONS
   ================================================ */

/* Premium font for story section */
.story-title {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Word expand animation */
.word-expand {
    display: inline-block;
    animation: wordExpand 1s ease-out forwards;
    opacity: 0;
    transform: scale(0.5);
}

.word-expand-1 {
    animation-delay: 0.2s;
}

.word-expand-2 {
    animation-delay: 1s;
}

@keyframes wordExpand {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Story Paragraph Staggered Animation */
.story-paragraph {
    opacity: 0;
    transform: translateY(20px);
    animation: storyReveal 0.8s ease-out forwards;
}

.story-paragraph-1 {
    animation-delay: 1.5s;
}

.story-paragraph-2 {
    animation-delay: 2.2s;
}

.story-paragraph-3 {
    animation-delay: 2.9s;
}

@keyframes storyReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Story section styling */
.story-section-premium {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.story-section-premium .lead {
    font-size: 1.25rem;
    line-height: 1.8;
    font-weight: 400;
}

.story-section-premium p {
    font-size: 1.1rem;
    line-height: 1.9;
}

/* ================================================
   EXPERT TECHNICIANS SECTION ANIMATIONS
   ================================================ */

/* Team card scale-in animation */
.team-card-animated {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
}

.team-card-animated.animated {
    animation: teamCardReveal 0.7s ease-out forwards;
}

.team-card-animated:nth-child(1) {
    animation-delay: 0.1s;
}

.team-card-animated:nth-child(2) {
    animation-delay: 0.25s;
}

.team-card-animated:nth-child(3) {
    animation-delay: 0.4s;
}

.team-card-animated:nth-child(4) {
    animation-delay: 0.55s;
}

@keyframes teamCardReveal {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Team card hover effects */
.team-card-premium {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.team-card-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, rgba(0, 150, 199, 0.5), rgba(0, 56, 117, 0.2), rgba(0, 150, 199, 0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.team-card-premium:hover::before {
    opacity: 1;
}

.team-card-premium:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 150, 199, 0.2);
}

/* Icon spin on hover */
.team-card-premium .icon-box-lg {
    transition: transform 0.5s ease, box-shadow 0.4s ease;
}

.team-card-premium:hover .icon-box-lg {
    transform: rotateY(360deg);
    box-shadow: 0 0 30px rgba(0, 150, 199, 0.4);
}

/* ================================================
   STATS SECTION ANIMATIONS
   ================================================ */
.stat-item-animated {
    opacity: 0;
    transform: scale(0.5);
}

.stat-item-animated.animated {
    animation: statPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.stat-item-animated:nth-child(1) {
    animation-delay: 0.2s;
}

.stat-item-animated:nth-child(2) {
    animation-delay: 0.4s;
}

.stat-item-animated:nth-child(3) {
    animation-delay: 0.6s;
}

.stat-item-animated:nth-child(4) {
    animation-delay: 0.8s;
}

@keyframes statPopIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ================================================
   CERTIFICATION SECTION ANIMATIONS
   ================================================ */
.cert-card-animated {
    opacity: 0;
    transform: translateY(30px);
}

.cert-card-animated.animated {
    animation: certCardSlideUp 0.8s ease-out forwards;
}

.cert-card-animated:nth-child(1) {
    animation-delay: 0.2s;
}

.cert-card-animated:nth-child(2) {
    animation-delay: 0.4s;
}

.cert-card-animated:nth-child(3) {
    animation-delay: 0.6s;
}

.cert-card-animated:nth-child(4) {
    animation-delay: 0.8s;
}

@keyframes certCardSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   CONTACT PAGE ANIMATIONS
   ================================================ */

/* Contact Cards Premium */
.contact-card-premium {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s ease;
}

.contact-card-premium.animated {
    animation: contactCardPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.contact-card-premium:nth-child(1) {
    animation-delay: 0.1s;
}

.contact-card-premium:nth-child(2) {
    animation-delay: 0.25s;
}

.contact-card-premium:nth-child(3) {
    animation-delay: 0.4s;
}

.contact-card-premium:hover {
    transform: translateY(-10px);
}

@keyframes contactCardPop {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contact Form Animation */
.form-card-animated {
    opacity: 0;
    transform: translateX(50px);
}

.form-card-animated.animated {
    animation: formSlideIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.3s;
}

@keyframes formSlideIn {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Map Animation */
.map-animated {
    opacity: 0;
    transform: scale(0.95);
}

.map-animated.animated {
    animation: mapReveal 1s ease-out forwards;
    animation-delay: 0.4s;
}

@keyframes mapReveal {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Emergency Services Cards */
.emergency-card-animated {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s ease;
}

.emergency-card-animated.animated {
    animation: emergencyCardUp 0.8s ease-out forwards;
}

.emergency-card-animated:nth-child(1) {
    animation-delay: 0.2s;
}

.emergency-card-animated:nth-child(2) {
    animation-delay: 0.4s;
}

.emergency-card-animated:nth-child(3) {
    animation-delay: 0.6s;
}

.emergency-card-animated:hover {
    transform: translateY(-8px) scale(1.02);
}

@keyframes emergencyCardUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulsing icon for emergency card */
.team-card-emergency .icon-box-lg {
    animation: emergencyPulse 2s ease-in-out infinite;
}

@keyframes emergencyPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.4);
    }

    50% {
        box-shadow: 0 0 20px 5px rgba(251, 146, 60, 0.6);
    }
}

/* ================================================
   PRODUCT PAGE ANIMATIONS
   ================================================ */

/* Product Cards Staggered Reveal */
.product-card-animated {
    opacity: 0;
    transform: scale(0.9);
}

.product-card-animated.animated {
    animation: productCardReveal 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.product-card-animated:nth-child(1) {
    animation-delay: 0.1s;
}

.product-card-animated:nth-child(2) {
    animation-delay: 0.2s;
}

.product-card-animated:nth-child(3) {
    animation-delay: 0.3s;
}

.product-card-animated:nth-child(4) {
    animation-delay: 0.4s;
}

.product-card-animated:nth-child(5) {
    animation-delay: 0.5s;
}

.product-card-animated:nth-child(6) {
    animation-delay: 0.6s;
}

/* ... generic delay for others if needed, or rely on scroll trigger */

@keyframes productCardReveal {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Filter Section Animation */
.filter-animated {
    opacity: 0;
    transform: translateY(-20px);
}

.filter-animated.animated {
    animation: filterSlideDown 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

@keyframes filterSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Login Card Animation */
.login-card-animated {
    opacity: 0;
    transform: translateY(20px);
}

.login-card-animated.animated {
    animation: loginCardUp 0.8s ease-out forwards;
    animation-delay: 0.1s;
}

@keyframes loginCardUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   WHY CHOOSE SECTION - CHECKMARK REVEAL ANIMATION
   ================================================ */

/* Checklist items hidden initially */
.check-reveal-item {
    opacity: 0;
    transform: translateX(-20px);
}

/* When parent card gets 'animated' class, reveal items with stagger */
.why-choose-card.animated .check-reveal-item {
    animation: checkReveal 0.5s ease-out forwards;
}

.why-choose-card.animated .check-reveal-item:nth-child(1) {
    animation-delay: 0.7s;
}

.why-choose-card.animated .check-reveal-item:nth-child(2) {
    animation-delay: 0.9s;
}

.why-choose-card.animated .check-reveal-item:nth-child(3) {
    animation-delay: 1.1s;
}

.why-choose-card.animated .check-reveal-item:nth-child(4) {
    animation-delay: 1.3s;
}

@keyframes checkReveal {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    50% {
        opacity: 1;
        transform: translateX(5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Checkmark icon bounce effect */
.check-reveal-item .fa-check-circle {
    transition: transform 0.3s ease, color 0.3s ease;
}

.why-choose-card.animated .check-reveal-item .fa-check-circle {
    animation: checkBounce 0.4s ease-out forwards;
    animation-delay: inherit;
}

@keyframes checkBounce {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.aurora-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            var(--aurora-1) 0%,
            var(--aurora-2) 25%,
            var(--aurora-3) 50%,
            var(--aurora-2) 75%,
            var(--aurora-1) 100%);
    background-size: 400% 400%;
    animation: auroraFlow 15s ease infinite;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

@keyframes auroraFlow {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        background-position: 0% 50%;
    }

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

    50% {
        transform: translate(-10%, -10%) rotate(3deg);
        background-position: 0% 50%;
    }

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

/* Hero-specific aurora */
.hero-section.aurora-bg::before {
    opacity: 0.2;
}

/* ================================================
   2. SHIMMER & GLOW EFFECTS
   ================================================ */
.shimmer-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.shimmer-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    animation: shimmer 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

/* Pulsing glow effect */
.glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 20px var(--glow-primary),
            0 0 40px var(--glow-accent);
    }

    50% {
        box-shadow: 0 0 30px var(--glow-primary),
            0 0 60px var(--glow-accent),
            0 0 80px var(--glow-accent);
    }
}

/* Neon border glow */
.neon-border {
    position: relative;
}

.neon-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(45deg, var(--aurora-2), var(--aurora-4), var(--aurora-2));
    background-size: 200% 200%;
    animation: neonRotate 4s linear infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.neon-border:hover::after {
    opacity: 1;
}

@keyframes neonRotate {
    0% {
        background-position: 0% 50%;
    }

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

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

/* ================================================
   3. GLASSMORPHISM CARDS
   ================================================ */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s var(--animation-smooth);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

/* Dark glass variant */
.glass-card-dark {
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 150, 199, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s var(--animation-smooth);
}

.glass-card-dark:hover {
    background: rgba(2, 6, 23, 0.85);
    border-color: rgba(0, 150, 199, 0.4);
    transform: translateY(-5px) scale(1.01);
}

/* ================================================
   4. 3D TILT CARDS
   ================================================ */
.tilt-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.6s var(--animation-smooth);
}

.tilt-3d:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.02);
}

.tilt-3d-inner {
    transform: translateZ(30px);
    transition: transform 0.6s var(--animation-smooth);
}

.tilt-3d:hover .tilt-3d-inner {
    transform: translateZ(50px);
}

/* ================================================
   5. TEXT REVEAL ANIMATIONS
   ================================================ */
.text-reveal {
    overflow: hidden;
}

.text-reveal-line {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    animation: textRevealUp 0.8s var(--animation-elastic) forwards;
}

.text-reveal-line:nth-child(2) {
    animation-delay: 0.1s;
}

.text-reveal-line:nth-child(3) {
    animation-delay: 0.2s;
}

.text-reveal-line:nth-child(4) {
    animation-delay: 0.3s;
}

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

/* Gradient text animation */
.text-gradient-animate {
    background: linear-gradient(90deg,
            var(--aurora-2),
            var(--aurora-4),
            var(--aurora-5),
            var(--aurora-4),
            var(--aurora-2));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradientFlow 4s linear infinite;
}

@keyframes textGradientFlow {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Type reveal effect */
.text-type-reveal {
    overflow: hidden;
    white-space: nowrap;
    animation: typeReveal 2s steps(40, end) forwards;
}

@keyframes typeReveal {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* ================================================
   6. FLOATING PARTICLES
   ================================================ */
.particle-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(0, 150, 199, 0.4);
    border-radius: 50%;
    animation: particleFloat 8s ease-in-out infinite;
}

.particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.particle:nth-child(2) {
    left: 25%;
    animation-delay: 1s;
    animation-duration: 10s;
}

.particle:nth-child(3) {
    left: 40%;
    animation-delay: 2s;
    animation-duration: 14s;
}

.particle:nth-child(4) {
    left: 55%;
    animation-delay: 0.5s;
    animation-duration: 11s;
}

.particle:nth-child(5) {
    left: 70%;
    animation-delay: 1.5s;
    animation-duration: 13s;
}

.particle:nth-child(6) {
    left: 85%;
    animation-delay: 2.5s;
    animation-duration: 9s;
}

.particle:nth-child(7) {
    left: 15%;
    animation-delay: 3s;
    animation-duration: 15s;
}

.particle:nth-child(8) {
    left: 60%;
    animation-delay: 3.5s;
    animation-duration: 11s;
}

@keyframes particleFloat {

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

    10% {
        opacity: 0.6;
        transform: translateY(80vh) scale(1);
    }

    90% {
        opacity: 0.6;
        transform: translateY(-10vh) scale(1);
    }

    100% {
        transform: translateY(-20vh) scale(0);
        opacity: 0;
    }
}

/* Glowing orbs variant */
.particle-glow {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, rgba(0, 150, 199, 0.8) 0%, transparent 70%);
    box-shadow: 0 0 20px var(--glow-primary);
}

/* ================================================
   7. STAGGERED ENTRANCE ANIMATIONS
   ================================================ */
.stagger-entrance>* {
    opacity: 0;
    transform: translateY(30px);
}

.stagger-entrance.visible>* {
    animation: staggerUp 0.6s var(--animation-smooth) forwards;
}

.stagger-entrance.visible>*:nth-child(1) {
    animation-delay: 0ms;
}

.stagger-entrance.visible>*:nth-child(2) {
    animation-delay: 80ms;
}

.stagger-entrance.visible>*:nth-child(3) {
    animation-delay: 160ms;
}

.stagger-entrance.visible>*:nth-child(4) {
    animation-delay: 240ms;
}

.stagger-entrance.visible>*:nth-child(5) {
    animation-delay: 320ms;
}

.stagger-entrance.visible>*:nth-child(6) {
    animation-delay: 400ms;
}

.stagger-entrance.visible>*:nth-child(7) {
    animation-delay: 480ms;
}

.stagger-entrance.visible>*:nth-child(8) {
    animation-delay: 560ms;
}

.stagger-entrance.visible>*:nth-child(9) {
    animation-delay: 640ms;
}

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

/* Scale variant - Fast pop-in effect */
.stagger-scale>* {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
}

.stagger-scale.visible>* {
    animation: staggerScalePop 0.4s var(--animation-elastic) forwards;
}

.stagger-scale.visible>*:nth-child(1) {
    animation-delay: 0ms;
}

.stagger-scale.visible>*:nth-child(2) {
    animation-delay: 60ms;
}

.stagger-scale.visible>*:nth-child(3) {
    animation-delay: 120ms;
}

.stagger-scale.visible>*:nth-child(4) {
    animation-delay: 180ms;
}

.stagger-scale.visible>*:nth-child(5) {
    animation-delay: 240ms;
}

.stagger-scale.visible>*:nth-child(6) {
    animation-delay: 300ms;
}

.stagger-scale.visible>*:nth-child(7) {
    animation-delay: 360ms;
}

.stagger-scale.visible>*:nth-child(8) {
    animation-delay: 420ms;
}

.stagger-scale.visible>*:nth-child(9) {
    animation-delay: 480ms;
}

.stagger-scale.visible>*:nth-child(10) {
    animation-delay: 540ms;
}

.stagger-scale.visible>*:nth-child(11) {
    animation-delay: 600ms;
}

.stagger-scale.visible>*:nth-child(12) {
    animation-delay: 660ms;
}

@keyframes staggerScalePop {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }

    60% {
        opacity: 1;
        transform: scale(1.05) translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ================================================
   8. MAGNETIC HOVER EFFECT
   ================================================ */
.magnetic-hover {
    transition: transform 0.3s var(--animation-smooth);
    cursor: pointer;
}

/* JS will handle the magnetic effect calculations */

/* ================================================
   9. REVEAL MASKS (Clip-path animations)
   ================================================ */
.reveal-mask {
    clip-path: inset(100% 0 0 0);
    animation: revealMask 1s var(--animation-smooth) forwards;
}

@keyframes revealMask {
    to {
        clip-path: inset(0 0 0 0);
    }
}

.reveal-mask-left {
    clip-path: inset(0 100% 0 0);
    animation: revealMaskLeft 1s var(--animation-smooth) forwards;
}

@keyframes revealMaskLeft {
    to {
        clip-path: inset(0 0 0 0);
    }
}

.reveal-mask-center {
    clip-path: inset(0 50%);
    animation: revealMaskCenter 0.8s var(--animation-smooth) forwards;
}

@keyframes revealMaskCenter {
    to {
        clip-path: inset(0 0);
    }
}

/* ================================================
   10. HOVER LIFT WITH SHADOW
   ================================================ */
.hover-lift-shadow {
    transition: all 0.4s var(--animation-smooth);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hover-lift-shadow:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 150, 199, 0.1);
}

/* ================================================
   11. ICON ANIMATIONS
   ================================================ */
.icon-bounce {
    display: inline-block;
    transition: transform 0.3s var(--animation-bounce);
}

.icon-bounce:hover {
    transform: scale(1.2);
}

.icon-spin-hover {
    transition: transform 0.6s var(--animation-smooth);
}

.icon-spin-hover:hover {
    transform: rotate(360deg);
}

.icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ================================================
   12. BORDER ANIMATIONS
   ================================================ */
.border-gradient-animate {
    position: relative;
    background: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) padding-box,
        linear-gradient(45deg, var(--aurora-2), var(--aurora-4), var(--aurora-2)) border-box;
    border: 2px solid transparent;
    background-size: 100% 100%, 200% 200%;
    animation: borderGlow 3s linear infinite;
}

@keyframes borderGlow {
    0% {
        background-position: 100% 100%, 0% 50%;
    }

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

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

/* ================================================
   13. MORPHING SHAPES
   ================================================ */
.morph-blob {
    position: absolute;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morphBlob 15s ease-in-out infinite;
    background: linear-gradient(45deg, var(--aurora-2), var(--aurora-4));
    opacity: 0.1;
    filter: blur(40px);
    pointer-events: none;
}

@keyframes morphBlob {

    0%,
    100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: rotate(0deg) scale(1);
    }

    25% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }

    50% {
        border-radius: 50% 60% 30% 60% / 70% 40% 60% 30%;
        transform: rotate(180deg) scale(1.1);
    }

    75% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

/* ================================================
   14. SCROLL-TRIGGERED SPECIAL EFFECTS
   ================================================ */
.wow-section {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s var(--animation-smooth);
}

.wow-section.wow-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Zoom in effect */
.wow-zoom {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s var(--animation-smooth);
}

.wow-zoom.wow-visible {
    opacity: 1;
    transform: scale(1);
}

/* Slide from left */
.wow-slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s var(--animation-smooth);
}

.wow-slide-left.wow-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right */
.wow-slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s var(--animation-smooth);
}

.wow-slide-right.wow-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Flip effect */
.wow-flip {
    opacity: 0;
    transform: perspective(600px) rotateY(-30deg);
    transition: all 0.8s var(--animation-smooth);
}

.wow-flip.wow-visible {
    opacity: 1;
    transform: perspective(600px) rotateY(0);
}

/* ================================================
   15. BUTTON SPECIAL EFFECTS
   ================================================ */
.btn-wow {
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--animation-smooth);
}

.btn-wow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-wow:hover::before {
    width: 300px;
    height: 300px;
}

.btn-wow:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 150, 199, 0.3);
}

/* ================================================
   16. LOADING SKELETON
   ================================================ */
.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.1) 25%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }

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

/* ================================================
   RESPONSIVE & ACCESSIBILITY
   ================================================ */
@media (max-width: 768px) {

    /* Reduce animation intensity on mobile */
    .aurora-bg::before {
        animation-duration: 20s;
    }

    .particle {
        width: 4px;
        height: 4px;
    }

    .tilt-3d:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .aurora-bg::before,
    .shimmer-btn::before,
    .particle,
    .morph-blob {
        animation: none !important;
    }

    .wow-section,
    .wow-zoom,
    .wow-slide-left,
    .wow-slide-right,
    .wow-flip {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Print styles */
@media print {

    .aurora-bg::before,
    .particle-container,
    .morph-blob {
        display: none !important;
    }
}

/* ================================================
   TEAM CARD PAINT POUR ANIMATION
   ================================================ */
.team-card-premium {
    /* Ensure stacking context for pseudo-elements */
    position: relative;
    /* Remove z-index: 0/isolation to let standard stacking work, or keep to contain.
       Let's stick to explicit positive z-indexes. */
    z-index: 1;
    /* Establish stacking context */
    overflow: hidden !important;
}

/* The Paint Layer */
.team-card-premium::after {
    content: '';
    position: absolute;
    top: -140%;
    /* Start fully above */
    left: 0;
    width: 100%;
    height: 150%;
    /* Taller for the curve */
    background: #f5f0e8;
    /* Dusty Cream Base */
    /* Texture Image */
    background-image:
        repeating-linear-gradient(90deg, transparent 0px, rgba(139, 119, 101, 0.04) 1px, transparent 2px, transparent 4px),
        linear-gradient(135deg, rgba(245, 240, 232, 1) 0%, rgba(235, 228, 215, 0.95) 25%, rgba(240, 234, 222, 0.98) 50%, rgba(232, 225, 210, 0.95) 75%, rgba(245, 240, 232, 1) 100%),
        radial-gradient(ellipse at 15% 25%, rgba(139, 119, 101, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 75%, rgba(139, 119, 101, 0.06) 0%, transparent 40%);

    /* Z-Index Strategy:
       Card BG is 0.
       Paint needs to be > 0.
       Content needs to be > Paint.
    */
    z-index: 1;

    /* Paint Pour Shape - Curved Bottom */
    border-radius: 0 0 50% 50% / 0 0 20% 20%;

    /* Transition Properties */
    transition: top 1.5s cubic-bezier(0.4, 0, 0.2, 1), border-radius 1.5s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* Ensure the Border Glow (::before) stays visible if desired, or let paint cover it.
   If we want border on top of paint: z-index: 2.
   Existing ::before has no z-index set (auto).
   We'll target it generically.
*/
.team-card-premium::before {
    z-index: 2;
}

/* Hover State - Pour Down */
.team-card-premium:hover::after {
    top: -10%;
    /* Move down to cover */
    border-radius: 0;
    /* Flatten out */
    transition: top 1.5s cubic-bezier(0.4, 0, 0.2, 1), border-radius 1.2s ease 0.3s;
}

/* Ensure content is above paint and transitions color */
.team-card-premium>* {
    position: relative;
    z-index: 5;
    /* High z-index to sit on top of everything */
    transition: color 0.4s ease 0.4s;
}

/* Text Colors on Hover */
.team-card-premium:hover h4 {
    color: #7b1e1e !important;
}

.team-card-premium:hover p,
.team-card-premium:hover .text-white-50,
.team-card-premium:hover li {
    color: #5a4a42 !important;
    text-shadow: none !important;
}

/* Icon Colors on Hover */
.team-card-premium:hover .icon-box-lg i,
.team-card-premium:hover .fas.fa-check {
    color: #7b1e1e !important;
}

.team-card-premium:hover .icon-box-lg {
    background: rgba(123, 30, 30, 0.1) !important;
}

/* Update tracking text color */
.team-card-premium:hover .tracking-wide {
    color: #7b1e1e !important;
}

/* ================================================
   STATS BANNER REVEAL (Truck Pull)
   ================================================ */
.stats-reveal-banner {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    isolation: isolate;
    cursor: pointer;
}

/* The Wipe Background (Dirty Pallet) */
.stats-reveal-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #f5f0e8;
    background-image:
        repeating-linear-gradient(90deg, transparent 0px, rgba(139, 119, 101, 0.04) 1px, transparent 2px, transparent 4px),
        linear-gradient(135deg, rgba(245, 240, 232, 1) 0%, rgba(235, 228, 215, 0.95) 25%, rgba(240, 234, 222, 0.98) 50%, rgba(232, 225, 210, 0.95) 75%, rgba(245, 240, 232, 1) 100%);
    z-index: 1;
    transition: left 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    box-shadow: 10px 0 20px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* The Truck (Leading Edge) */
.stats-reveal-banner::before {
    content: '\f0d1';
    /* FA Truck (Standard) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;

    position: absolute;
    top: 50%;
    left: -80px;
    /* Start further off screen */
    transform: translateY(-50%) scaleX(-1);
    /* Flip horizontally just in case, wait fa-truck faces right. */
    /* Actually fa-truck FACES RIGHT. So scaleX(-1) would make it face left. 
       If I want it to face right (driving direction), I should remove scaleX(-1) or use scaleX(1).
       BUT: often icons are flipped. Let's assume standard fa-truck faces Right.
       I will remove scaleX(-1). */
    transform: translateY(-50%);

    font-size: 4rem;
    color: #7b1e1e;
    /* Maroon */
    z-index: 100;
    /* Max Z-Index */

    transition: left 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

/* Trigger Animation on Hover */
.stats-reveal-banner:hover::after {
    left: 0;
}

.stats-reveal-banner:hover::before {
    left: 100%;
}

/* Text Colors on Reveal */
.stats-reveal-banner>* {
    position: relative;
    z-index: 10;
}

/* Color transition */
.stats-reveal-banner:hover .display-4,
.stats-reveal-banner:hover h4,
.stats-reveal-banner:hover p,
.stats-reveal-banner:hover .text-white-50 {
    color: #5a4a42 !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: #5a4a42 !important;
    transition: all 0.5s ease 0.8s;
}

.stats-reveal-banner:hover .display-4 {
    color: #7b1e1e !important;
    -webkit-text-fill-color: #7b1e1e !important;
    font-weight: 800;
}

/* ================================================
   STATS BANNER REVEAL V2 (FIXED)
   ================================================ */
.stats-reveal-banner-fix {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    cursor: pointer;
    isolation: isolate;
}

/* Background Wipe */
.stats-reveal-banner-fix::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #f5f0e8;
    background-image:
        repeating-linear-gradient(90deg, transparent 0px, rgba(139, 119, 101, 0.04) 1px, transparent 2px, transparent 4px),
        linear-gradient(135deg, rgba(245, 240, 232, 1) 0%, rgba(235, 228, 215, 0.95) 25%, rgba(240, 234, 222, 0.98) 50%, rgba(232, 225, 210, 0.95) 75%, rgba(245, 240, 232, 1) 100%);
    z-index: 5;
    transition: left 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    pointer-events: none;
}

/* Truck Icon */
.stats-reveal-banner-fix::before {
    content: '\f0d1';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;

    position: absolute;
    top: 50%;
    left: -80px;
    transform: translateY(-50%);

    font-size: 5rem;
    color: #7b1e1e;
    z-index: 999;

    transition: left 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

/* Triggers */
.stats-reveal-banner-fix:hover::after,
.stats-reveal-banner-fix.hover-active::after {
    left: 0;
}

.stats-reveal-banner-fix:hover::before,
.stats-reveal-banner-fix.hover-active::before {
    left: 100%;
}

/* Content Layering & Colors */
.stats-reveal-banner-fix>* {
    position: relative;
    z-index: 50;
}

.stats-reveal-banner-fix:hover .display-4,
.stats-reveal-banner-fix.hover-active .display-4,
.stats-reveal-banner-fix:hover h4,
.stats-reveal-banner-fix.hover-active h4,
.stats-reveal-banner-fix:hover p,
.stats-reveal-banner-fix.hover-active p,
.stats-reveal-banner-fix:hover .text-white-50,
.stats-reveal-banner-fix.hover-active .text-white-50 {
    color: #5a4a42 !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: #5a4a42 !important;
    transition: all 0.5s ease 0.8s;
}

.stats-reveal-banner-fix:hover .display-4,
.stats-reveal-banner-fix.hover-active .display-4 {
    color: #7b1e1e !important;
    -webkit-text-fill-color: #7b1e1e !important;
}

/* ================================================
   GENERIC PAINT POUR (Contact Cards)
   ================================================ */
.paint-pour-card {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    isolation: isolate;
}

.paint-pour-card::after {
    content: '';
    position: absolute;
    top: -140%;
    left: 0;
    width: 100%;
    height: 150%;
    background: #f5f0e8;
    background-image:
        repeating-linear-gradient(90deg, transparent 0px, rgba(139, 119, 101, 0.04) 1px, transparent 2px, transparent 4px),
        linear-gradient(135deg, rgba(245, 240, 232, 1) 0%, rgba(235, 228, 215, 0.95) 25%, rgba(240, 234, 222, 0.98) 50%, rgba(232, 225, 210, 0.95) 75%, rgba(245, 240, 232, 1) 100%),
        radial-gradient(ellipse at 15% 25%, rgba(139, 119, 101, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 75%, rgba(139, 119, 101, 0.06) 0%, transparent 40%);
    z-index: 1;
    border-radius: 0 0 50% 50% / 0 0 20% 20%;
    transition: top 1.5s cubic-bezier(0.4, 0, 0.2, 1), border-radius 1.5s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.paint-pour-card:hover::after,
.paint-pour-card.hover-active::after {
    top: -10%;
    border-radius: 0;
    transition: top 1.5s cubic-bezier(0.4, 0, 0.2, 1), border-radius 1.2s ease 0.3s;
}

.paint-pour-card>* {
    position: relative;
    z-index: 5;
    transition: color 0.4s ease 0.4s;
}

/* Contact Card Text Overrides */
.paint-pour-card:hover h5,
.paint-pour-card.hover-active h5,
.paint-pour-card:hover strong,
.paint-pour-card.hover-active strong {
    color: #7b1e1e !important;
}

.paint-pour-card:hover p,
.paint-pour-card.hover-active p,
.paint-pour-card:hover span,
.paint-pour-card.hover-active span,
.paint-pour-card:hover li,
.paint-pour-card.hover-active li,
.paint-pour-card:hover a,
.paint-pour-card.hover-active a,
.paint-pour-card:hover .text-white-50,
.paint-pour-card.hover-active .text-white-50 {
    color: #5a4a42 !important;
}

.paint-pour-card:hover i,
.paint-pour-card.hover-active i {
    color: #7b1e1e !important;
}

.paint-pour-card:hover .fas,
.paint-pour-card.hover-active .fas {
    color: #7b1e1e !important;
}

/* ================================================
   TRUCK WIPE SECTION (Emergency)
   ================================================ */
.truck-wipe-section {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    cursor: pointer;
    isolation: isolate;
}

.truck-wipe-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #f5f0e8;
    background-image:
        repeating-linear-gradient(90deg, transparent 0px, rgba(139, 119, 101, 0.04) 1px, transparent 2px, transparent 4px),
        linear-gradient(135deg, rgba(245, 240, 232, 1) 0%, rgba(235, 228, 215, 0.95) 25%, rgba(240, 234, 222, 0.98) 50%, rgba(232, 225, 210, 0.95) 75%, rgba(245, 240, 232, 1) 100%);
    z-index: 5;
    transition: left 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    pointer-events: none;
}

.truck-wipe-section::before {
    content: '\f0d1';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;

    position: absolute;
    top: 50%;
    left: -80px;
    transform: translateY(-50%);

    font-size: 8rem;
    /* Giant Section = Giant Truck */
    color: #7b1e1e;
    z-index: 999;

    transition: left 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

.truck-wipe-section:hover::after,
.truck-wipe-section.hover-active::after {
    left: 0;
}

.truck-wipe-section:hover::before,
.truck-wipe-section.hover-active::before {
    left: 100%;
}

.truck-wipe-section>* {
    position: relative;
    z-index: 50;
}

/* Emergency Section Colors */
.truck-wipe-section:hover h2,
.truck-wipe-section.hover-active h2,
.truck-wipe-section:hover h4,
.truck-wipe-section.hover-active h4,
.truck-wipe-section:hover strong,
.truck-wipe-section.hover-active strong {
    color: #7b1e1e !important;
    -webkit-text-fill-color: #7b1e1e !important;
}

.truck-wipe-section:hover p,
.truck-wipe-section.hover-active p,
.truck-wipe-section:hover li,
.truck-wipe-section.hover-active li,
.truck-wipe-section:hover span,
.truck-wipe-section.hover-active span,
.truck-wipe-section:hover a,
.truck-wipe-section.hover-active a,
.truck-wipe-section:hover .text-white-50,
.truck-wipe-section.hover-active .text-white-50 {
    color: #5a4a42 !important;
    text-shadow: none !important;
    background: none !important;
}

.truck-wipe-section:hover i,
.truck-wipe-section.hover-active i {
    color: #7b1e1e !important;
}

/* Adjust Cards Transparency when wiped */
.truck-wipe-section:hover .emergency-card,
.truck-wipe-section.hover-active .emergency-card {
    background: rgba(255, 255, 255, 0.2) !important;
    /* Slight tint on cream */
    border-color: rgba(123, 30, 30, 0.2) !important;
    box-shadow: none !important;
}

/* Fix for inline background override on Emergency Cards */
.truck-wipe-section:hover .emergency-card,
.truck-wipe-section.hover-active .emergency-card {
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ================================================
   MISSION REVEAL (Diagonal Splash)
   ================================================ */
.mission-reveal-card {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    isolation: isolate;
    cursor: pointer;
}

/* The Splash Layer */
.mission-reveal-card::after {
    content: '';
    position: absolute;
    /* Start top-left corner, far out */
    top: -150%;
    left: -150%;
    width: 250%;
    /* Big enough to cover diagonal */
    height: 250%;

    background: #f5f0e8;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(123, 30, 30, 0.05) 0%, transparent 60%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139, 119, 101, 0.03) 10px, rgba(139, 119, 101, 0.03) 20px);

    transform: rotate(45deg);
    /* Diagonal orientation */
    transform-origin: center;

    z-index: 1;
    border-radius: 50%;

    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    /* Fast splash */
    pointer-events: none;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
}

.mission-reveal-card:hover::after,
.mission-reveal-card.hover-active::after {
    top: -50%;
    left: -50%;
    /* Centers over the card */
    border-radius: 10%;
    /* Flattens slightly */
}

.mission-reveal-card>* {
    position: relative;
    z-index: 10;
}

/* Text Overrides */
.mission-reveal-card:hover h3,
.mission-reveal-card.hover-active h3,
.mission-reveal-card:hover h4,
.mission-reveal-card.hover-active h4,
.mission-reveal-card:hover strong,
.mission-reveal-card.hover-active strong {
    color: #7b1e1e !important;
}

.mission-reveal-card:hover p,
.mission-reveal-card.hover-active p,
.mission-reveal-card:hover span:not(.badge),
.mission-reveal-card.hover-active span:not(.badge) {
    color: #5a4a42 !important;
}

/* Badges Handling */
.mission-reveal-card:hover .badge,
.mission-reveal-card.hover-active .badge {
    background: rgba(123, 30, 30, 0.1) !important;
    color: #7b1e1e !important;
    border: 1px solid rgba(123, 30, 30, 0.2);
}

/* Icons */
.mission-reveal-card:hover i,
.mission-reveal-card.hover-active i {
    color: #7b1e1e !important;
}

/* Handle icon containers if they have background */
.mission-reveal-card:hover div[style*='background'],
.mission-reveal-card.hover-active div[style*='background'] {
    /* We might want to keep their shape but change color? 
        The Mission card has a blur box. 
        The Vision/values have gradient boxes.
        Let's force them to Maroon tint. */
    /* This is risky selector. Let's be specific if possible or just let opacity handle it?? 
        The 'icon-box' styles are inline. 
        Let's try to override via class if we can. 
        The HTML has inline styles for the icon boxes. 
        Use !important on generic div background inside hover? 
        No, that breaks structure. 
        Let's assume the user accepts the icon box background staying or looking weird, 
        OR target .flex-shrink-0 (Vision/Values) and .mb-4 (Mission).
     */
}

/* Targeted Icon Box Overrides */
.mission-reveal-card:hover .flex-shrink-0,
.mission-reveal-card.hover-active .flex-shrink-0 {
    background: linear-gradient(135deg, #7b1e1e, #5a4a42) !important;
}

.mission-reveal-card:hover .mb-4[style*='backdrop-filter'],
.mission-reveal-card.hover-active .mb-4[style*='backdrop-filter'] {
    background: rgba(123, 30, 30, 0.2) !important;
}

/* ================================================
   MISSION REVEAL FIX (Contrast & Legibility)
   ================================================ */

/* 1. Stronger Selectors to force color change */
.mission-reveal-card:hover .text-white,
.mission-reveal-card.hover-active .text-white,
.mission-reveal-card:hover .text-white-50,
.mission-reveal-card.hover-active .text-white-50,
.mission-reveal-card:hover h3,
.mission-reveal-card:hover h4,
.mission-reveal-card:hover p,
.mission-reveal-card:hover span,
.mission-reveal-card:hover i {
    color: #7b1e1e !important;
    caret-color: #7b1e1e !important;

    /* 2. The Halo Trick: White shadow makes dark text readable on dark bg, 
          but invisible on light bg */
    text-shadow:
        0 0 0px #ffffff,
        0 0 2px #ffffff,
        0 0 5px #ffffff,
        0 0 10px rgba(255, 255, 255, 0.8) !important;

    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Adjust secondary text to Brown with same halo */
.mission-reveal-card:hover p,
.mission-reveal-card.hover-active p,
.mission-reveal-card:hover .text-muted,
.mission-reveal-card.hover-active .text-muted {
    color: #5a4a42 !important;
    text-shadow:
        0 0 2px #ffffff,
        0 0 5px #ffffff !important;
}

/* Badges: Ensure high contrast background */
.mission-reveal-card:hover .badge,
.mission-reveal-card.hover-active .badge {
    background-color: #ffffff !important;
    color: #7b1e1e !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #7b1e1e !important;
    text-shadow: none !important;
    /* No shadow needed on white badge */
}

/* Speed up the wipe slightly to minimize the transition state confusion */
.mission-reveal-card::after {
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ================================================
   MISSION REVEAL FIX V2 (NUCLEAR OPTION)
   ================================================ */
/* Force ALL text to Maroon on hover, removing shadows to ensure clarity */
.mission-reveal-card:hover *,
.mission-reveal-card.hover-active * {
    color: #7b1e1e !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #7b1e1e !important;
    --bs-text-opacity: 1 !important;
}

/* Re-apply overrides for specific badges/elements if needed, 
   but the above handles the Main Text readability issue first. */
.mission-reveal-card:hover .badge,
.mission-reveal-card.hover-active .badge {
    background-color: #ffffff !important;
    border-color: #7b1e1e !important;
}

/* Ensure the icon boxes allow the color change or have a suitable background */
.mission-reveal-card:hover .flex-shrink-0,
.mission-reveal-card.hover-active .flex-shrink-0,
.mission-reveal-card:hover div[style*='background'],
.mission-reveal-card.hover-active div[style*='background'] {
    /* Keep the background but allow text color change? 
        The * rule forces text color. */
}

/* FIX ICON BOX CONTRAST V3 */
.mission-reveal-card:hover .mb-4[style*='backdrop-filter'],
.mission-reveal-card.hover-active .mb-4[style*='backdrop-filter'],
.mission-reveal-card:hover .flex-shrink-0,
.mission-reveal-card.hover-active .flex-shrink-0 {
    background: #ffffff !important;
    /* White box for high contrast with Maroon Icon */
    box-shadow: 0 4px 10px rgba(123, 30, 30, 0.2) !important;
}


/* ================================================
   MVV REDESIGN (Slide Reveal - Clipboard Style)
   ================================================ */

.mvv-modern-container {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    height: 100%;
    min-height: 280px;
    /* Ensure height for vision/values */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    isolation: isolate;
    cursor: pointer;
}

/* 1. The Underlay (Content - Always Visible underneath) */
.mvv-modern-content {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 3rem 2rem;
    background: #f5f0e8;
    /* Dirty Pallet Cream */
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139, 119, 101, 0.03) 10px, rgba(139, 119, 101, 0.03) 20px),
        radial-gradient(circle at top right, rgba(123, 30, 30, 0.05), transparent 70%);
    color: #5a4a42;
    /* Brown Text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
}

.mvv-modern-content h3,
.mvv-modern-content h4 {
    color: #7b1e1e;
    /* Maroon Headers */
    font-weight: 800;
    margin-bottom: 1rem;
}

.mvv-modern-content p {
    color: #5a4a42;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Badges hidden in content */
.mvv-modern-content .badge {
    background: #ffffff;
    color: #7b1e1e;
    border: 1px solid #7b1e1e;
    padding: 0.5em 1em;
}

/* 2. The Overlay (Cover - Slides Away) */
.mvv-modern-cover {
    position: absolute;
    inset: 0;
    z-index: 10;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
    /* Default Dark */
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.mvv-modern-cover.theme-blue {
    background: linear-gradient(135deg, #003875 0%, #0096c7 100%);
}

.mvv-modern-cover.theme-dark {
    background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mvv-modern-cover i {
    font-size: 3rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.mvv-modern-cover h3 {
    color: #ffffff;
    font-weight: 800;
    font-size: 2rem;
    margin: 0;
    letter-spacing: -0.5px;
}

.mvv-modern-cover .read-hint {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.mvv-modern-container:hover .mvv-modern-cover .read-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Hover Interaction */
.mvv-modern-container:hover .mvv-modern-cover,
.mvv-modern-container.hover-active .mvv-modern-cover {
    transform: translateY(-100%);
    /* Slide Up completely */
}

/* Add a little shadow inside content to simulate depth under the lid */
.mvv-modern-container::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 5;
}

/* ================================================
   AUTO BUTTON ANIMATIONS
   ================================================ */
/* Ensure the manual .hover-active class mimics the CSS :hover state */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
}

.hover-lift:hover,
.hover-lift.hover-active {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

/* Add a pulse effect to the active one for visibility */
.hover-lift.hover-active {
    filter: brightness(1.1);
}

/* ================================================
   HERO SCROLL REVEAL (Theme Wipe)
   ================================================ */

/* Wrapper handles the total scroll distance */
.hero-scroll-wrapper {
    position: relative;
    height: 300vh;
    /* 3 screens of scrolling to complete the effect */
    z-index: 10;
}

/* Sticky Container Pins the Hero */
.hero-sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* The Veil Layer (Light Theme) */
.hero-scroll-veil {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    /* JS controlled */
    z-index: 20;
    overflow: hidden;

    /* Theme Background */
    background: #f5f0e8;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139, 119, 101, 0.03) 10px, rgba(139, 119, 101, 0.03) 20px),
        radial-gradient(circle at top right, rgba(123, 30, 30, 0.05), transparent 70%);

    border-bottom: 4px solid #8b7765;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    will-change: height;
}

/* Veil Content Theme Overrides */
.hero-scroll-veil .hero-section {
    height: 100vh;
    /* Ensure exact overlay */
    background: transparent !important;
    /* Veil has bg */
}

/* Text Colors */
.hero-scroll-veil .text-white,
.hero-scroll-veil .text-white-50,
.hero-scroll-veil .text-white-75,
.hero-scroll-veil .text-white-90,
.hero-scroll-veil h1,
.hero-scroll-veil h2,
.hero-scroll-veil h3,
.hero-scroll-veil p,
.hero-scroll-veil span,
.hero-scroll-veil div {
    color: #5a4a42 !important;
    text-shadow: none !important;
}

.hero-scroll-veil .hero-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(123, 30, 30, 0.2) !important;
    box-shadow: 0 20px 40px rgba(123, 30, 30, 0.15) !important;
}

/* Typewriter Gradient Override */
.hero-scroll-veil .text-transparent {
    background: linear-gradient(135deg, #7b1e1e 0%, #5a4a42 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Buttons */
.hero-scroll-veil .btn-wow {
    background: #7b1e1e !important;
    box-shadow: 0 10px 20px rgba(123, 30, 30, 0.3) !important;
}

.hero-scroll-veil .btn-outline-light {
    border-color: #7b1e1e !important;
    color: #7b1e1e !important;
}

.hero-scroll-veil .btn-outline-light:hover {
    background: #7b1e1e !important;
    color: #fff !important;
}

/* Badges/Icons */
.hero-scroll-veil .badge,
.hero-scroll-veil .icon-box-sm {
    filter: sepia(1) hue-rotate(-50deg) saturate(2);
    /* Tint icons to brown/warm */
}

.hero-scroll-veil .particle {
    background: #7b1e1e !important;
    opacity: 0.2;
}

/* ================================================
   HERO THEME CURTAIN (Scroll-Triggered Reveal)
   ================================================ */
.hero-with-curtain {
    /* Ensure proper stacking context */
    isolation: isolate;
}

.hero-theme-curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    /* Lower z-index - below content */

    /* DISABLED - No color overlay, just transparent */
    background: transparent;
    background-image: none;
    background-color: transparent;

    /* No transform - controlled by JS scroll stages now */
    transform: none;

    /* Smooth transition */
    transition: opacity 0.3s ease;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    display: none;

    pointer-events: none;
}

/* When curtain is fully down, allow pointer events */
.hero-theme-curtain.curtain-complete {
    pointer-events: auto;
}

.curtain-content {
    text-align: center;
    color: #7b1e1e;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

.hero-theme-curtain.curtain-complete .curtain-content {
    opacity: 1;
    transform: translateY(0);
}

.curtain-icon {
    display: block;
    font-size: 2rem;
    animation: curtainBounce 1.5s ease-in-out infinite;
    margin-bottom: 0.5rem;
}

.curtain-text {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@keyframes curtainBounce {

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

    50% {
        transform: translateY(10px);
    }
}

/* When curtain is hidden (scrolled back up), ensure it's out of view */
.hero-theme-curtain.curtain-hidden {
    transform: translateY(-100%) !important;
}


/* ================================================
   HERO THEME CURTAIN - FIX (Background Only)
   ================================================ */

/* Override: Curtain goes BEHIND content */
.hero-theme-curtain {
    z-index: 1 !important;
    /* Between background (0) and content (2+) */

    /* Wave-shaped bottom edge */
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 40px),
            75% 100%,
            50% calc(100% - 30px),
            25% 100%,
            0 calc(100% - 40px));
}

/* Ensure background elements are behind curtain */
.hero-with-curtain .position-absolute.top-0.start-0.w-100.h-100.z-0 {
    z-index: 0 !important;
}

/* Ensure content is ABOVE curtain */
.hero-with-curtain .container.position-relative.z-1 {
    z-index: 10 !important;
    position: relative !important;
}

/* Ensure particles are above curtain */
.hero-with-curtain .particle-container {
    z-index: 5 !important;
}

/* Ensure wave SVG stays on top */
.hero-with-curtain>.position-absolute.bottom-0 {
    z-index: 15 !important;
}

/* ================================================
   THEME TRANSITION - DISABLED
   Text colors no longer change on scroll
   Cinematic effects only - see hero_cinematic.css
   ================================================ */
/* 
   DISABLED - These color changes are no longer used.
   The new scroll effect uses cinematic parallax instead.
   
.hero-with-curtain.theme-active .text-white,
.hero-with-curtain.theme-active h1,
.hero-with-curtain.theme-active .display-3 {
    color: #7b1e1e !important;
    -webkit-text-fill-color: #7b1e1e !important;
    transition: color 0.5s ease;
}

.hero-with-curtain.theme-active .text-white-90,
.hero-with-curtain.theme-active .text-white-75,
.hero-with-curtain.theme-active .lead,
.hero-with-curtain.theme-active p {
    color: #5a4a42 !important;
    transition: color 0.5s ease;
}

.hero-with-curtain.theme-active .text-white-50,
.hero-with-curtain.theme-active .small.text-white-50 {
    color: #8b7765 !important;
    transition: color 0.5s ease;
}

.hero-with-curtain.theme-active .badge.bg-primary,
.hero-with-curtain.theme-active .icon-box-sm.bg-primary,
.hero-with-curtain.theme-active .icon-box-sm.bg-success,
.hero-with-curtain.theme-active .icon-box-sm.bg-danger {
    background: #7b1e1e !important;
}

.hero-with-curtain.theme-active i.fas {
    color: #7b1e1e !important;
}

.hero-with-curtain.theme-active .btn-outline-light {
    border-color: #7b1e1e !important;
    color: #7b1e1e !important;
}

.hero-with-curtain.theme-active .btn-outline-light:hover {
    background: #7b1e1e !important;
    color: #ffffff !important;
}

.hero-with-curtain.theme-active .shimmer-btn {
    background: linear-gradient(135deg, #7b1e1e 0%, #5a4a42 100%) !important;
}
*/

/* Hero Image Card */
.hero-with-curtain.theme-active .hero-card {
    background: rgba(123, 30, 30, 0.1) !important;
    border-color: rgba(123, 30, 30, 0.2) !important;
}

/* Typewriter cursor */
.hero-with-curtain.theme-active .typewriter-cursor {
    color: #7b1e1e !important;
}

/* Badge container border */
.hero-with-curtain.theme-active .badge-container {
    border-color: rgba(123, 30, 30, 0.2) !important;
}

/* Top badge pill */
.hero-with-curtain.theme-active .bg-white.bg-opacity-10 {
    background: rgba(123, 30, 30, 0.1) !important;
    border-color: rgba(123, 30, 30, 0.2) !important;
}


/* ================================================
   HERO THEME CURTAIN - NEW THEME (Light Blue/White)
   Smooth transition that complements the dark blue hero
   ================================================ */

/* Override curtain background to Light Blue/White gradient */
.hero-theme-curtain {
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 50%, #ffffff 100%) !important;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(0, 150, 199, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 56, 117, 0.05) 0%, transparent 40%),
        linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 50%, #ffffff 100%) !important;
}

/* Override: Better wave shape */
.hero-theme-curtain {
    clip-path: ellipse(120% 100% at 50% 0%) !important;
}

/* ================================================
   NEW THEME COLORS - Navy Blue on Light (Same Brand Family)
   DISABLED - Keeping white text for dark hero background
   ================================================ */

/*
   DISABLED - These color changes made text invisible on dark background
   The new scroll effect keeps the dark theme throughout

.hero-with-curtain.theme-active .text-white,
.hero-with-curtain.theme-active h1,
.hero-with-curtain.theme-active .display-3,
.hero-with-curtain.theme-active .fw-bold {
    color: #003875 !important;
    -webkit-text-fill-color: #003875 !important;
    text-shadow: none !important;
    transition: color 0.5s ease;
}

.hero-with-curtain.theme-active .text-white-90,
.hero-with-curtain.theme-active .text-white-75,
.hero-with-curtain.theme-active .lead,
.hero-with-curtain.theme-active p:not(.badge),
.hero-with-curtain.theme-active .fs-5 {
    color: #1e3a5f !important;
    transition: color 0.5s ease;
}

.hero-with-curtain.theme-active .text-white-50,
.hero-with-curtain.theme-active .small.text-white-50 {
    color: #64748b !important;
    transition: color 0.5s ease;
}

.hero-with-curtain.theme-active i.fas {
    color: #0096c7 !important;
}

.hero-with-curtain.theme-active .icon-box-sm.bg-primary {
    background: linear-gradient(135deg, #003875, #0096c7) !important;
}

.hero-with-curtain.theme-active .icon-box-sm.bg-success {
    background: linear-gradient(135deg, #059669, #10b981) !important;
}

.hero-with-curtain.theme-active .icon-box-sm.bg-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
}

.hero-with-curtain.theme-active .bg-white.bg-opacity-10,
.hero-with-curtain.theme-active .backdrop-blur {
    background: rgba(0, 150, 199, 0.1) !important;
    border-color: rgba(0, 150, 199, 0.3) !important;
}

.hero-with-curtain.theme-active .shimmer-btn {
    background: linear-gradient(135deg, #003875 0%, #0096c7 100%) !important;
    box-shadow: 0 10px 30px rgba(0, 56, 117, 0.3) !important;
}

.hero-with-curtain.theme-active .btn-outline-light {
    border-color: #003875 !important;
    color: #003875 !important;
    background: transparent !important;
}

.hero-with-curtain.theme-active .btn-outline-light:hover {
    background: #003875 !important;
    color: #ffffff !important;
}

.hero-with-curtain.theme-active .hero-card {
    background: rgba(0, 150, 199, 0.05) !important;
    border-color: rgba(0, 150, 199, 0.2) !important;
    box-shadow: 0 20px 50px rgba(0, 56, 117, 0.15) !important;
}

.hero-with-curtain.theme-active .typewriter-cursor {
    color: #0096c7 !important;
}

.hero-with-curtain.theme-active .badge-container,
.hero-with-curtain.theme-active .border-white {
    border-color: rgba(0, 56, 117, 0.15) !important;
}

.hero-with-curtain.theme-active .bg-gradient-primary {
*/

/* FORCE WHITE TEXT ON HERO - Override any theme-active color changes */
.hero-section .text-white,
.hero-section h1,
.hero-section .display-3,
.hero-section .fw-bold,
.hero-with-curtain .text-white,
.hero-with-curtain h1,
.hero-with-curtain .display-3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hero-section .text-white-90,
.hero-section .text-white-75,
.hero-section .lead,
.hero-section p,
.hero-with-curtain .text-white-90,
.hero-with-curtain .text-white-75,
.hero-with-curtain .lead {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Gradient text stays visible */
.hero-with-curtain .bg-gradient-primary,
.hero-section .bg-gradient-primary {
    background: linear-gradient(135deg, #0096c7, #00b4d8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Particles fade out on light theme */
.hero-with-curtain.theme-active .particle-container {
    opacity: 0.3;
    transition: opacity 0.5s ease;
}


/* ================================================
   NAVIGATION DARK MODE (When Hero Theme Active)
   ================================================ */

/* Target the top bar/navigation when light theme is active */
body.hero-theme-active .navbar,
body.hero-theme-active .top-bar,
body.hero-theme-active header.navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Navigation links - Dark text */
body.hero-theme-active .navbar .nav-link,
body.hero-theme-active .navbar a,
body.hero-theme-active .top-bar a,
body.hero-theme-active .navbar-brand {
    color: #003875 !important;
    transition: color 0.3s ease;
}

body.hero-theme-active .navbar .nav-link:hover,
body.hero-theme-active .navbar a:hover {
    color: #0096c7 !important;
}

/* Navigation brand/logo text */
body.hero-theme-active .navbar .brand-text,
body.hero-theme-active .navbar .fw-bold {
    color: #003875 !important;
}

/* Top bar items */
body.hero-theme-active .top-bar span,
body.hero-theme-active .top-bar i {
    color: #1e3a5f !important;
}

/* Navigation buttons */
body.hero-theme-active .navbar .btn-outline-light {
    border-color: #003875 !important;
    color: #003875 !important;
}

body.hero-theme-active .navbar .btn-primary {
    background: linear-gradient(135deg, #003875, #0096c7) !important;
}

/* Mobile hamburger icon */
body.hero-theme-active .navbar-toggler-icon {
    filter: invert(1) !important;
}

body.hero-theme-active .navbar-toggler {
    border-color: #003875 !important;
}

/* ================================================
   CURTAIN WAVE SHAPE (Proper Upward Curve)
   DISABLED - Curtain is no longer used
   ================================================ */

/*
   DISABLED - Curtain wave effects are removed

.hero-theme-curtain {
    clip-path: none !important;
}

.hero-theme-curtain::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background: inherit;
    clip-path: path('M0,60 C300,0 600,80 900,20 C1050,0 1150,40 1200,30 L1200,60 L0,60 Z');
    -webkit-clip-path: ellipse(80% 100% at 50% 100%);
}

.hero-theme-curtain::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 100%);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    transform: scaleX(1.5);
}
*/

/* Hide the text content while curtain is animating */
.hero-theme-curtain .curtain-content {
    display: none !important;
}


/* ================================================
   FIX: Hide curtain wave when not scrolling
   ================================================ */

/* Remove the problematic pseudo-elements when curtain is hidden */
.hero-theme-curtain.curtain-hidden::before,
.hero-theme-curtain.curtain-hidden::after {
    display: none !important;
    opacity: 0 !important;
}

/* Ensure curtain starts completely off-screen (extra margin for wave) */
.hero-theme-curtain {
    transform: translateY(-105%) !important;
    /* Extra 5% to hide the wave edge */
}

/* Only show wave when curtain has started moving */
.hero-theme-curtain::before {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-theme-curtain:not(.curtain-hidden)::before {
    opacity: 1;
}

/* Move wave to be flush with curtain bottom, not extending beyond */
.hero-theme-curtain::before {
    bottom: 0 !important;
    /* Flush with bottom, not extending */
    height: 40px !important;
    z-index: 2;
}

/* Ensure initial state is fully hidden */
.hero-with-curtain .hero-theme-curtain {
    visibility: visible;
}

.hero-theme-curtain.curtain-hidden {
    visibility: hidden !important;
}


/* ================================================
   FIX: Remove !important that blocks JS animation
   ================================================ */

/* Override the previous transform rule - allow JS to control */
.hero-theme-curtain {
    transform: translateY(-105%);
    /* No !important - let JS override */
}

/* Remove visibility hidden - use opacity instead for smoother transition */
.hero-theme-curtain.curtain-hidden {
    visibility: visible !important;
    opacity: 0;
    pointer-events: none;
}

.hero-theme-curtain:not(.curtain-hidden) {
    opacity: 1;
    transition: opacity 0.2s ease;
}


/* ================================================
   HIDE WAVE EDGE WHEN CURTAIN IS HIDDEN (Initial State)
   ================================================ */

/* When curtain is at initial position (not started), hide the wave edges */
.hero-theme-curtain.curtain-hidden::before,
.hero-theme-curtain.curtain-hidden::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Also ensure the curtain itself is fully hidden initially */
.hero-theme-curtain.curtain-hidden {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Show curtain and wave only when it starts moving */
.hero-theme-curtain:not(.curtain-hidden) {
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.05s linear, visibility 0s, opacity 0.3s ease !important;
}

.hero-theme-curtain:not(.curtain-hidden)::before,
.hero-theme-curtain:not(.curtain-hidden)::after {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* ================================================
   FIX: Curtain Background Visibility
   ================================================ */

/* Override: Curtain should ALWAYS be visible, just positioned off-screen initially */
.hero-theme-curtain {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Only hide the WAVE EDGES when curtain hasn't started, not the whole curtain */
.hero-theme-curtain.curtain-hidden {
    visibility: visible !important;
    opacity: 1 !important;
    /* It's already off-screen via transform: translateY(-100%) */
}

/* The wave edges should only appear once curtain starts moving */
.hero-theme-curtain::before {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-theme-curtain:not(.curtain-hidden)::before {
    opacity: 1;
}

/* Ensure curtain has higher z-index than background but lower than content */
.hero-theme-curtain {
    z-index: 2 !important;
}

/* Push the dark background further back */
.hero-with-curtain>.position-absolute:first-of-type {
    z-index: 0 !important;
}

/* Keep content on top */
.hero-with-curtain>.container {
    z-index: 10 !important;
    position: relative !important;
}


/* ================================================
   FINAL FIX: Clean Curtain Rules (Override All Previous)
   DISABLED - Curtain is now fully disabled, using cinematic effects
   ================================================ */

/*
   DISABLED - Curtain is completely removed in favor of cinematic parallax effects

.hero-theme-curtain {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 50%, #ffffff 100%) !important;
    transform: translateY(-100%);
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}
*/

/* Wave bottom edge */
.hero-theme-curtain::before {
    content: '' !important;
    position: absolute !important;
    bottom: -20px !important;
    left: -10% !important;
    width: 120% !important;
    height: 50px !important;
    background: #ffffff !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    z-index: 3 !important;
}

/* Hidden state - wave edge hidden */
.hero-theme-curtain.curtain-hidden::before {
    opacity: 0 !important;
}

.hero-theme-curtain:not(.curtain-hidden)::before {
    opacity: 1 !important;
    transition: opacity 0.5s ease !important;
}


/* ================================================
   CRITICAL Z-INDEX FIX
   ================================================ */

/* Curtain must be ABOVE the dark background layer */
.hero-theme-curtain {
    z-index: 5 !important;
}

/* Target the DARK BACKGROUND specifically (not the curtain) */
.hero-with-curtain>div[style*='background: linear-gradient'],
.hero-with-curtain>div.position-absolute[style*='#020617'],
.hero-with-curtain>div.position-absolute.z-0 {
    z-index: 1 !important;
}

/* The container with content stays on top */
.hero-with-curtain>.container {
    z-index: 20 !important;
}

/* Particles layer */
.hero-with-curtain .particle-container {
    z-index: 3 !important;
}

/* Bottom wave SVG */
.hero-with-curtain>.position-absolute.bottom-0 {
    z-index: 25 !important;
}

/* Ensure the ::before wave edge is also high enough */
.hero-theme-curtain::before {
    z-index: 6 !important;
}


/* ================================================
   SIMPLER APPROACH: Change Hero BG Directly
   DISABLED - Keeping dark theme, using cinematic effects instead
   ================================================ */

/*
   DISABLED - No longer changing hero background to light blue
   The new scroll effect uses cinematic parallax (see hero_cinematic.css)

.hero-with-curtain.theme-active {
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 50%, #ffffff 100%) !important;
}

.hero-with-curtain.theme-active>div[style*='linear-gradient(135deg, #020617'],
.hero-with-curtain.theme-active>.position-absolute.top-0.start-0.w-100.h-100 {
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
}

.hero-with-curtain:not(.theme-active)>div[style*='linear-gradient(135deg, #020617'],
.hero-with-curtain:not(.theme-active)>.position-absolute.top-0.start-0.w-100.h-100 {
    opacity: 1 !important;
}
*/

/* ENSURE the curtain element is ALWAYS hidden - we use cinematic effects now */
.hero-theme-curtain,
.hero-theme-curtain::before,
.hero-theme-curtain::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* KEEP DARK BACKGROUND VISIBLE - No color transitions */
.hero-with-curtain.theme-active {
    background: transparent !important;
}

.hero-with-curtain.theme-active>div[style*='linear-gradient(135deg, #020617'],
.hero-with-curtain.theme-active>.position-absolute.top-0.start-0.w-100.h-100 {
    opacity: 1 !important;
}