/**
 * ArZaib Custom Stylesheet - Luxury Aesthetic Enhancements & Global Transitions
 */

/* Baseline Configuration */
body {
    background-color: #0D0D0D;
    color: #FAF9F6;
    overflow-x: hidden;
}

/* Premium Metallic Gold Accent Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0D0D0D;
}
::-webkit-scrollbar-thumb {
    background: #C5A880;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #D4AF37;
}

/* Glassmorphism Navigation Controls */
.glass-nav {
    background: rgba(13, 13, 13, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Premium Card Overlays and Borders */
.glass-card {
    background: rgba(22, 22, 22, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Luxury Card Shadow Interactions */
.gold-border-glow {
    border: 1px solid rgba(197, 168, 128, 0.2);
    transition: border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.gold-border-glow:hover {
    border-color: rgba(197, 168, 128, 0.7);
    box-shadow: 0 0 25px rgba(197, 168, 128, 0.12);
}

/* Hardware-Accelerated Image Zoom Hover States */
.image-zoom-hover img {
    will-change: transform;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.image-zoom-hover:hover img {
    transform: scale(1.05);
}

/* Single Page Application (SPA) State Management Rules */
.view-panel {
    display: none;
    opacity: 0;
    will-change: opacity;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.view-panel.active {
    display: block;
    opacity: 1;
}

/* Accessible Element Keyboard Focus Indicator Styling */
input:focus, 
textarea:focus, 
select:focus,
button:focus-visible,
a:focus-visible {
    outline: 1px solid #D4AF37 !important;
    outline-offset: 2px;
}

/* Non-Intrusive Stacking Toast Entry Transitions */
.toast-slide-in {
    will-change: transform, opacity;
    animation: toastEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               toastExit 0.45s cubic-bezier(0.16, 1, 0.3, 1) 2.55s forwards;
}

@keyframes toastEnter {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastExit {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(30px) scale(0.95);
    }
}

/* High-Performance Fluid Hardware Transitions */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}  
/* whatsapp */
.whatsapp-float{
    position: fixed;
    bottom: 50px;
    right: 40px;

    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg,#0f0f0f,#1f1f1f);
    border: 2px solid #d4af37;

    color: #d4af37;
    font-size: 34px;

    text-decoration: none;

    box-shadow: 0 8px 30px rgba(212,175,55,.35);

    z-index: 9999;

    transition: all .35s ease;

    animation: goldPulse 2.5s infinite;
}

.whatsapp-float:hover{

    transform: translateY(-5px) scale(1.08);

    background: linear-gradient(135deg,#d4af37,#b8860b);

    color:#000;

    box-shadow:0 12px 35px rgba(212,175,55,.6);

}

.whatsapp-float:active{

    transform:scale(.95);

}

@keyframes goldPulse{

    0%{
        box-shadow:0 0 0 0 rgba(212,175,55,.45);
    }

    70%{
        box-shadow:0 0 0 18px rgba(212,175,55,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(212,175,55,0);
    }

}
.whatsapp-float span{

    position:absolute;
    right:80px;

    background:#111;
    color:#d4af37;

    padding:10px 14px;

    border:1px solid #d4af37;
    border-radius:8px;

    white-space:nowrap;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    font-size:12px;
    font-weight:500;
}

.whatsapp-float:hover span{

    opacity:1;
    visibility:visible;

}


@keyframes goldShine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

.animate-goldShine {
  animation: goldShine 4s linear infinite;
}

@keyframes goldShine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}