/* ==========================================
   STYLES FOR PODSTRONA: O MNIE (EduFlow)
   Efekt Szkła + Tęczowa Ramka na Hover (100% działające zaokrąglenie)
   ========================================== */

/* 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: 3rem 2.5rem !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 z idealnie zaokrąglonymi rogami */
.glass-card::before {
    content: "";
    position: absolute;
    inset: -2px; /* Docięcie idealnie do granic karty */
    border-radius: 2rem; 
    padding: 2px; /* Grubość ramki */
    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; /* Domyślnie niewidoczna */
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* 3. Hover: Płynne ujawnienie tęczy i miękkiej poświaty */
.glass-card:hover::before {
    opacity: 1; /* Płynne włączenie tęczowej ramki */
}

.glass-card:hover {
    box-shadow: 0 10px 35px 0 rgba(255, 94, 126, 0.2);
    border-color: transparent !important; /* Ukrywamy zwykłą ramkę na rzecz tęczowej */
}

/* 4. Różowo-brzoskwiniowe pigułki */
.badge-glass-pink {
    background: linear-gradient(135deg, #FF758C 0%, #FF7EB3 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(255, 118, 142, 0.3);
    border: none;
    transition: box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.badge-glass-pink:hover {
    box-shadow: 0 6px 20px rgba(255, 118, 142, 0.45);
}

/* 5. Kolory ikonek w kartach */
.bg-rose-pink {
    background: linear-gradient(135deg, #FF758C, #FF7EB3) !important;
}

.bg-soft-purple {
    background: linear-gradient(135deg, #A88BEB, #F8CEEC) !important;
}

.bg-warm-coral {
    background: linear-gradient(135deg, #FF8E53, #FF6B8B) !important;
}

/* Linia rozdzielająca wewnątrz karty w pastelowym różu */
@media (min-width: 992px) {
    .border-end-lg-pink {
        border-right: 1.5px solid rgba(255, 182, 193, 0.45) !important;
    }
}

/* ==========================================
   ANIMACJE: MACHAJĄCA DŁOŃ I SCROLL REVEAL
   ========================================== */

/* 1. Animacja machającej dłoni 👋 */
.waving-hand {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: wave-animation 2.2s infinite ease-in-out;
}

@keyframes wave-animation {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* 2. Domyślny stan kart przed zjechaniem scrollem (ukryte i przesunięte) */
.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);
}

/* Opóźnienia dla 3 kart w rzędzie (efekt kaskady) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.25s; }
.delay-3 { transition-delay: 0.4s; }

/* Kluczowa klasa aktywowana przez JavaScript po dojechaniu scrollem */
.reveal-active {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}