/*
 * kontakt.css (Etap C split 2026-06-22) — animowane kwadraty kontaktowe, warunkowo strona kontakt.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMOWANE KWADRATY KONTAKTOWE
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-animated-squares {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 1.5vw, 20px);
    padding: clamp(12px, 2vw, 30px);
    perspective: 1000px;
    flex-wrap: nowrap;
}

.contact-square {
    --tile-size: clamp(94px, 11.7vw, 156px);
    width: var(--tile-size);
    height: var(--tile-size);
    min-width: var(--tile-size);
    min-height: var(--tile-size);
    max-width: var(--tile-size);
    max-height: var(--tile-size);
    flex-shrink: 0;
    flex-grow: 0;
    aspect-ratio: 1 / 1;
    border-radius: clamp(12px, 1.4vw, 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: white;
    position: relative;
    transform-style: preserve-3d;
    animation: squareRotate 9s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-square:hover {
    animation: none;
    transform: scale(1.08);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.contact-square-info {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    padding: 5px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--surface-900, #1a1a2e);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 5;
}

.contact-square:hover .contact-square-info {
    opacity: 1;
}

/* Gradient 1 - slate jasny → brand */
.contact-square-1 {
    background: linear-gradient(135deg, #5a72a4 0%, var(--surface-600, #304068) 100%);
    animation-delay: 0s;
}

/* Gradient 2 - slate mid → ciemny */
.contact-square-2 {
    background: linear-gradient(135deg, #4a649b 0%, #243453 100%);
    animation-delay: 3s;
}

/* Gradient 3 - ciemny granat → brand */
.contact-square-3 {
    background: linear-gradient(135deg, #1c2940 0%, var(--surface-600, #304068) 100%);
    animation-delay: 6s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WARIANT AGENCJA - slate-blue gradients (Fengo brand palette #304068)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Kafle agencja — paleta agencja.php: #1a1a2e / #2d2d44 / #40405a / #304068 */
.contact-squares-agencja .contact-square-1 {
    background: linear-gradient(135deg, #6e7ba8 0%, #40557e 100%);
}
.contact-squares-agencja .contact-square-2 {
    background: linear-gradient(135deg, #52526e 0%, #3c3c56 100%);
}
.contact-squares-agencja .contact-square-3 {
    background: linear-gradient(135deg, #40557e 0%, #2a2a44 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WARIANT DEFAULT - kolory pasujące do tlo_2.webp (niebiesko-różowa sieć)
   ═══════════════════════════════════════════════════════════════════════════ */
.contact-squares-default .contact-square-1 {
    background: linear-gradient(135deg, #e63956 0%, #ff4d6d 100%);
}
.contact-squares-default .contact-square-2 {
    background: linear-gradient(135deg, #3a5bc7 0%, #5b7cfa 100%);
}
.contact-squares-default .contact-square-3 {
    background: linear-gradient(135deg, #1a3a8a 0%, #2d5ae0 100%);
}

/* Animacja obrotu */
@keyframes squareRotate {
    0%, 30% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    35%, 65% {
        transform: rotateY(180deg) rotateX(10deg);
    }
    70%, 100% {
        transform: rotateY(360deg) rotateX(0deg);
    }
}

/* Ikony wewnątrz kwadratów — skalowanie razem z kaflem (~42% rozmiaru kafla) */
.contact-square i {
    font-size: clamp(39px, 4.9vw, 65px);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Bardzo wąski viewport (np. <360px, stary iPhone SE) — wymuś minimum */
@media (max-width: 359.98px) {
    .contact-square {
        --tile-size: 64px;
    }
    .contact-animated-squares {
        gap: 8px;
        padding: 8px 4px;
    }
    .contact-square i {
        font-size: 26px;
    }
}