/*
 * UniCompare — Premium Text Color Animation
 * ─────────────────────────────────────────
 * ONLY affects text color.
 * No backgrounds, no gradients on sections,
 * no particles, no layout changes.
 *
 * Technique:
 *   background: linear-gradient on the TEXT node itself
 *   -webkit-background-clip: text
 *   background-clip: text
 *   color: transparent
 *   background-position animates — creates a smooth
 *   light-travelling-across-text shimmer effect.
 *
 * The gradient only exists on the text paint layer —
 * it is NOT a section background.
 */
/* ═══════════════════════════════════════════════════════════
   KEYFRAMES — Section headings
   ═══════════════════════════════════════════════════════════ */
/* Used on section headings (white / light backgrounds) */
@keyframes shimmerDark {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
/* Used on hero headings (dark / navy / purple backgrounds) */
@keyframes shimmerLight {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
/* ═══════════════════════════════════════════════════════════
   SECTION HEADING SHIMMER CLASSES
   Applied via JS to h1/h2/h3 across the website
   ═══════════════════════════════════════════════════════════ */
.uc-shimmer-dark {
    background: linear-gradient(
        90deg,
        #7359a6  0%,
        #7359a6  30%,
        #d1c4e9  50%,
        #b39ddb  70%,
        #7359a6 100%
    );
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmerDark 6s ease-in-out infinite;
    padding-bottom: .05em;
    display: inline-block;
}
.uc-shimmer-light {
    background: linear-gradient(
        90deg,
        #7359a6  0%,
        #d1c4e9 30%,
        #ffffff  50%,
        #7359a6 70%,
        #7359a6 100%
    );
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmerLight 5s ease-in-out infinite;
    padding-bottom: .05em;
    display: inline-block;
}
.uc-shimmer-gold {
    background: linear-gradient(
        90deg,
        #7359a6  0%,
        #d1c4e9 40%,
        #b39ddb 55%,
        #7359a6 100%
    );
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmerDark 7s ease-in-out infinite;
    padding-bottom: .05em;
    display: inline-block;
}
/* Block-level headings should remain full width */
h1.uc-shimmer-dark,
h2.uc-shimmer-dark,
h1.uc-shimmer-light,
h2.uc-shimmer-light {
    display: block;
}
/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — section headings
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .uc-shimmer-dark,
    .uc-shimmer-light,
    .uc-shimmer-gold {
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: unset !important;
        color: inherit !important;
        animation: none !important;
        padding-bottom: 0 !important;
    }
}
/* ═══════════════════════════════════════════════════════════
   MOBILE — section headings slightly slower
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .uc-shimmer-dark  { animation-duration: 8s; }
    .uc-shimmer-light { animation-duration: 7s; }
    .uc-shimmer-gold  { animation-duration: 9s; }
}
/* ═══════════════════════════════════════════════════════════
   NAVBAR / HEADER — Premium Left→Right Text Shimmer
   ───────────────────────────────────────────────────────────
   Same background-clip:text technique used for section
   headings above — applied to navbar text & icons.
   Classes applied directly in navbar.php HTML:
     .nav-shimmer-dark   → nav links  (base: #263650 dark-slate)
     .nav-shimmer-brand  → "Compare" span + tagline (base: #7359a6)
     .nav-icon-shimmer   → icon elements  (base: #071a3d navy)
     .nav-apply-shimmer  → Apply Now button text (base: white)
   Animation: background-position sweeps 200% → -200%
   so the bright #d1c4e9 band travels LEFT → RIGHT through
   the actual letter shapes, then repeats.
   ═══════════════════════════════════════════════════════════ */
/* ── Keyframe: LEFT → RIGHT sweep ────────────────────────── */
@keyframes navShimmerSweep {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
/* ── .nav-shimmer-dark ───────────────────────────────────────
   Nav links: Home, Universities, Courses, UG, PG,
   Compare, Blogs, Contact — base text color #263650.
   Shimmer: dark-slate → #7359a6 → #d1c4e9 peak → dark-slate */
.nav-shimmer-dark {
    background: linear-gradient(
        90deg,
        #263650  0%,
        #7359a6  38%,
        #7359a6  48%,
        #7359a6  52%,
        #7359a6  56%,
        #7359a6  62%,
        #7359a6  100%
    );
    background-size:           400% 100%;
    background-clip:           text;
    -webkit-background-clip:   text;
    -webkit-text-fill-color:   transparent;
    color:                     transparent;
    animation:                 navShimmerSweep 4s linear infinite;
    display:                   inline-block;
    padding-bottom:            .04em;
    vertical-align:            middle;
}
/* Staggered delays — 0.20s gap per item */
.site-header .navbar-nav .nav-item:nth-child(1) .nav-shimmer-dark { animation-delay: 0.20s; }
.site-header .navbar-nav .nav-item:nth-child(2) .nav-shimmer-dark { animation-delay: 0.40s; }
.site-header .navbar-nav .nav-item:nth-child(3) .nav-shimmer-dark { animation-delay: 0.60s; }
.site-header .navbar-nav .nav-item:nth-child(4) .nav-shimmer-dark { animation-delay: 0.80s; }
.site-header .navbar-nav .nav-item:nth-child(5) .nav-shimmer-dark { animation-delay: 1.00s; }
.site-header .navbar-nav .nav-item:nth-child(6) .nav-shimmer-dark { animation-delay: 1.20s; }
.site-header .navbar-nav .nav-item:nth-child(7) .nav-shimmer-dark { animation-delay: 1.40s; }
.site-header .navbar-nav .nav-item:nth-child(8) .nav-shimmer-dark { animation-delay: 1.60s; }
/* Mobile nav same delays */
.offcanvas .mobile-nav a:nth-child(1).nav-shimmer-dark { animation-delay: 0.20s; }
.offcanvas .mobile-nav a:nth-child(2).nav-shimmer-dark { animation-delay: 0.40s; }
.offcanvas .mobile-nav a:nth-child(3).nav-shimmer-dark { animation-delay: 0.60s; }
.offcanvas .mobile-nav a:nth-child(4).nav-shimmer-dark { animation-delay: 0.80s; }
.offcanvas .mobile-nav a:nth-child(5).nav-shimmer-dark { animation-delay: 1.00s; }
.offcanvas .mobile-nav a:nth-child(6).nav-shimmer-dark { animation-delay: 1.20s; }
.offcanvas .mobile-nav a:nth-child(7).nav-shimmer-dark { animation-delay: 1.40s; }
.offcanvas .mobile-nav a:nth-child(8).nav-shimmer-dark { animation-delay: 1.60s; }
/* Hover: brighter beam, faster sweep */
.nav-shimmer-dark:hover {
    background: linear-gradient(
        90deg,
        #7359a6  0%,
        #fff  35%,
        #7359a6  48%,
        #7359a6  52%,
        #fff  56%,
        #7359a6  65%,
        #7359a6  100%
    );
    background-size:         400% 100%;
    background-clip:         text;
    -webkit-background-clip: text;
    animation-duration:      2s;
}
/* nav-link padding must remain intact */
.site-header .nav-link.nav-shimmer-dark {
    padding:    29px 9px !important;
    display:    inline-block;
}
/* Restore the active underline pseudo-element */
.site-header .nav-link.nav-shimmer-dark::after {
    background: #7359a6;
}
/* Mobile nav full-width layout preserved */
.offcanvas .mobile-nav .nav-shimmer-dark {
    display:        block;
    width:          100%;
    padding-top:    13px;
    padding-bottom: 13px;
    border-bottom:  1px solid var(--line, #e3e8f1);
    font-weight:    700;
}
/* ── .nav-shimmer-brand ──────────────────────────────────────
   "Compare" span + tagline — base color #7359a6 purple.
   Shimmer: purple → #d1c4e9 → white peak → purple.           */
.nav-shimmer-brand {
    background: linear-gradient(
        90deg,
        #7359a6  0%,
        #7359a6  38%,
        #7359a6  48%,
        #7359a6  52%,
        #7359a6  56%,
        #7359a6  62%,
        #7359a6  100%
    );
    background-size:           400% 100%;
    background-clip:           text;
    -webkit-background-clip:   text;
    -webkit-text-fill-color:   transparent;
    color:                     transparent;
    animation:                 navShimmerSweep 4s linear infinite;
    display:                   inline-block;
    padding-bottom:            .04em;
    vertical-align:            middle;
}
/* "Uni" at 0s, "Compare" at 0.10s, tagline at 0.20s */
.navbar-brand .nav-shimmer-dark  { animation-delay: 0.00s; }
.navbar-brand .nav-shimmer-brand { animation-delay: 0.10s; }
.navbar-brand small.nav-shimmer-brand { animation-delay: 0.20s; }
.nav-shimmer-brand:hover { animation-duration: 2s; }
/* ── .nav-icon-shimmer ───────────────────────────────────────
   Bootstrap icon glyphs (font characters) inside the navbar.
   background-clip:text works on font glyphs the same way.
   Base: #071a3d navy → #7359a6 → #d1c4e9 peak → navy.       */
.nav-icon-shimmer {
    background: linear-gradient(
        90deg,
        #071a3d  0%,
        #071a3d  38%,
        #7359a6  48%,
        #d1c4e9  52%,
        #7359a6  56%,
        #071a3d  62%,
        #071a3d  100%
    );
    background-size:           400% 100%;
    background-clip:           text;
    -webkit-background-clip:   text;
    -webkit-text-fill-color:   transparent;
    color:                     transparent;
    animation:                 navShimmerSweep 4s linear 0.50s infinite;
    display:                   inline-block;
    line-height:               inherit;
}
/* Individual icon delays */
.site-header .brand-mark    .nav-icon-shimmer { animation-delay: 0.00s; }
.site-header .navbar-toggler .nav-icon-shimmer { animation-delay: 0.50s; }
.site-header .icon-button   .nav-icon-shimmer { animation-delay: 1.00s; }
.nav-icon-shimmer:hover { animation-duration: 2s; }
/* ── .nav-apply-shimmer ──────────────────────────────────────
   "Apply Now" button keeps its #7359a6 background.
   Only the TEXT letters shimmer: white → #d1c4e9 → white.   */
.nav-apply-shimmer {
    background-image: linear-gradient(
        90deg,
        #ffffff  0%,
        #7359a6  38%,
        #d1c4e9  48%,
        #ffffff  52%,
        #7359a6  56%,
        #7359a6  62%,
        #7359a6  100%
    ) !important;
    background-color:          #7359a6 !important;
    background-size:           400% 100% !important;
    background-clip:           text !important;
    -webkit-background-clip:   text !important;
    -webkit-text-fill-color:   transparent !important;
    border-color:              #7359a6 !important;
    animation:                 navShimmerSweep 4s linear 1.80s infinite;
}
.nav-apply-shimmer:hover {
    animation-duration:        2s;
    box-shadow:                0 8px 24px rgba(115,89,166,.4);
}
/* ── Reduced-motion: disable navbar shimmer ─────────────────*/
@media (prefers-reduced-motion: reduce) {
    .nav-shimmer-dark,
    .nav-shimmer-brand,
    .nav-icon-shimmer {
        background:              none !important;
        -webkit-background-clip: unset !important;
        background-clip:         unset !important;
        -webkit-text-fill-color: unset !important;
        color:                   inherit !important;
        animation:               none !important;
        padding-bottom:          0 !important;
        display:                 revert !important;
    }
    .site-header .nav-link.nav-shimmer-dark { color: #263650 !important; }
    .nav-apply-shimmer {
        background-image:        none !important;
        -webkit-text-fill-color: #ffffff !important;
        animation:               none !important;
    }
}
/* ── Mobile: slower & subtler ───────────────────────────────*/
@media (max-width: 767px) {
    .nav-shimmer-dark   { animation-duration: 5s; }
    .nav-shimmer-brand  { animation-duration: 5s; }
    .nav-icon-shimmer   { animation-duration: 5s; }
    .nav-apply-shimmer  { animation-duration: 5s !important; }
}