/* ==========================================
   STYLE DEDYKOWANE PODSTRONIE: KONTAKT.HTML
   Efekt Szkła + Tęczowa Ramka na Hover (Mask Gradient Border)
   ========================================== */

/* Zmienne kolorystyczne */
:root {
    --color-rose-pink: #FF6B8B;
    --color-soft-purple: #8B5CF6;
    --color-warm-coral: #FF5E24;
    --color-navy: #110B55;
}

.text-rose-pink { color: var(--color-rose-pink) !important; }
.text-soft-purple { color: var(--color-soft-purple) !important; }
.text-warm-coral { color: var(--color-warm-coral) !important; }

/* 1. Karta Szklana */
.glass-card {
    position: relative;
    background: rgba(255, 248, 250, 0.75) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    
    padding: 2.5rem 2rem !important; 
    border-radius: 2rem !important;
    
    /* Standardowa, delikatna różowa ramka */
    border: 2px solid rgba(255, 182, 193, 0.5) !important;
    box-shadow: 0 8px 32px 0 rgba(255, 105, 180, 0.06);
    transition: all 0.4s ease;
    z-index: 1;
}

/* 2. Ukryta tęczowa ramka gradientowa z maskowaniem */
.glass-card::before {
    content: "";
    position: absolute;
    inset: -2px; 
    border-radius: 2rem; 
    padding: 2px; 
    background: linear-gradient(135deg, #FF5E7E, #FF9E79, #FFD166, #06D6A0, #118AB2);
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;  
            mask-composite: exclude;
    opacity: 0; 
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* 3. Hover na kartę */
.glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 35px 0 rgba(255, 94, 126, 0.2);
    border-color: transparent !important; 
}

.glass-card:hover::before {
    opacity: 1; 
}

/* Ikony kontaktowe */
.contact-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

/* Warianty tła ikonek */
.bg-gradient-rose { background: linear-gradient(135deg, #FF758C, #FF7EB3); }
.bg-gradient-purple { background: linear-gradient(135deg, #A88BEB, #F8CEEC); }
.bg-gradient-coral { background: linear-gradient(135deg, #FF8E53, #FF6B8B); }
.bg-gradient-blue { background: linear-gradient(135deg, #118AB2, #06D6A0); }

/* Pola formularza w szklanym stylu */
.form-control-glass, .form-select-glass {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1.5px solid rgba(255, 182, 193, 0.6) !important;
    border-radius: 1rem !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.3s ease;
}

.form-control-glass:focus, .form-select-glass:focus {
    border-color: #FF758C !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 117, 140, 0.2) !important;
    outline: none;
}

/* ------------------------------------------
   PRZYCISK CTA (TĘCZOWY GRADIENT)
   ------------------------------------------ */
.btn-cta-rainbow {
    background: linear-gradient(135deg, #FF5E7E 0%, #FF9E79 40%, #A88BEB 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50rem !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 25px rgba(255, 94, 126, 0.3);
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cta-rainbow:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(255, 94, 126, 0.45) !important;
    color: #ffffff !important;
}

/* ------------------------------------------
   ANIMACJE ON-SCROLL (SCROLL REVEAL)
   ------------------------------------------ */

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-active {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.25s; }
.delay-3 { transition-delay: 0.4s; }