/* ========================================
   Dysser — Custom Styles + Animations
   ======================================== */

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

/* === Fade animations === */
.fade-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--delay, 0s);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--delay, 0s);
}
.fade-left.visible { opacity: 1; transform: translateX(0); }

.fade-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--delay, 0s);
}
.fade-right.visible { opacity: 1; transform: translateX(0); }

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--delay, 0s);
}
.scale-in.visible { opacity: 1; transform: scale(1); }

/* === Nav === */
.nav-link { position: relative; }
.nav-link.active { color: #fff !important; background: rgba(163,161,25,0.18); }
.nav-link.active::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 16px; height: 2px; background: #C8963E; border-radius: 2px;
}

/* === Preloader === */
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* === Cookie banner === */
#cookieBanner.visible { transform: translateY(0) !important; }
#cookieBanner.cookie-hidden { transform: translateY(100%) !important; }

/* === Mobile menu === */
#mobileMenu.open { transform: translateX(0) !important; }

/* === Hero floating elements === */
.hero-float {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(163,161,25,0.15);
    animation: heroFloat 20s ease-in-out infinite;
}
.hero-float:nth-child(1) { width: 300px; height: 300px; top: 10%; left: -5%; animation-delay: 0s; }
.hero-float:nth-child(2) { width: 200px; height: 200px; top: 60%; right: -3%; animation-delay: -7s; }
.hero-float:nth-child(3) { width: 150px; height: 150px; bottom: 15%; left: 10%; animation-delay: -14s; }

@keyframes heroFloat {
    0%, 100% { transform: translate(0,0) rotate(0deg); opacity: 0.3; }
    25% { transform: translate(20px,-30px) rotate(5deg); opacity: 0.5; }
    50% { transform: translate(-10px,20px) rotate(-3deg); opacity: 0.35; }
    75% { transform: translate(15px,10px) rotate(2deg); opacity: 0.45; }
}

/* === Glowing accent line === */
.glow-line {
    height: 3px;
    background: linear-gradient(90deg, transparent, #C8963E, transparent);
    animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* === Card shimmer on hover === */
.card-shimmer { position: relative; overflow: hidden; }
.card-shimmer::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: left 0.6s ease;
}
.card-shimmer:hover::before { left: 100%; }

/* === Counter === */
.counter { font-variant-numeric: tabular-nums; }

/* === Select arrow === */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23627d98' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px !important;
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f7f8fa; }
::-webkit-scrollbar-thumb { background: #bcccdc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #829ab1; }

/* === Brand logos in firmas section === */
.brand-logo-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: 100px; padding: 16px;
}
/* Brand logos in colored cards: force white via CSS filter */
.brand-logo-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: 60px; padding: 8px;
}
.brand-logo-wrap img {
    max-height: 60px; max-width: 220px; object-fit: contain;
    filter: brightness(0) invert(1);
    transition: all 0.4s ease;
}
.brand-logo-wrap svg {
    max-height: 60px; max-width: 220px;
    filter: brightness(0) invert(1);
    transition: all 0.4s ease;
}
.group:hover .brand-logo-wrap img,
.group:hover .brand-logo-wrap svg {
    transform: scale(1.08);
}

/* === Typing cursor effect === */
.typing-cursor::after {
    content: '|'; animation: blink 1s step-end infinite; color: #C8963E;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* === Staggered grid children === */
.stagger-grid > *:nth-child(1) { --delay: 0s; }
.stagger-grid > *:nth-child(2) { --delay: 0.1s; }
.stagger-grid > *:nth-child(3) { --delay: 0.2s; }
.stagger-grid > *:nth-child(4) { --delay: 0.3s; }

/* === Divider wave === */
.wave-divider {
    position: relative; overflow: hidden;
}
.wave-divider::after {
    content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23ffffff' d='M0,30 C360,60 720,0 1080,30 C1260,45 1350,40 1440,30 L1440,60 L0,60 Z'/%3E%3C/svg%3E") no-repeat center bottom;
    background-size: cover;
}