/* ==========================================================================
   EXPERIENCE PAGE - HYBRID ENGINE & SCROLL ANIMATIONS
   ========================================================================== */
body { 
    background-color: #020C1D; 
    overflow-x: hidden; 
}

/* 1. HERO WRAPPER */
.abv-hero-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden; 
}

/* ==========================================================================
   AMBIENT GOLD SILK (Ultra-Luxury Hero Background)
   ========================================================================== */
.abv-ambient-silk {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1; /* Sits right behind your gold dust particles! */
    pointer-events: none; /* Never steals clicks */
}

.silk-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px); /* Massive blur creates the soft silk/aurora effect */
    opacity: 0.5;
    animation: silk-drift 25s infinite alternate ease-in-out;
    pointer-events: none;
}

/* Deep, rich gold in the top left */
.orb-1 {
    width: 60vw; height: 60vw;
    background: radial-gradient(circle, #B38728 0%, transparent 70%);
    top: -20%; left: -10%;
    animation-duration: 30s;
}

/* Brighter champagne/gold in the bottom right */
.orb-2 {
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, #D4AF37 0%, transparent 70%);
    bottom: -20%; right: -10%;
    animation-delay: -5s;
    animation-duration: 35s;
}

/* Soft, subtle highlight passing through the center */
.orb-3 {
    width: 40vw; height: 40vw;
    background: radial-gradient(circle, #F7E7CE 0%, transparent 70%);
    top: 30%; left: 30%;
    opacity: 0.25;
    animation-delay: -15s;
    animation-duration: 28s;
}

/* The slow, organic breathing movement */
@keyframes silk-drift {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(6vw, -6vh) scale(1.1); }
    66% { transform: translate(-4vw, 8vh) scale(0.9); }
    100% { transform: translate(3vw, 3vh) scale(1.15); }
}

/* 2. GLOBAL PARTICLE LAYER (Ambient Gold Dust) */
.abv-global-particles {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    z-index: 1;
    pointer-events: none;
    overflow: visible; 
}

/* The Concentric Rings */
.abv-concentric-circle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.1);
    pointer-events: none;
    animation: slow-pulse 25s linear infinite;
}

@keyframes slow-pulse {
    0% { width: 0vmin; height: 0vmin; opacity: 1; }
    80% { opacity: 0.15; }
    100% { width: 200vmin; height: 200vmin; opacity: 0; }
}

/* The Linear Particles */
.abv-css-circle {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.particle-burst { animation: burst-out forwards; }
@keyframes burst-out {
    0% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1.5); opacity: 0; }
}

.particle-stream { animation: stream-out infinite linear; }
@keyframes stream-out {
    0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1); opacity: 0; }
}

/* 5. HERO TEXT */
.abv-hero-text-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none; 
}

.abv-hero-gradient {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(2, 12, 29, 0.2) 0%, rgba(2, 12, 29, 0.95) 100%);
    z-index: 5;
    pointer-events: none;
}

/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */
.abv-portfolio-viewport { position: relative; z-index: 20; background: transparent !important; }

/* Philosophy Section */
.abv-philosophy-container { display: flex; max-width: 1200px; margin: 0 auto 120px auto; gap: 30px; overflow: hidden; }
.abv-phil-box { flex: 1; padding: 60px; border-radius: 4px; }
.abv-phil-dark { border: 1px solid rgba(212, 175, 55, 0.3); background: rgba(2, 12, 29, 0.8); backdrop-filter: blur(5px); }
.abv-phil-gold { background: linear-gradient(135deg, #D4AF37 0%, #FBF5B7 50%, #B38728 100%); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }

/* STRICT OVERRIDE: Forces dark blue text on the gold box! */
.abv-phil-gold h3, 
.abv-phil-gold span, 
.abv-phil-gold p {
    color: #020C1D !important;
    -webkit-text-fill-color: #020C1D !important;
    background: none !important; 
}

.abv-phil-list { list-style: none; padding: 0; margin: 0; }
.abv-phil-list li { font-family: 'Montserrat', sans-serif; font-size: 15px; color: #F7E7CE; margin-bottom: 20px; padding-left: 30px; position: relative; line-height: 1.6; }
.abv-phil-list li::before { content: '✕'; position: absolute; left: 0; color: #D4AF37; font-weight: bold; }

/* ==========================================================================
   ZIG-ZAG COMMISSIONS & B&W REVEAL
   ========================================================================== */
.abv-comm-section-header {
    width: 100%;
    padding: 0 20px;
}

.abv-comm-zigzag-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 120px; 
}

.abv-comm-row {
    display: flex;
    align-items: center;
    gap: 80px;
}

.abv-comm-row.reverse {
    flex-direction: row-reverse;
}

.abv-comm-image-col, .abv-comm-text-col {
    flex: 1;
}

.abv-comm-image-col {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    border: 1px solid rgba(212, 175, 55, 0.2);
    line-height: 0; 
}

/* The Black & White Image Base State */
.abv-color-reveal-img {
    width: 100%;
    height: 500px; 
    object-fit: cover;
    filter: grayscale(100%); 
    transform: scale(1.05); 
    transition: filter 2s cubic-bezier(0.16, 1, 0.3, 1), transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.abv-is-visible .abv-color-reveal-img {
    filter: grayscale(0%);
    transform: scale(1); 
}

.abv-comm-item { 
    background: rgba(2, 12, 29, 0.85); 
    backdrop-filter: blur(5px); 
    border: 1px solid rgba(212, 175, 55, 0.15); 
    padding: 60px; 
    transition: transform 0.4s ease, border-color 0.4s ease; 
}
.abv-comm-item:hover { border-color: rgba(212, 175, 55, 0.5); }

/* ==========================================================================
   SHINY GOLD ANIMATED SUBHEADINGS
   ========================================================================== */
.abv-comm-title { 
    font-family: 'Playfair Display', serif; 
    font-size: 24px; 
    margin-bottom: 20px; 
    font-style: italic; 
    background: linear-gradient(
        to right, 
        #D4AF37 20%,  
        #ffcc00 40%,  
        #FFF8E7 50%,  
        #ffcc00 60%,  
        #D4AF37 80%   
    );
    background-size: 200% auto;
    color: #D4AF37; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: abv-text-shine 10s linear infinite;
    filter: drop-shadow(0 0 1px rgba(255, 238, 187, 0.2)); 
}

@keyframes abv-text-shine {
    0% { background-position: 200% center; }
    100% { background-position: 0% center; }
}
.abv-comm-desc { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #F7E7CE; line-height: 1.8; margin-bottom: 25px; opacity: 0.9; }
.abv-comm-features { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(212, 175, 55, 0.2); padding-top: 20px; }
.abv-comm-features li { font-family: 'Montserrat', sans-serif; font-size: 13px; color: #FFF; margin-bottom: 12px; padding-left: 20px; position: relative; text-transform: uppercase; letter-spacing: 1px; }
.abv-comm-features li::before { content: '—'; position: absolute; left: 0; color: #D4AF37; }

/* ==========================================================================
   JOURNEY / PROCESS SECTION
   ========================================================================== */
.abv-journey-section { max-width: 800px; margin: 0 auto; }
.abv-journey-timeline { position: relative; padding-left: 80px; }
.abv-journey-timeline::before { 
    content: ''; position: absolute; left: 30px; top: 0; bottom: 0; width: 2px; 
    background: linear-gradient(to bottom, #D4AF37, transparent);
    transform: scaleY(0); transform-origin: top; transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1); 
}
.abv-journey-timeline.abv-is-visible::before { transform: scaleY(1); } 

.abv-journey-step { position: relative; margin-bottom: 60px; }
.abv-step-number { position: absolute; left: -80px; top: -15px; font-family: 'Playfair Display', serif; font-size: 4rem; font-weight: 700; color: #D4AF37; background: #020C1D; padding: 10px 0; line-height: 1; }
.abv-step-title { font-family: 'Playfair Display', serif; font-size: 2rem; color: #FFF; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 3px; }

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.abv-faq-container { max-width: 800px; margin: 0 auto; }
.abv-faq-item { border-bottom: 1px solid rgba(212, 175, 55, 0.2); margin-bottom: 20px; }
.abv-faq-question { font-family: 'Playfair Display', serif; font-size: 22px; color: #D4AF37; padding: 20px 0; cursor: pointer; list-style: none; position: relative; outline: none; }
.abv-faq-question::-webkit-details-marker { display: none; }
.abv-faq-question::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 300; color: #D4AF37; transition: transform 0.3s ease; }
.abv-faq-item[open] .abv-faq-question::after { transform: translateY(-50%) rotate(45deg); }
.abv-faq-answer { font-family: 'Montserrat', sans-serif; font-size: 15px; color: #F7E7CE; line-height: 1.8; padding-bottom: 30px; opacity: 0.9; }

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */
.abv-reveal-up { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.abv-reveal-left { opacity: 0; transform: translateX(-50px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.abv-reveal-right { opacity: 0; transform: translateX(50px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }

.abv-is-visible { opacity: 1; transform: translate(0); }

.abv-delay-1 { transition-delay: 0.1s; }
.abv-delay-2 { transition-delay: 0.3s; }
.abv-delay-3 { transition-delay: 0.5s; }

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
@media (max-width: 992px) {
    .abv-philosophy-container { flex-direction: column; }
    
    .abv-comm-row, .abv-comm-row.reverse { 
        flex-direction: column; 
        gap: 40px; 
    }
    
    .abv-comm-item { padding: 40px 30px; }
    .abv-color-reveal-img { height: 400px; } 
}

@media (max-width: 768px) {
    .abv-journey-timeline { padding-left: 0; text-align: center; }
    .abv-journey-timeline::before { display: none; }
    .abv-step-number { position: relative; left: 0; top: 0; margin-bottom: 10px; background: transparent; }
    .abv-phil-box { padding: 40px 20px; }
}