/* Explain: Layout utilities and custom text animations for page sections. */
.section-pad {
    padding-top: clamp(5.5rem, 10vw, 9rem);
    padding-bottom: clamp(5.5rem, 10vw, 9rem);
}

/* --- קישוט זהב מטאלי עם ברק נע --- */
.gold-text {
    background: linear-gradient(100deg, #B98F1E 0%, #F3DA8A 38%, #E2C158 55%, #B98F1E 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerGold 7s linear infinite;
}

/* --- כותרת צבעונית בדף הבית --- */
.brand-color-text {
    background: linear-gradient(100deg, #F3DA8A 0%, #E8C863 42%, #D4AF37 72%, #B8901C 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerGold 7s linear infinite;
}

.rainbow-color-text {
    background: linear-gradient(100deg, #7DD3FC 0%, #6EE7B7 18%, #FDE68A 34%, #FCA5A5 54%, #C4B5FD 72%, #7DD3FC 90%, #7DD3FC 100%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerGold 8s linear infinite;
}

@keyframes shimmerGold {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* --- גרסאות בהירות יותר של הכותרת הראשית בהירו --- */
.brand-color-text-lt {
    background: linear-gradient(100deg, #8FB8EE 0%, #A9CBFF 42%, #6FD6D7 72%, #8FD0AA 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerGold 7s linear infinite;
}

.rainbow-color-text-lt {
    background: linear-gradient(100deg, #4E86CC 0%, #2EA8AA 18%, #4A9463 34%, #C9A227 54%, #D98A6A 72%, #8A6FC0 90%, #4E86CC 100%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerGold 8s linear infinite;
}

/* --- שם מותג בגרדיאנט כחול בהיר וזהב מטאלי משתנה --- */
.brand-gold-blue {
    background: linear-gradient(100deg, #6FA8E8 0%, #8FC0FF 30%, #F3DA8A 60%, #E0BC55 78%, #D4AF37 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerGold 8s linear infinite;
}

/* --- גרסת זהב-כחול כהה וקריאה במיוחד על רקע קרם בהיר --- */
.brand-gold-blue-strong {
    background: linear-gradient(100deg, #0F3A75 0%, #1F4E8C 22%, #24509A 42%, #B8901C 70%, #C9A227 86%, #E0BC55 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7));
    animation: shimmerGold 8s linear infinite;
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.38); }
    50% { box-shadow: 0 0 0 14px rgba(212, 175, 55, 0); }
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.float-y {
    animation: floatY 7s ease-in-out infinite;
}

/* --- הגדלה תקופתית עדינה ללוגו --- */
@keyframes logoGrow {
    0%, 55%, 100% { transform: scale(1); }
    28% { transform: scale(1.13); }
}

.logo-jump {
    transform-origin: center center;
    animation: logoGrow 4.5s ease-in-out infinite;
}

/* --- רקעים --- */
.hero-split {
    background: linear-gradient(-45deg, #201B13, #2A241A, #242017, #1D1911, #201B13, #2A241A);
    background-size: 400% 400%;
    animation: gradientMove 18s ease infinite;
    color: var(--text-color);
}

.orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(8px);
    opacity: 0.5;
    pointer-events: none;
}

.cta-band {
    background: linear-gradient(135deg, #242017 0%, #2D2617 40%, #352C1A 70%, #242017 100%);
    background-size: 300% 300%;
    animation: gradientMove 20s ease infinite;
}

.contact-section {
    background:
        radial-gradient(circle at 8% 16%, rgba(212, 175, 55, 0.16), transparent 24rem),
        radial-gradient(circle at 92% 80%, rgba(47, 122, 82, 0.14), transparent 26rem),
        radial-gradient(circle at 20% 90%, rgba(109, 74, 168, 0.16), transparent 24rem),
        linear-gradient(180deg, var(--background-color), #1A1610);
}

/* --- אנימציות --- */
@keyframes scroll-rtl {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.animate-marquee {
    display: inline-flex;
    white-space: nowrap;
    animation: scroll-rtl 26s linear infinite;
    will-change: transform;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.5, 0, 0, 1) forwards;
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(70px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-right {
    animation: fadeInRight 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.delay-100 { animation-delay: 0ms; }
.delay-200 { animation-delay: 0ms; }
.delay-300 { animation-delay: 0ms; }

/* --- תווי מוזיקה מרחפים ברקע ההירו --- */
.music-notes-bg {
    z-index: 0;
    contain: paint;
}

.music-note {
    position: absolute;
    bottom: -4rem;
    color: var(--accent-color);
    animation-name: floatNote;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@keyframes floatNote {
    0% {
        transform: translate3d(calc(var(--drift-x, 6vw) * -0.6), 0, 0) rotate(0deg) scale(0.85);
    }
    50% {
        transform: translate3d(var(--drift-x, 6vw), -62vh, 0) rotate(190deg) scale(1.08);
    }
    100% {
        transform: translate3d(calc(var(--drift-x, 6vw) * -0.4), -128vh, 0) rotate(380deg) scale(0.9);
    }
}

/* --- טקסט גוף צבעוני וקריא --- */
.colorful-body-text {
    background: linear-gradient(100deg, #F3DA8A 0%, #EAD9A6 24%, #8FD0AA 46%, #6FD6D7 68%, #C4B5FD 88%, #F3DA8A 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerGold 9s linear infinite;
    font-weight: 500;
}

/* --- כיתוב קטגוריה מוגדל עם צבע זהב-כחול מתחלף --- */
.kicker-color-cycle {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 4.5vw, 2.7rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #C9A227;
    animation: kickerColorCycle 5s ease-in-out infinite;
}

@keyframes kickerColorCycle {
    0%, 100% { color: #C9A227; }
    50% { color: #1F4E8C; }
}

/* --- כיתוב ההירו "כל מה שקשור למוזיקה" — צבעים מתחלפים ללא הפסקה --- */
.hero-caption-color-cycle {
    display: inline-block;
    background-image: linear-gradient(
        100deg,
        #1F4E8C 0%,
        #24509A 16%,
        #B98F1E 32%,
        #24509A 50%,
        #C9A227 68%,
        #1F4E8C 84%,
        #24509A 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.65));
    animation: heroCaptionColorCycle 32s linear infinite;
}

@keyframes heroCaptionColorCycle {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* --- כותרת ההירו "מיוזיק פלוס / כל מה שקשור למוזיקה" — זהב וכחול מתחלפים כמו כיתוב הלוגו --- */
.hero-title-color-cycle {
    background-image: linear-gradient(
        100deg,
        #1F4E8C 0%,
        #24509A 16%,
        #B98F1E 32%,
        #24509A 50%,
        #C9A227 68%,
        #1F4E8C 84%,
        #24509A 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.65));
    animation: heroCaptionColorCycle 16s linear infinite;
}