/* =====================================================================
   Metal Next Bazar - motion layer
   Loaded last so it can refine what style.css and pages.css set up.
   Everything here respects prefers-reduced-motion at the bottom.
   ===================================================================== */

/* ---------- Typography refinements for the new font stack ---------- */
h1, h2, h3, h4, h5 {
    font-weight: 700;
    letter-spacing: -.028em;
}
h1 { font-weight: 800; letter-spacing: -.042em; line-height: 1.08; }
h2 { font-weight: 700; letter-spacing: -.034em; line-height: 1.14; }

body { letter-spacing: -.006em; }

.btn { letter-spacing: -.012em; font-weight: 600; }

/* Hindi text renders a touch larger to sit level with Latin */
.hi {
    font-family: 'Noto Sans Devanagari', var(--font-body);
    font-size: 1.045em;
    line-height: 1.75;
    letter-spacing: 0;
}
h1 .hi, h2 .hi, h3 .hi {
    font-size: 1em;
    letter-spacing: -.015em;
    line-height: 1.25;
}

/* Material names stay in English and never wrap awkwardly */
.en { font-family: var(--font-body); letter-spacing: -.01em; }

/* ---------- Hero entrance ------------------------------------------ */
@keyframes riseIn {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes riseInSm {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideRight {
    from { opacity: 0; transform: translate3d(-22px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

.hero__content > * {
    opacity: 0;
    animation: riseIn .82s var(--ease) forwards;
}
.hero__content > .eyebrow  { animation-delay: .06s; }
.hero__content > h1        { animation-delay: .16s; }
.hero__content > .hero__sub{ animation-delay: .28s; }
.hero__content > .hero__cta{ animation-delay: .40s; }
.hero__content > .hero__proof { animation-delay: .52s; }

.rate-panel {
    opacity: 0;
    animation: riseIn .9s var(--ease) .34s forwards;
}
/* The panel handles its own entrance, so the generic reveal must not fight it */
.rate-panel.reveal { opacity: 0; transform: none; transition: none; }
.rate-panel.reveal.is-visible { opacity: 0; }

.rate-panel .rate-row {
    opacity: 0;
    animation: slideRight .55s var(--ease) forwards;
}
.rate-panel .rate-row:nth-of-type(1) { animation-delay: .62s; }
.rate-panel .rate-row:nth-of-type(2) { animation-delay: .70s; }
.rate-panel .rate-row:nth-of-type(3) { animation-delay: .78s; }
.rate-panel .rate-row:nth-of-type(4) { animation-delay: .86s; }
.rate-panel .rate-row:nth-of-type(5) { animation-delay: .94s; }
.rate-panel__foot { opacity: 0; animation: fadeIn .6s var(--ease) 1.04s forwards; }

/* Slow drifting glow behind the hero */
.hero::after {
    content: "";
    position: absolute;
    top: -25%; left: -10%;
    width: 62%; height: 130%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(16, 185, 129, .20), transparent 72%);
    filter: blur(28px);
    animation: heroGlow 15s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes heroGlow {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: .75; }
    to   { transform: translate3d(16%, 8%, 0) scale(1.22); opacity: 1; }
}

/* ---------- Buttons: sheen sweep on hover --------------------------- */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, .35) 50%, transparent 78%);
    transform: translateX(-120%);
    transition: transform .62s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn--ghost::after { background: linear-gradient(110deg, transparent 22%, rgba(11, 110, 79, .12) 50%, transparent 78%); }

/* ---------- Cards: lift and inner glow ------------------------------ */
.card, .step, .post-card {
    will-change: transform;
}
.card:hover .card__icon,
.step:hover .step__num {
    transform: translateY(-3px) scale(1.05);
}
.card__icon, .step__num {
    transition: transform .35s var(--ease), background .3s var(--ease);
}

/* Rate figure gets a subtle count-up feel on hover */
.card__rate b { transition: color .25s var(--ease), transform .25s var(--ease); }
.card:hover .card__rate b { color: var(--brand); transform: translateX(2px); }

/* ---------- Stat counters ------------------------------------------- */
.stat { transition: background .3s var(--ease); }
.stat:hover { background: var(--bg-soft); }
.stat__num { transition: transform .3s var(--ease); }
.stat:hover .stat__num { transform: scale(1.04); }

/* ---------- Header ---------------------------------------------------- */
.site-header { transition: box-shadow .3s var(--ease), background .3s var(--ease), height .3s var(--ease); }
.site-header.is-stuck .header-inner { height: 64px; }
.header-inner { transition: height .3s var(--ease); }

.nav a::after {
    transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.nav a:not(.is-active)::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-bright);
    transform: scaleX(0);
    opacity: 0;
}
.nav a:not(.is-active):hover::after { transform: scaleX(1); opacity: .6; }

/* ---------- Floating WhatsApp button --------------------------------- */
.wa-float {
    position: fixed;
    right: 22px; bottom: 22px;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    width: 62px; height: 62px;
    border-radius: 999px;
    background: linear-gradient(145deg, #34E27A 0%, #25D366 55%, #17B455 100%);
    color: #052E16;
    overflow: visible;
    box-shadow:
        0 10px 28px -8px rgba(37, 211, 102, .62),
        0 4px 10px rgba(0, 0, 0, .16);
    animation: waFloat 3.4s ease-in-out infinite;
    transition: width .42s var(--ease), border-radius .42s var(--ease),
                box-shadow .3s var(--ease), transform .3s var(--ease);
}

/* Gentle vertical drift so the eye catches it without it being loud */
@keyframes waFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* Two expanding rings, offset so there is always one mid-flight */
.wa-float__ring,
.wa-float::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 62px; height: 62px;
    margin: -31px 0 0 -31px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .55);
    pointer-events: none;
    animation: waRing 2.6s cubic-bezier(.2, .6, .35, 1) infinite;
}
.wa-float::before { animation-delay: 1.3s; }

@keyframes waRing {
    0%   { transform: scale(.92); opacity: .85; }
    70%  { opacity: 0; }
    100% { transform: scale(2.05); opacity: 0; }
}

.wa-float svg {
    width: 30px; height: 30px;
    flex: none;
    margin: 0 16px;
    position: relative;
    z-index: 2;
    animation: waWiggle 3.4s var(--ease) infinite;
}
@keyframes waWiggle {
    0%, 82%, 100% { transform: rotate(0deg); }
    86%  { transform: rotate(-13deg); }
    90%  { transform: rotate(11deg); }
    94%  { transform: rotate(-7deg); }
}

/* The label is collapsed until hover, so the button stays tidy */
.wa-float span:not(.wa-float__ring) {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: -.01em;
    overflow: hidden;
    position: relative;
    z-index: 2;
    transition: max-width .42s var(--ease), opacity .28s var(--ease), padding .42s var(--ease);
}

.wa-float:hover,
.wa-float:focus-visible {
    width: auto;
    color: #052E16;
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 16px 38px -10px rgba(37, 211, 102, .75),
        0 6px 14px rgba(0, 0, 0, .18);
}
.wa-float:hover span:not(.wa-float__ring),
.wa-float:focus-visible span:not(.wa-float__ring) {
    max-width: 260px;
    opacity: 1;
    padding-right: 22px;
}
.wa-float:hover svg { animation-play-state: paused; }

/* Small unread-style dot to draw the eye once the page settles */
.wa-float__dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #EF4444;
    border: 2.5px solid var(--bg);
    z-index: 3;
    animation: waDot .5s var(--ease) 2.4s both;
}
@keyframes waDot {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ---------- Popup entrance -------------------------------------------- */
.popup { animation: none; }
.popup-overlay.is-open .popup {
    animation: popIn .5s cubic-bezier(.2, .9, .3, 1.08) both;
}
@keyframes popIn {
    from { opacity: 0; transform: translateY(28px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
.popup-overlay.is-open .popup__body > * {
    opacity: 0;
    animation: riseInSm .5s var(--ease) forwards;
}
.popup-overlay.is-open .popup__body > *:nth-child(1) { animation-delay: .16s; }
.popup-overlay.is-open .popup__body > *:nth-child(2) { animation-delay: .22s; }

/* ---------- Section reveals ------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition:
        opacity .78s var(--ease),
        transform .78s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Directional variants for split sections */
.reveal--left  { transform: translate3d(-34px, 0, 0); }
.reveal--right { transform: translate3d(34px, 0, 0); }
.reveal--left.is-visible, .reveal--right.is-visible { transform: none; }

/* Images in split sections settle in from a slight zoom */
.split__media img {
    transform: scale(1.08);
    transition: transform 1.3s var(--ease);
}
.split__media.is-visible img { transform: scale(1); }

/* ---------- Rate table rows -------------------------------------------- */
.rate-table tbody tr {
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.rate-table tbody tr:hover {
    transform: translateX(3px);
}

/* ---------- Trend chip pulse ------------------------------------------- */
.trend--up svg   { animation: nudgeUp 2.4s var(--ease) infinite; }
.trend--down svg { animation: nudgeDown 2.4s var(--ease) infinite; }
@keyframes nudgeUp {
    0%, 70%, 100% { transform: translateY(0); }
    80%           { transform: translateY(-2.5px); }
}
@keyframes nudgeDown {
    0%, 70%, 100% { transform: translateY(0); }
    80%           { transform: translateY(2.5px); }
}

/* ---------- Live dot ---------------------------------------------------- */
.live-dot::before { animation: pulse 1.9s infinite; }

/* ---------- Theme toggle ------------------------------------------------ */
.theme-toggle__thumb { transition: transform .42s cubic-bezier(.2, .9, .3, 1.1), background .3s var(--ease); }
.theme-toggle:hover { border-color: var(--brand); }

/* ---------- Footer links ------------------------------------------------- */
.footer-links a, .footer-contact a {
    display: inline-block;
    transition: transform .22s var(--ease), color .22s var(--ease);
}
.footer-links a:hover { transform: translateX(4px); }

/* ---------- Scroll progress bar ------------------------------------------ */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-bright) 60%, #6EE7B7 100%);
    z-index: 950;
    pointer-events: none;
}

/* ---------- Respect reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .hero__content > *,
    .rate-panel,
    .rate-panel .rate-row,
    .rate-panel__foot,
    .reveal,
    .popup-overlay.is-open .popup__body > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .rate-panel.reveal.is-visible { opacity: 1 !important; }
    .wa-float { animation: none; }
    .wa-float__ring, .wa-float::before { display: none; }
}

/* ---------- Small screens -------------------------------------------------- */
@media (max-width: 620px) {
    .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; }
    .wa-float svg { width: 27px; height: 27px; margin: 0 14.5px; }
    .wa-float__ring, .wa-float::before { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
    /* Tapping should open WhatsApp, not just expand a label */
    .wa-float:hover { width: 56px; }
    .wa-float:hover span:not(.wa-float__ring) { max-width: 0; opacity: 0; padding-right: 0; }
}

/* ---------- Header fit on small screens ------------------------------------ */
/* The header holds brand, theme toggle, WhatsApp button and the menu button.
   Below tablet width that is too much, and the menu button was being pushed
   off screen. Shrink the least important pieces first. */
@media (max-width: 900px) {
    .header-inner { gap: 10px; }
    .brand__sub { display: none; }
    .brand__name { font-size: .98rem; }

    /* WhatsApp button becomes icon only; the floating button carries the label */
    .header-actions .btn--wa span { display: none; }
    .header-actions .btn--wa {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 12px;
    }
    .header-actions .btn--wa svg { width: 20px; height: 20px; }
}

@media (max-width: 400px) {
    /* At the narrowest sizes drop the header WhatsApp button entirely,
       since the floating button is always on screen anyway. */
    .header-actions .btn--wa { display: none; }
    .brand__mark { width: 36px; height: 36px; border-radius: 10px; font-size: .92rem; }
    .brand__name { font-size: .92rem; }
    .theme-toggle { width: 52px; }
}