/* ============================================
   FLOATING PHRASES - Motivational English Phrases
   ============================================ */

.floating-phrase {
    position: absolute;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.95);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    animation: floatPhrase 8s ease-in-out infinite;
    opacity: 0.9;
    transition: all var(--transition-base);
}

.floating-phrase:hover {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: var(--shadow-lg);
}

/* Individual phrase positions - Distributed in circular pattern around logo */

/* Top-left */
.phrase-1 {
    top: -5%;
    left: 8%;
    animation-delay: 0s;
    font-size: var(--fs-base);
}

/* Top-right */
.phrase-2 {
    top: -8%;
    right: 8%;
    animation-delay: -1s;
    color: var(--color-accent);
}

/* Right-top */
.phrase-3 {
    top: 10%;
    right: -18%;
    animation-delay: -2s;
    font-size: var(--fs-sm);
}

/* Right-middle */
.phrase-4 {
    top: 35%;
    right: -22%;
    animation-delay: -3s;
    color: var(--color-accent);
}

/* Right-bottom */
.phrase-5 {
    bottom: 30%;
    right: -20%;
    animation-delay: -4s;
    font-size: var(--fs-base);
}

/* Bottom-right */
.phrase-6 {
    bottom: -5%;
    right: 10%;
    animation-delay: -5s;
    font-size: var(--fs-sm);
}

/* Bottom-left */
.phrase-7 {
    bottom: -8%;
    left: 12%;
    animation-delay: -6s;
    font-size: var(--fs-xs);
}

/* Left-bottom */
.phrase-9 {
    bottom: 25%;
    left: -20%;
    animation-delay: -1.5s;
    font-size: var(--fs-base);
    color: var(--color-accent);
}

/* Left-middle */
.phrase-10 {
    top: 40%;
    left: -22%;
    animation-delay: -2.5s;
    font-size: var(--fs-sm);
}

/* Left-top */
.phrase-11 {
    top: 12%;
    left: -18%;
    animation-delay: -3.5s;
    color: var(--color-accent);
}

/* Floating animation */
@keyframes floatPhrase {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
    }

    25% {
        transform: translateY(-15px) translateX(10px);
    }

    50% {
        transform: translateY(-5px) translateX(-5px);
    }

    75% {
        transform: translateY(-20px) translateX(5px);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .floating-phrase {
        font-size: var(--fs-xs);
        padding: 4px 8px;
    }

    /* Hide some phrases on mobile to avoid clutter */
    .phrase-4,
    .phrase-7,
    .phrase-10 {
        display: none;
    }
}

@media (max-width: 480px) {

    /* Show only key phrases on very small screens */
    .phrase-2,
    .phrase-6,
    .phrase-9 {
        display: none;
    }
}