/**
 * ==============================================================================
 * GoToHosp: Website Ad Banners - Animated Clip-Path & Modern Visual Effects
 * File: public/css/ad-banners.css
 * 
 * Replace or edit this single file to update all ad banners across the entire
 * website (Homepage, Profile pages, Add Listing, Blog, Dashboard, Portal, etc.)
 * ==============================================================================
 */

:root {
    --ad-banner-sweep-duration: 4.5s;
    --ad-banner-primary-glow: rgba(99, 102, 241, 0.45);
    --ad-banner-secondary-glow: rgba(59, 130, 246, 0.40);
    --ad-banner-shimmer-color: rgba(255, 255, 255, 0.65);
    --ad-banner-corner-cut: 12px;
}

/* ==============================================================================
   1. Banner Card Wrapper - Geometric Chamfered Clip-Path
   ============================================================================== */
.ad-banner-card {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease,
                clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Sleek angled polygon cut on bottom-right corner */
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% calc(100% - var(--ad-banner-corner-cut)), 
        calc(100% - var(--ad-banner-corner-cut)) 100%, 
        0% 100%
    );
    will-change: transform, clip-path;
}

/* Hover: Smoothly morphs the clip-path to cut top-left corner as well + lifts up */
.ad-banner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -12px rgba(79, 70, 229, 0.18),
                0 4px 12px -2px rgba(0, 0, 0, 0.05);
    border-color: rgba(99, 102, 241, 0.45);
    clip-path: polygon(
        var(--ad-banner-corner-cut) 0%, 
        100% 0%, 
        100% calc(100% - calc(var(--ad-banner-corner-cut) + 4px)), 
        calc(100% - calc(var(--ad-banner-corner-cut) + 4px)) 100%, 
        0% 100%,
        0% var(--ad-banner-corner-cut)
    );
}

/* ==============================================================================
   2. Image Container & Continuous Diagonal Clip-Path Shimmer Sweep
   ============================================================================== */
.ad-banner-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(248, 250, 252, 1) 0%, rgba(241, 245, 249, 0.8) 100%);
}

/* Animated Light Beam Sweep using Dynamic Polygon Clip-Path */
.ad-banner-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 25%,
        var(--ad-banner-shimmer-color) 48%,
        var(--ad-banner-primary-glow) 52%,
        var(--ad-banner-shimmer-color) 56%,
        rgba(255, 255, 255, 0.08) 75%,
        rgba(255, 255, 255, 0) 100%
    );
    
    /* Initial angled polygon clip-path beam */
    clip-path: polygon(-60% 0%, -15% 0%, -35% 100%, -80% 100%);
    animation: adBannerClipSweep var(--ad-banner-sweep-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Continuous sweep keyframes moving diagonally across the banner */
@keyframes adBannerClipSweep {
    0%, 15% {
        clip-path: polygon(-60% 0%, -15% 0%, -35% 100%, -80% 100%);
        opacity: 0;
    }
    20% {
        opacity: 0.95;
    }
    50% {
        clip-path: polygon(115% 0%, 160% 0%, 140% 100%, 95% 100%);
        opacity: 0.95;
    }
    55%, 100% {
        clip-path: polygon(140% 0%, 185% 0%, 165% 100%, 120% 100%);
        opacity: 0;
    }
}

/* Faster sweep on user hover for immediate reactive feedback */
.ad-banner-card:hover .ad-banner-image-container::before {
    animation-duration: 2.2s;
}

/* ==============================================================================
   3. Banner Image Hover Micro-Interactions
   ============================================================================== */
.ad-banner-img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.35s ease;
    will-change: transform, filter;
}

.ad-banner-card:hover .ad-banner-img {
    transform: scale(1.018);
    filter: brightness(1.03) contrast(1.02);
}

/* ==============================================================================
   4. Corner Accent Triangle (Dynamic Chamfer Indicator)
   ============================================================================== */
.ad-banner-corner-accent {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 15;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.75) 100%);
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
    transition: all 0.3s ease;
}

.ad-banner-card:hover .ad-banner-corner-accent {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(79, 70, 229, 1) 100%);
}

/* ==============================================================================
   5. Fallback Branded Cards (Billbr / Anshu Web Solutions) Clip-Path Polish
   ============================================================================== */
.ad-banner-branded-card {
    position: relative;
    overflow: hidden;
}

.ad-banner-branded-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 45%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.15) 55%,
        transparent 100%
    );
    clip-path: polygon(-50% 0%, -10% 0%, -30% 100%, -70% 100%);
    animation: adBannerClipSweep var(--ad-banner-sweep-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 5;
}

/* ==============================================================================
   6. Accessibility & Performance
   ============================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ad-banner-card,
    .ad-banner-image-container::before,
    .ad-banner-branded-card::before,
    .ad-banner-img {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        clip-path: none !important;
    }
}