/* ==========================================
   STYLE DEDYKOWANE PODSTRONIE: LEKCJE.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 */
.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; 
}

/* Listy wewnątrz kart */
.glass-card ul li i {
    font-size: 1.1rem;
}

/* ------------------------------------------
   PRZYCISK CTA (JEDNOLITY Z INNYMI PODSTRONAMI)
   ------------------------------------------ */
.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; }