/* ─── Local Fonts ───────────────────────────────────────── */
@font-face {
    font-family: "Noto Sans Bengali";
    src: url("/assets/fonts/noto-sans-bengali/noto-sans-bengali-bengali-300-normal.woff2")
        format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Bengali";
    src: url("/assets/fonts/noto-sans-bengali/noto-sans-bengali-bengali-400-normal.woff2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Bengali";
    src: url("/assets/fonts/noto-sans-bengali/noto-sans-bengali-bengali-500-normal.woff2")
        format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Bengali";
    src: url("/assets/fonts/noto-sans-bengali/noto-sans-bengali-bengali-600-normal.woff2")
        format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Bengali";
    src: url("/assets/fonts/noto-sans-bengali/noto-sans-bengali-bengali-700-normal.woff2")
        format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Bengali";
    src: url("/assets/fonts/noto-sans-bengali/noto-sans-bengali-bengali-800-normal.woff2")
        format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: url("/assets/fonts/noto-sans/noto-sans-latin-300-normal.woff2")
        format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans";
    src: url("/assets/fonts/noto-sans/noto-sans-latin-400-normal.woff2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans";
    src: url("/assets/fonts/noto-sans/noto-sans-latin-400-italic.woff2")
        format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans";
    src: url("/assets/fonts/noto-sans/noto-sans-latin-500-normal.woff2")
        format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans";
    src: url("/assets/fonts/noto-sans/noto-sans-latin-600-normal.woff2")
        format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans";
    src: url("/assets/fonts/noto-sans/noto-sans-latin-700-normal.woff2")
        format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans";
    src: url("/assets/fonts/noto-sans/noto-sans-latin-800-normal.woff2")
        format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ─── CSS Variables ───────────────────────────────────────── */
:root {
    --font-bengali: "Noto Sans Bengali", sans-serif;
    --font-english: "Noto Sans", sans-serif;
}

/* ─── Base ──────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    font-family: var(--font-bengali), var(--font-english), sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}
html[lang="en"] body,
html[lang="en"] {
    font-family: var(--font-english), var(--font-bengali), sans-serif;
}
html[lang="bn"] body,
html[lang="bn"] {
    font-family: var(--font-bengali), var(--font-english), sans-serif;
}

/* ─── Marquee animation ─────────────────────────────────── */
@keyframes marquee-rtl {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}
.animate-marquee-rtl {
    animation: marquee-rtl 20s linear infinite;
    display: inline-block;
    will-change: transform;
    white-space: nowrap;
}
.animate-marquee-rtl:hover {
    animation-play-state: paused;
}

/* ─── Slider transition ─────────────────────────────────── */
.slide {
    position: absolute;
    inset: 0;
    transition: opacity 0.7s ease-in-out;
}
.slide.active {
    opacity: 1;
    z-index: 10;
}
.slide.inactive {
    opacity: 0;
    z-index: 0;
}