/* ==========================================================================
   WATCHARID PREMIUM LUXURY DESIGN SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Almarai:wght@300;400;700;800&family=Cairo:wght@400;600;700;900&display=swap');

:root {
    --gold-solid: #C9A13B;
    --gold-accent: #D4AF37;
    --gold-dark: #926C15;
    --lux-black: #0B0B0C;
    --lux-darkGray: #121315;
    --lux-border: rgba(255, 255, 255, 0.06);
}

/* Base resets & behavior styling */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* ==========================================================================
   CUSTOM ANIMATIONS & EFFECTS
   ========================================================================== */

/* 1. Infinite Announcement Marquee Loop */
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-wrapper {
    overflow: hidden;
}

.marquee-content {
    display: flex;
    width: max-content;
    animation: marqueeScroll 25s linear infinite;
}

/* Support reverse direction in RTL */
[dir="rtl"] .marquee-content {
    animation-direction: reverse;
}

/* 2. Ticking Watch Hands (Logo Animation) */
@keyframes rotateClockHand {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.rotate-logo-hour {
    transform-origin: bottom center;
    animation: rotateClockHand 45s linear infinite;
}

.rotate-logo-minute {
    transform-origin: bottom center;
    animation: rotateClockHand 6s linear infinite;
}

/* 3. Automatic Horizontal Brands Scroller */
@keyframes scrollBrands {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-brands {
    animation: scrollBrands 35s linear infinite;
}

[dir="rtl"] .animate-brands {
    animation-direction: reverse;
}

/* Brand Logo Marquee (new – pause on hover) */
@keyframes marqueeSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    animation: marqueeSlide 40s linear infinite;
    will-change: transform;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

[dir="rtl"] .animate-marquee {
    animation-direction: reverse;
}

/* 4. Interactive Card Radial Gold Glow */
.bg-radial-glow {
    background: radial-gradient(circle, rgba(201, 161, 59, 0.06) 0%, rgba(201, 161, 59, 0) 70%);
}

/* 5. Smooth View Transitions */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes scaleUp {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.animate-scale-up {
    animation: scaleUp 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* ==========================================================================
   SCROLLBAR BEAUTIFIER
   ========================================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0B0B0C;
}

::-webkit-scrollbar-thumb {
    background: #252629;
    border-radius: 4px;
    border: 2px solid #0B0B0C;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-solid);
}

/* ==========================================================================
   LINE CLAMP UTILITY FOR CARD TITLES
   ========================================================================== */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Force Logo to be LTR in all languages */
a.font-playfair {
    direction: ltr !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 6. Pulsing Luxury Button Animation */
@keyframes luxuryButtonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(201, 161, 59, 0.3);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 15px 30px rgba(201, 161, 59, 0.55), 0 0 12px rgba(201, 161, 59, 0.35);
    }
}

.animate-btn-pulse {
    animation: luxuryButtonPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}