/* ============================================================
   frontend_assets/css/frontend.css
   Hajj & Umrah Accounts Management SAAS — Landing Page Styles
   ============================================================ */

/* Local Bangla font fallback (bundled with assets) */
@font-face {
    font-family: 'BanglaLocal';
    src: url('../fonts/bangla.ttf') format('truetype');
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Hind Siliguri', 'Noto Sans Bengali', 'BanglaLocal', system-ui, sans-serif;
}

/* ---------- Scroll-triggered reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity .8s cubic-bezier(.22,.61,.36,1),
                transform .8s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Hero entrance ---------- */
.animate-hero-item {
    opacity: 0;
    transform: translateY(34px);
    animation: heroIn 1s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes heroIn {
    to { opacity: 1; transform: none; }
}

/* ---------- Floating ---------- */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
.animate-floaty { animation: floaty 5s ease-in-out infinite; }

/* ---------- Pulsing rings for contact icons ---------- */
@keyframes pulseRingGreen {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
    70%  { box-shadow: 0 0 0 16px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.pulse-green { animation: pulseRingGreen 2s infinite; }

@keyframes pulseRingBlue {
    0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.45); }
    70%  { box-shadow: 0 0 0 16px rgba(37,99,235,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
.pulse-blue { animation: pulseRingBlue 2s infinite; }

/* ---------- Animated gradient text ---------- */
.animate-gradient-text {
    background-size: 200% auto;
    animation: gradientMove 6s linear infinite;
}
@keyframes gradientMove {
    to { background-position: 200% center; }
}

/* ---------- Decorative blobs ---------- */
@keyframes blob {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(32px,-44px) scale(1.1); }
    66%  { transform: translate(-22px,22px) scale(.94); }
    100% { transform: translate(0,0) scale(1); }
}
.animate-blob { animation: blob 14s ease-in-out infinite; }

/* ---------- Card hover lift ---------- */
.hover-lift {
    transition: transform .35s ease, box-shadow .35s ease;
}
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 44px -14px rgba(2,6,23,.22);
}

/* ---------- Clients marquee ---------- */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: marquee 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

/* ---------- Step connector ---------- */
.step-line {
    position: relative;
}
.step-line::after {
    content: '';
    position: absolute;
    top: 2.25rem;
    right: -50%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(16,185,129,.6), rgba(245,158,11,.6));
    border-radius: 9999px;
}
@media (max-width: 1023px) {
    .step-line::after { display: none; }
}

/* ---------- Pricing recommended shine ---------- */
.recommended-card {
    position: relative;
    overflow: hidden;
}
.recommended-card::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -40%;
    width: 80%;
    height: 260%;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%);
    transform: rotate(12deg);
    animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine {
    0%, 60% { left: -80%; }
    100%    { left: 140%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal, .animate-hero-item, .animate-floaty,
    .animate-blob, .animate-gradient-text, .marquee-track {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    html { scroll-behavior: auto; }
}