/* ============================================================
   ENHANCE.CSS — visual polish layer (safe, additive, non-destructive)
   Loaded AFTER style.css so it can refine without breaking layout.
   ============================================================ */

:root {
    --e-navy: #042462;
    --e-navy-dark: #01122f;
    --e-orange: #ff6500;
    --e-orange-light: #ff8a3d;
    --e-cream: #f8f1e8;
}

/* ---------- Animated backdrop for the whole page ---------- */
html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    background: linear-gradient(180deg, #fffaf3 0%, #fdf3e7 35%, #f7ecdd 100%);
    overflow-x: hidden;
}

/* soft drifting orbs behind the content — pure CSS, no images */
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
    pointer-events: none;
    will-change: transform;
}

body::before {
    width: 480px;
    height: 480px;
    top: -140px;
    left: -120px;
    background: radial-gradient(circle at 30% 30%, var(--e-orange-light), transparent 70%);
    animation: e-float-a 22s ease-in-out infinite;
}

body::after {
    width: 560px;
    height: 560px;
    bottom: -180px;
    right: -160px;
    background: radial-gradient(circle at 60% 40%, var(--e-navy), transparent 70%);
    opacity: 0.18;
    animation: e-float-b 26s ease-in-out infinite;
}

@keyframes e-float-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(60px, 80px) scale(1.15); }
}

@keyframes e-float-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-50px, -60px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Navbar polish ---------- */
.navbar.sticky-top {
    background: linear-gradient(90deg, var(--e-navy) 0%, #0a2f78 100%) !important;
    transition: box-shadow .25s ease, padding .25s ease;
}

.navbar.sticky-top.scrolled {
    box-shadow: 0 10px 30px rgba(2, 6, 23, .35);
}

.nav-link {
    transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* ---------- Section reveal-on-scroll ---------- */
.e-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}

.e-reveal.e-in {
    opacity: 1;
    transform: translateY(0);
}

.e-reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity .7s ease, transform .7s ease;
}
.e-reveal-left.e-in { opacity: 1; transform: translateX(0); }

.e-reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity .7s ease, transform .7s ease;
}
.e-reveal-right.e-in { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .e-reveal, .e-reveal-left, .e-reveal-right {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* ---------- Cards / images: gentle lift on hover ---------- */
.hero-container,
.anthem-card,
.about-section,
.counter-box-card,
.game_img,
.testimonial-carousel {
    transition: transform .35s ease, box-shadow .35s ease;
}

.hero-container:hover,
.anthem-card:hover,
.game_img:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(4, 36, 98, .18);
}

/* ---------- Buttons: shine + press micro-interaction ---------- */
.btn-hero,
.btn-hero1,
.btn-sankalp-badge,
.share-btn,
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-hero:hover,
.btn-hero1:hover,
.btn-sankalp-badge:hover,
.share-btn:hover,
.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.06);
    box-shadow: 0 12px 26px rgba(255, 101, 0, .35);
}

.btn-hero:active,
.btn-hero1:active,
.btn-sankalp-badge:active,
.share-btn:active,
.btn-primary:active {
    transform: translateY(0) scale(.98);
}

.btn-hero::after,
.btn-hero1::after,
.btn-sankalp-badge::after {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}

.btn-hero:hover::after,
.btn-hero1:hover::after,
.btn-sankalp-badge:hover::after {
    left: 120%;
}

/* pulsing sticky pledge button so it draws the eye without being annoying */
#fixedPledgeButton {
    animation: e-pulse 2.8s ease-in-out infinite;
}
@keyframes e-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 101, 0, .45); }
    50%      { box-shadow: 0 0 0 12px rgba(255, 101, 0, 0); }
}

/* ---------- Counter digits: nicer chips ---------- */
.counter-box-card {
    border-radius: 16px;
}

/* ---------- Carousel arrows: subtle hover feedback ---------- */
.carousel-control-prev,
.carousel-control-next {
    transition: transform .25s ease;
}
.carousel-control-prev:hover { transform: translateX(-4px); }
.carousel-control-next:hover { transform: translateX(4px); }

/* ---------- Section dividers for rhythm between blocks ---------- */
.e-wave-divider {
    display: block;
    width: 100%;
    line-height: 0;
    margin: 0;
}
.e-wave-divider svg { display: block; width: 100%; height: 40px; }

/* ---------- Back to top button ---------- */
#eBackToTop {
    position: fixed;
    right: 20px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--e-orange);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 22px rgba(4, 36, 98, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
    z-index: 1200;
    cursor: pointer;
}
#eBackToTop.e-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#eBackToTop:hover {
    background: var(--e-navy);
}

/* ---------- Scroll progress bar ---------- */
#eScrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--e-orange), var(--e-orange-light));
    z-index: 1300;
    transition: width .1s linear;
}

/* ---------- Loading fade-in on first paint ---------- */
body.e-loaded #hero-section,
body.e-loaded .top-section {
    animation: e-fade-in .9s ease both;
}
@keyframes e-fade-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Premium Footer & Social Styles ---------- */
.footer-section {
    background: #0d2f59;
    padding: 50px 20px;
    text-align: center;
    color: #ffffff;
    font-family: 'Mukta', sans-serif;
    position: relative;
    z-index: 10;
}
.footer-text-group p {
    margin: 0;
    line-height: 1.5;
}
.footer-thanks {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
}
.footer-team {
    font-size: 26px;
    font-weight: 700;
    margin-top: 5px !important;
}
.footer-link {
    color: #ff6500;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s ease;
    display: inline-block;
    margin-top: 8px;
}
.footer-link:hover {
    color: #ff8a3d !important;
}
.footer-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    max-width: 500px;
    margin: 25px auto;
}
.footer-social-title {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.85;
    margin-bottom: 20px;
}
.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #ffffff !important;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}
.footer-social-btn:hover {
    transform: scale(1.15);
}
.fb-btn { background: #1877F2; box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3); }
.fb-btn:hover { box-shadow: 0 6px 16px rgba(24, 119, 242, 0.5); }
.x-btn { background: #000000; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.x-btn:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.ig-btn { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow: 0 4px 12px rgba(220, 39, 67, 0.3); }
.ig-btn:hover { box-shadow: 0 6px 16px rgba(220, 39, 67, 0.5); }
.yt-btn { background: #FF0000; box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3); }
.yt-btn:hover { box-shadow: 0 6px 16px rgba(255, 0, 0, 0.5); }