/*
 * ═══════════════════════════════════════════════════════════════
 *  footer_fj26.css
 *  Fesyar Jawa 2026 — footer redesign
 *
 *  Cool animated aurora background for <footer class="main-footer">,
 *  refreshed text colors (reusing the --fj26-* tokens declared in
 *  color_fj26_override.css), and a staggered fade/rise-in micro
 *  animation on the footer menu columns + links that plays once on
 *  page load.
 *
 *  Loaded LAST in <head>, after color_fj26_override.css, so nothing
 *  in any existing CSS/JS file needs to change.
 *  <link rel="stylesheet" href="/asset_easy/css_town/footer_fj26.css">
 * ═══════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════ */
@keyframes fj26AuroraDrift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%, 0 0; }
  50%  { background-position: 35% 15%, 65% 85%, 55% 45%, 0 0; }
  100% { background-position: 0% 0%, 100% 100%, 50% 50%, 0 0; }
}
@keyframes fj26FadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fj26FadeScale {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fj26PulseGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(53,225,255,0.35); }
  50%      { text-shadow: 0 0 18px rgba(53,225,255,0.75); }
}
@keyframes fj26UnderlineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ══════════════════════════════════════════════════════
   1. COOL ANIMATED BACKGROUND
══════════════════════════════════════════════════════ */
.main-footer {
    background: linear-gradient(180deg, #030714 0%, #050B22 100%) !important;
}

.footer-inner {
    background:
        radial-gradient(ellipse 60% 70% at 12% 8%, rgba(30,111,255,0.28), transparent 60%),
        radial-gradient(ellipse 55% 65% at 92% 92%, rgba(23,201,148,0.20), transparent 60%),
        radial-gradient(ellipse 40% 50% at 55% 45%, rgba(53,225,255,0.12), transparent 65%),
        linear-gradient(160deg, #030714 0%, #0A1442 55%, #0A2A5E 100%) !important;
    background-size: 220% 220%, 220% 220%, 220% 220%, 100% 100% !important;
    background-repeat: no-repeat !important;
    animation: fj26AuroraDrift 22s ease-in-out infinite !important;
}

/* tone down the legacy map-dot watermark image to match the blue palette */
.footer-inner .footer-bg {
    filter: hue-rotate(160deg) saturate(1.4) brightness(1.3) !important;
    opacity: 0.22 !important;
}

.footer-wave svg path {
    fill: rgba(3,7,20,0.6) !important;
}

.sub-footer {
/*
    background: #030714 !important;
*/
}

/* ══════════════════════════════════════════════════════
   2. TEXT COLOR REFRESH
══════════════════════════════════════════════════════ */
.main-footer .subscribe-header p {
    color: rgba(230,240,255,0.65) !important;
}
.main-footer .footer-widget h3 {
    border-bottom-color: rgba(53,225,255,0.16) !important;
}
.main-footer .footer-widget h3:before {
    background: linear-gradient(90deg, var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)) !important;
    height: 2px !important;
    transform-origin: left center;
    animation: fj26UnderlineGrow .8s ease .5s both;
}
.main-footer .down-btn-sosmed {
    box-shadow: 0 0 0 2px rgba(53,225,255,0.28) !important;
    color: var(--fj26-cyan,#35E1FF) !important;
}
.main-footer .down-btn-sosmed:hover {
    box-shadow: 0 0 0 2px rgba(53,225,255,0.55) !important;
    color: var(--fj26-white,#F3F7FF) !important;
}
.main-footer .down-btn-sosmed i {
    box-shadow: 0 9px 26px rgba(10,20,66,0.5) !important;
}

/* ── footer menu bullet icons (replaces the old li1.png dot) ──
   NOTE: the glow uses a static box-shadow, not an animated one — animating
   box-shadow continuously on a dozen elements is a real (non-composited)
   repaint cost, so the "alive" feeling comes from the opacity-only pulse
   on a pseudo-layer instead, which the compositor can run cheaply. */
@keyframes fj26IconGlowPulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: .9;  }
}
.main-footer .footer-widget-posts .fj26-li-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-right: 2px;
    border-radius: 50%;
    color: var(--fj26-cyan,#35E1FF);
    background: rgba(53,225,255,0.10);
    box-shadow: 0 0 0 1px rgba(53,225,255,0.3);
    vertical-align: middle;
    position: relative;
    top: -1px;
    transition: transform .25s ease, background .3s ease, color .3s ease;
}
.main-footer .footer-widget-posts .fj26-li-ico:before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    box-shadow: 0 0 8px 1px rgba(53,225,255,0.55);
    opacity: .35;
    animation: fj26IconGlowPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}
.main-footer .footer-widget-posts .fj26-li-ico svg {
    display: block;
    position: relative;
    transition: transform .25s ease;
}
.main-footer .footer-link:hover .fj26-li-ico {
    background: linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-green,#17C994));
    color: #fff;
    transform: scale(1.12);
}
.main-footer .footer-link:hover .fj26-li-ico svg {
    transform: translateX(1px);
}
.main-footer .footer-widget-posts a.footer-link:nth-of-type(1) .fj26-li-ico:before { animation-delay: 0s;   }
.main-footer .footer-widget-posts a.footer-link:nth-of-type(2) .fj26-li-ico:before { animation-delay: .3s;  }
.main-footer .footer-widget-posts a.footer-link:nth-of-type(3) .fj26-li-ico:before { animation-delay: .6s;  }
.main-footer .footer-widget-posts a.footer-link:nth-of-type(4) .fj26-li-ico:before { animation-delay: .9s;  }
.main-footer .footer-widget-posts a.footer-link:nth-of-type(5) .fj26-li-ico:before { animation-delay: 1.2s; }
.main-footer .footer-widget-posts a.footer-link:nth-of-type(6) .fj26-li-ico:before { animation-delay: 1.5s; }

/* ══════════════════════════════════════════════════════
   3. MICRO ANIMATIONS — plays once on page load
══════════════════════════════════════════════════════ */

/* whole footer columns rise+fade in, staggered left to right */
.main-footer .footer-inner > .container > .row > div {
    opacity: 0;
    animation: fj26FadeUp .7s ease both;
}
.main-footer .footer-inner > .container > .row > div:nth-child(1) { animation-delay: 0s;    }
.main-footer .footer-inner > .container > .row > div:nth-child(2) { animation-delay: .05s;  }
.main-footer .footer-inner > .container > .row > div:nth-child(3) { animation-delay: .1s;   }
.main-footer .footer-inner > .container > .row > div:nth-child(4) { animation-delay: .15s;  }
.main-footer .footer-inner > .container > .row > div:nth-child(5) { animation-delay: .25s;  }
.main-footer .footer-inner > .container > .row > div:nth-child(6) { animation-delay: .35s;  }
.main-footer .footer-inner > .container > .row > div:nth-child(7) { animation-delay: .45s;  }
.main-footer .footer-inner > .container > .row > div:nth-child(8) { animation-delay: .55s;  }

/* footer logo */
.main-footer .footer-logo img {
    opacity: 0;
    animation: fj26FadeUp .6s ease .1s both;
}

/* section heading glow, settles into a slow pulse after entrance */
.main-footer .subscribe-header h3 span {
    animation: fj26PulseGlow 3.2s ease-in-out 1.1s infinite;
}

/* menu link text — fine per-item stagger within each column ("micro" motion) */
.main-footer .footer-widget-posts a.footer-link {
    opacity: 0;
    animation: fj26FadeUp .5s ease both;
}
.main-footer .footer-widget-posts a.footer-link:nth-of-type(1) { animation-delay: .35s; }
.main-footer .footer-widget-posts a.footer-link:nth-of-type(2) { animation-delay: .43s; }
.main-footer .footer-widget-posts a.footer-link:nth-of-type(3) { animation-delay: .51s; }
.main-footer .footer-widget-posts a.footer-link:nth-of-type(4) { animation-delay: .59s; }
.main-footer .footer-widget-posts a.footer-link:nth-of-type(5) { animation-delay: .67s; }
.main-footer .footer-widget-posts a.footer-link:nth-of-type(6) { animation-delay: .75s; }

/* social icons pop in */
.main-footer .down-btn-sosmed {
    opacity: 0;
    animation: fj26FadeScale .5s ease both;
}
.main-footer .down-btn-sosmed:nth-of-type(1) { animation-delay: .6s;  }
.main-footer .down-btn-sosmed:nth-of-type(2) { animation-delay: .68s; }

/* newsletter title + form */
.main-footer .subscribe-header h3 {
    opacity: 0;
    animation: fj26FadeUp .6s ease both;
}
.main-footer .subscribe-widget {
    opacity: 0;
    animation: fj26FadeUp .6s ease .12s both;
}

/* respect users who'd rather not see motion */
@media (prefers-reduced-motion: reduce) {
    .footer-inner,
    .main-footer .footer-inner > .container > .row > div,
    .main-footer .footer-logo img,
    .main-footer .subscribe-header h3 span,
    .main-footer .footer-widget-posts a.footer-link,
    .main-footer .footer-widget-posts .fj26-li-ico:before,
    .main-footer .down-btn-sosmed,
    .main-footer .subscribe-header h3,
    .main-footer .subscribe-widget,
    .main-footer .footer-widget h3:before {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}