/* Elrahbeen.Web custom styles — Tailwind utilities are generated live via the CDN JIT engine (see _Layout.cshtml / _AuthLayout.cshtml). This file only holds things Tailwind can't express: keyframes, third-party overrides, and global font/motion rules. */

body {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}

::selection {
    background-color: #265434;
    color: #ffffff;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- Bold gradient blobs used across hero / auth panels --- */
@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

.animate-blob {
    animation: blob-float 12s infinite ease-in-out;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

@keyframes gradient-pan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient-pan {
    background-size: 200% 200%;
    animation: gradient-pan 6s ease infinite;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
    animation: fade-up 0.7s ease-out both;
}

/* --- Hero Swiper overrides --- */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background-color 0.2s ease;
}

.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 0.25);
}

.hero-swiper .swiper-button-next::after,
.hero-swiper .swiper-button-prev::after {
    font-size: 16px;
    font-weight: 700;
}

.hero-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.45;
    width: 10px;
    height: 10px;
    transition: all 0.3s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: linear-gradient(90deg, #34d399, #059669);
    width: 32px;
    border-radius: 9999px;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.section-eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #34d399, #059669);
}

/* --- Accessibility: respect reduced-motion preference globally --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── تحديث فوري (live.js) ───────────────────────────── */
.live-banner {
    position: fixed;
    inset-inline: 0;
    bottom: 1.25rem;
    margin-inline: auto;
    width: max-content;
    max-width: calc(100% - 2rem);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.4rem;
    border-radius: 999px;
    background: #265434;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 12px 30px rgba(38, 84, 52, .35);
    animation: live-in .35s ease-out;
}
.live-bump { animation: live-bump .6s ease-out; }
@keyframes live-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes live-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18) rotate(-8deg); } 70% { transform: scale(.96) rotate(5deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .live-banner, .live-bump { animation: none; } }

/* ── شعار الراهبين المتحرك (نفس أيقونة التطبيق) ───────────── */
.brand-mark { display: block; }
.brand-mark .bm-grain { transform-box: fill-box; transform-origin: center; }
.brand-mark .bm-shine { opacity: 0; }
.brand-intro .brand-mark .bm-hill { animation: bm-rise .7s ease-out both; }
.brand-intro .brand-mark .bm-hill-2 { animation-delay: .08s; }
.brand-intro .brand-mark .bm-stalk { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bm-draw .7s .15s cubic-bezier(.4, 0, .2, 1) forwards; }
.brand-intro .brand-mark .bm-grain { animation: bm-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.brand-intro .brand-mark .bm-g1, .brand-intro .brand-mark .bm-g2 { animation-delay: .45s; }
.brand-intro .brand-mark .bm-g3, .brand-intro .brand-mark .bm-g4 { animation-delay: .6s; }
.brand-intro .brand-mark .bm-g5, .brand-intro .brand-mark .bm-g6 { animation-delay: .75s; }
.brand-intro .brand-mark .bm-g7 { animation-delay: .9s; }
.brand-intro .brand-mark .bm-shine { animation: bm-shine 1s 1.25s ease-in-out both; }
a:hover > span > .brand-mark .bm-grain { animation: bm-sway 1.2s ease-in-out; }
@keyframes bm-rise { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bm-draw { to { stroke-dashoffset: 0; } }
@keyframes bm-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bm-shine { 0% { opacity: 1; transform: translateX(0) rotate(20deg); } 100% { opacity: 1; transform: translateX(760px) rotate(20deg); } }
@keyframes bm-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 65% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
    .brand-mark * { animation: none !important; stroke-dashoffset: 0 !important; }
}