/* ===== Coffee Eight Jitter ===== */
@keyframes coffee-shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    15% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
    30% { transform: translate(1px, -0.5px) rotate(0.6deg); }
    45% { transform: translate(-0.5px, -0.5px) rotate(-0.3deg); }
    60% { transform: translate(0.5px, 1px) rotate(0.5deg); }
    75% { transform: translate(-1px, 0px) rotate(-0.6deg); }
    90% { transform: translate(0.5px, -0.5px) rotate(0.3deg); }
}

.coffee-eight {
    display: inline-block;
    animation: coffee-shake 0.6s ease-in-out infinite;
}

/* ===== Base Styles ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

::selection {
    background-color: rgba(41, 98, 255, 0.15);
    color: #2962FF;
}

/* ===== Gradient Text ===== */
.text-gradient {
    background: linear-gradient(135deg, #F5841F, #7DC242, #00BCD4, #2962FF, #7B1FA2);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 12s ease infinite;
}

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

/* ===== Navbar Styles ===== */
#navbar {
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
}

#navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.04);
}

.nav-logo-text {
    color: #111827;
}

/* ===== Hero stoom-overlay (CSS-only, boven mok-positie) ===== */
.hero-steam-container {
    overflow: hidden;
}

.hero-steam {
    position: absolute;
    /* Foto is gespiegeld — mok-opening zit rond 32% van rechts, 50% van onder */
    right: 32%;
    bottom: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 250, 240, 0.95) 0%, rgba(255, 250, 240, 0.55) 40%, rgba(255, 250, 240, 0) 75%);
    filter: blur(20px);
    opacity: 0;
    transform-origin: center;
    pointer-events: none;
}

.hero-steam-1 { animation: steam-rise 6s ease-in-out infinite; animation-delay: 0s; }
.hero-steam-2 { animation: steam-rise 7s ease-in-out infinite; animation-delay: 1.2s; right: 33%; }
.hero-steam-3 { animation: steam-rise 8s ease-in-out infinite; animation-delay: 2.4s; right: 31%; }
.hero-steam-4 { animation: steam-rise 6.5s ease-in-out infinite; animation-delay: 3.6s; right: 32.5%; }

@keyframes steam-rise {
    0% {
        transform: translate(0, 0) scale(0.6);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translate(12px, -160px) scale(1.8);
        opacity: 0.8;
    }
    85% {
        opacity: 0.4;
    }
    100% {
        transform: translate(-6px, -300px) scale(2.6);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    /* Op mobile staat de mok iets anders door object-cover crop, plus we willen minder cpu */
    .hero-steam { right: 28%; bottom: 45%; }
    .hero-steam-3, .hero-steam-4 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-steam { display: none; }
}

/* ===== Hero background W logos ===== */
.hero-w {
    will-change: transform;
    mix-blend-mode: multiply;
}

/* Layer 1: Large, slow breathe — zooms in close then back out */
@keyframes w-drift-1 {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    20%  { transform: translate(20px, -15px) rotate(1.5deg) scale(1.15); }
    40%  { transform: translate(-10px, 10px) rotate(-0.5deg) scale(0.95); }
    60%  { transform: translate(15px, 5px) rotate(1deg) scale(1.25); }
    80%  { transform: translate(-20px, -10px) rotate(-1.5deg) scale(0.9); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
.hero-w-1 { animation: w-drift-1 45s ease-in-out infinite; }

/* Layer 2: Offset right, comes very close then retreats */
@keyframes w-drift-2 {
    0%   { transform: translate(40px, 20px) rotate(2deg) scale(0.9); }
    25%  { transform: translate(-20px, -30px) rotate(-1deg) scale(1.35); }
    50%  { transform: translate(30px, 15px) rotate(1.5deg) scale(0.85); }
    75%  { transform: translate(-15px, 25px) rotate(-2deg) scale(1.2); }
    100% { transform: translate(40px, 20px) rotate(2deg) scale(0.9); }
}
.hero-w-2 { animation: w-drift-2 35s ease-in-out infinite; }

/* Layer 3: Offset left, dramatic zoom in/out */
@keyframes w-drift-3 {
    0%   { transform: translate(-30px, -10px) rotate(-1deg) scale(1.1); }
    30%  { transform: translate(25px, 20px) rotate(2deg) scale(0.7); }
    60%  { transform: translate(-10px, -25px) rotate(-1.5deg) scale(1.4); }
    100% { transform: translate(-30px, -10px) rotate(-1deg) scale(1.1); }
}
.hero-w-3 { animation: w-drift-3 30s ease-in-out infinite; }

/* Layer 4: Very large background, gentle zoom pulse */
@keyframes w-drift-4 {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    33%  { transform: translate(10px, -8px) rotate(0.5deg) scale(1.1); }
    66%  { transform: translate(-8px, 6px) rotate(-0.5deg) scale(0.92); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
.hero-w-4 { animation: w-drift-4 55s ease-in-out infinite; }

/* Layer 5: Small, fast, erratic — flies close and away */
@keyframes w-drift-5 {
    0%   { transform: translate(50px, 30px) rotate(3deg) scale(0.8); }
    20%  { transform: translate(-40px, -20px) rotate(-2deg) scale(1.5); }
    40%  { transform: translate(20px, 40px) rotate(1deg) scale(0.6); }
    60%  { transform: translate(-30px, 10px) rotate(-3deg) scale(1.6); }
    80%  { transform: translate(35px, -35px) rotate(2deg) scale(0.75); }
    100% { transform: translate(50px, 30px) rotate(3deg) scale(0.8); }
}
.hero-w-5 { animation: w-drift-5 25s ease-in-out infinite; }

/* Make white logo background transparent */
img[alt="Weppas"] {
    mix-blend-mode: multiply;
}

/* On dark backgrounds, use different blend mode */
.bg-gray-900 img[alt="Weppas"],
footer img[alt="Weppas"] {
    mix-blend-mode: screen;
    filter: brightness(1.1);
}

.nav-link {
    position: relative;
    color: #374151;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #2962FF, #7B1FA2);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* ===== Mobile Menu ===== */
#mobile-menu.active {
    opacity: 1;
    pointer-events: all;
}

#menu-toggle.active .menu-bar:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

#menu-toggle.active .menu-bar:nth-child(2) {
    opacity: 0;
}

#menu-toggle.active .menu-bar:nth-child(3) {
    width: 24px;
    transform: rotate(-45deg) translate(4px, -4px);
}

.mobile-nav-link {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

#mobile-menu.active .mobile-nav-link {
    opacity: 1;
    transform: translateY(0);
}

#mobile-menu.active .mobile-nav-link:nth-child(1) { transition-delay: 0.1s; }
#mobile-menu.active .mobile-nav-link:nth-child(2) { transition-delay: 0.15s; }
#mobile-menu.active .mobile-nav-link:nth-child(3) { transition-delay: 0.2s; }
#mobile-menu.active .mobile-nav-link:nth-child(4) { transition-delay: 0.25s; }

/* ===== Reveal Animations ===== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* ===== Float Animations ===== */
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes float-reverse {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(-25px, 25px) scale(1.08) rotate(5deg); }
    66% { transform: translate(15px, -15px) scale(0.92) rotate(-3deg); }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes orbit {
    0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

@keyframes morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50% { border-radius: 50% 60% 30% 60% / 30% 50% 70% 50%; }
    75% { border-radius: 60% 30% 50% 40% / 70% 40% 60% 30%; }
}

.animate-float {
    animation: float 20s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 20s ease-in-out infinite;
    animation-delay: -10s;
}

.animate-float-reverse {
    animation: float-reverse 25s ease-in-out infinite;
}

.animate-morph {
    animation: morph 15s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}

.animate-orbit {
    animation: orbit 30s linear infinite;
}

/* ===== Color Blobs (static — never animate with filter:blur) ===== */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.blob-orange { background: rgba(245, 132, 31, 0.15); }
.blob-green { background: rgba(125, 194, 66, 0.12); }
.blob-cyan { background: rgba(0, 188, 212, 0.12); }
.blob-blue { background: rgba(41, 98, 255, 0.1); }
.blob-purple { background: rgba(123, 31, 162, 0.12); }
.blob-pink { background: rgba(236, 72, 153, 0.1); }

/* ===== Gradient line accents ===== */
.gradient-line {
    height: 3px;
    background: linear-gradient(90deg, #F5841F, #7DC242, #00BCD4, #2962FF, #7B1FA2);
    background-size: 200% 100%;
    animation: gradient-shift 4s ease infinite;
}

.gradient-line-vertical {
    width: 3px;
    background: linear-gradient(180deg, #F5841F, #7DC242, #00BCD4, #2962FF, #7B1FA2);
    background-size: 100% 200%;
    animation: gradient-shift 4s ease infinite;
}

/* ===== Noise texture overlay (lightweight base64 PNG, no SVG filter) ===== */
.noise-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMFCA0RFRkMN4ZOAAAAgUlEQVQ4y9WSMQ6AMAxDXcQBkLgAEhdg4v6XoiRNh6pMbHir/GT5ywCAMbYe95hzLpvNJ0ly5nCb7VEdo0HVRHTWOJZHmeP7mE4e2KFeqm0KizV6M+a1KS/vRX1UqK3L+zyP7RLGE0XBhLA+EGcMILj8oAjPtBcBxgCV918AL/bF9yjJBkNAAAAAElFTkSuQmCC");
    background-repeat: repeat;
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 1;
}

@keyframes bounce-slow {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

.animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
}

/* ===== Service Cards ===== */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, transparent);
    transition: background 0.5s ease;
}

.service-card:nth-child(1):hover::before {
    background: linear-gradient(90deg, #F5841F, #7DC242);
}

.service-card:nth-child(2):hover::before {
    background: linear-gradient(90deg, #00BCD4, #2962FF);
}

.service-card:nth-child(3):hover::before {
    background: linear-gradient(90deg, #2962FF, #7B1FA2);
}

.service-card:nth-child(4):hover::before {
    background: linear-gradient(90deg, #7DC242, #00BCD4);
}

.service-card:nth-child(5):hover::before {
    background: linear-gradient(90deg, #F5841F, #7B1FA2);
}

/* ===== Form Focus Glow ===== */
input:focus,
textarea:focus {
    box-shadow: 0 0 0 4px rgba(41, 98, 255, 0.08);
}

/* ===== Contact Form Success State ===== */
.form-success {
    animation: success-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes success-pop {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== Cursor Glow (desktop only) ===== */
.cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(41, 98, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

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

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2962FF, #7B1FA2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1a4fd4, #5c1580);
}

/* ===== Marquee ===== */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.marquee-track {
    animation: marquee 30s linear infinite;
}

.marquee-track-reverse {
    animation: marquee-reverse 35s linear infinite;
}

.marquee-content {
    display: inline-block;
    padding-right: 0;
}

/* ===== FAQ ===== */
.faq-item {
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: #2962FF;
}

.faq-item.open .faq-icon {
    transform: rotate(180deg);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
}

.faq-content.hidden {
    display: block !important;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.faq-item.open .faq-content {
    max-height: 300px;
    padding-bottom: 2.5rem;
}

/* ===== Video section parallax ===== */
section:has(video) {
    will-change: transform;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .cursor-glow {
        display: none;
    }
}

/* ===== Floating Paths (background-paths component style) ===== */
.hero-path {
    stroke-linecap: round;
    animation: path-glow var(--d, 25s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    will-change: opacity;
}

/* Only animate opacity — stroke-dashoffset triggers expensive repaints */
@keyframes path-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* ===== W Data Lines Background ===== */
.w-data-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.w-data-lines svg {
    width: 100%;
    height: 100%;
}

.w-data-path {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 8 24;
    animation: data-flow var(--flow-d, 6s) linear infinite;
    animation-delay: var(--flow-delay, 0s);
    will-change: stroke-dashoffset;
}

.w-data-path-solid {
    fill: none;
    stroke-linecap: round;
    opacity: 0.04;
}

@keyframes data-flow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -64; }
}

/* Reverse flow for some paths */
.w-data-path-reverse {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 6 20;
    animation: data-flow-reverse var(--flow-d, 8s) linear infinite;
    animation-delay: var(--flow-delay, 0s);
    will-change: stroke-dashoffset;
}

@keyframes data-flow-reverse {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 52; }
}

/* Pulse dots along the W */
.w-data-dot {
    fill: currentColor;
    opacity: 0;
    animation: data-dot-pulse var(--dot-d, 3s) ease-in-out infinite;
    animation-delay: var(--dot-delay, 0s);
}

@keyframes data-dot-pulse {
    0%, 100% { opacity: 0; r: 1.5; }
    50% { opacity: 0.6; r: 3; }
}

/* ===== Tap-targets minimaal 44x44 (WCAG 2.5.5) ===== */
#menu-toggle {
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 768px) {
    /* Footer-links op mobile groter aanraakgebied */
    footer a:not(.flex):not(.inline-flex) {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        display: inline-block;
    }
}

/* ===== Skip-to-content link (WCAG 2.4.1) ===== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #2962FF;
    color: white;
    padding: 0.75rem 1.5rem;
    z-index: 99999;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0;
}
.skip-link:focus {
    left: 0;
}

/* ===== Focus-visible voor toegankelijkheid ===== */
.dienst-card:focus-visible,
.module-card:focus-visible,
.portfolio-card:focus-visible {
    outline: 3px solid #2962FF;
    outline-offset: 4px;
    border-radius: 1rem;
}

/* ===== Color-contrast fix (WCAG AA 4.5:1) =====
   Cyan #00BCD4 en green #7DC242 op wit zakken naar ~2.3:1 / 2.6:1.
   Default darkere variant; op donkere parents revert naar origineel. */
.text-weppas-cyan {
    color: #00838F;
}
.text-weppas-green {
    color: #5C9A2C;
}

/* Donkere secties: lichtere variant terug voor zichtbaarheid */
[class*="bg-gray-9"] .text-weppas-cyan,
[class*="bg-slate-9"] .text-weppas-cyan,
[class*="bg-slate-8"] .text-weppas-cyan,
[class*="from-gray-9"] .text-weppas-cyan,
[class*="from-slate-9"] .text-weppas-cyan,
.bg-gray-800 .text-weppas-cyan,
.bg-gray-900 .text-weppas-cyan {
    color: #00BCD4;
}
[class*="bg-gray-9"] .text-weppas-green,
[class*="bg-slate-9"] .text-weppas-green,
[class*="bg-slate-8"] .text-weppas-green,
[class*="from-gray-9"] .text-weppas-green,
[class*="from-slate-9"] .text-weppas-green,
.bg-gray-800 .text-weppas-green,
.bg-gray-900 .text-weppas-green {
    color: #7DC242;
}

/* ===== Mobile: replace heavy effects with lightweight alternatives ===== */
@media (max-width: 768px) {
    /* Remove ALL blur-based elements — blur() is the #1 cause of mobile flicker */
    .blob {
        display: none !important;
    }

    /* Remove all SVG path animations — stroke-dashoffset repaints are expensive */
    .hero-path {
        display: none !important;
    }

    /* Remove mirrored SVG layer */
    .hero-paths-layer2 {
        display: none !important;
    }

    /* Remove small orb animations */
    .animate-pulse-glow {
        display: none !important;
    }

    /* Replace blobs+paths with a single lightweight CSS gradient background */
    #home {
        background:
            radial-gradient(ellipse 60% 50% at 15% 20%, rgba(245, 132, 31, 0.08) 0%, transparent 70%),
            radial-gradient(ellipse 50% 60% at 85% 75%, rgba(123, 31, 162, 0.07) 0%, transparent 70%),
            radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0, 188, 212, 0.05) 0%, transparent 70%),
            white;
    }

    /* Hero W logos: HIDE completely on mobile — mix-blend-mode + large PNGs cause flicker */
    .hero-w {
        display: none !important;
    }

    /* Stop gradient text animation (background-position is not GPU-composited) */
    .text-gradient {
        animation: none !important;
        background-position: 0% 50%;
    }

    /* Remove noise overlay (SVG filter is heavy on mobile) */
    .noise-overlay::after {
        display: none;
    }

    /* W data lines: simplify for mobile — reduce paths, keep static outline */
    .w-data-path,
    .w-data-path-reverse {
        animation: none !important;
        stroke-dasharray: none;
        opacity: 0.06;
    }

    .w-data-dot {
        display: none;
    }
}

/* ===== Respect reduced motion preference ===== */
@media (prefers-reduced-motion: reduce) {
    .hero-path,
    .blob,
    .animate-float,
    .animate-float-delayed,
    .animate-float-reverse,
    .animate-morph,
    .animate-pulse-glow,
    .animate-orbit,
    .animate-bounce-slow,
    .hero-w,
    .text-gradient,
    .coffee-eight,
    .w-data-path,
    .w-data-path-reverse,
    .w-data-dot {
        animation: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== Page load animation ===== */
@media (min-width: 769px) {
    body {
        opacity: 0;
        animation: page-load 0.6s ease forwards;
        animation-delay: 0.1s;
    }
}

/* Mobile: skip body fade to prevent white flash / flicker */
@media (max-width: 768px) {
    body {
        opacity: 1;
    }

    /* Use a simpler reveal: hero content only, no full-body opacity toggle */
    .reveal {
        transition-duration: 0.5s;
        transform: translateY(20px);
    }
}

@keyframes page-load {
    from { opacity: 0; }
    to { opacity: 1; }
}