/* =============================================
   ENHANCEMENTS.CSS — Design Improvements
   Thoughtful upgrades over the reference design
   ============================================= */

/* --- Global Smoothness --- */
html {
    scroll-behavior: smooth;
}

/* --- Brand-Colored Text Selection --- */
::selection {
    background: rgba(255, 58, 82, 0.3);
    color: #fff;
}

::-moz-selection {
    background: rgba(255, 58, 82, 0.3);
    color: #fff;
}

/* --- Custom Scrollbar (Dark Theme) --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #333 #1a1a1a;
}

/* --- Enhanced Focus States (Accessibility) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid #FF3A52;
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Product Card Hover Enhancements --- */
.package-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease !important;
}

.package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(255, 58, 82, 0.08),
                0 4px 12px rgba(0, 0, 0, 0.3);
}

/* --- Button Glow Effects --- */
.product-actions .add {
    transition: all 0.25s ease !important;
    position: relative;
}

.product-actions .add:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

/* Hero CTA button enhancements */
a[href="/category/open-source"].bg-white,
a[href*="discord"].bg-\[\#FF3A52\] {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

a[href="/category/open-source"].bg-white:hover {
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

a[href*="discord"].bg-\[\#FF3A52\]:hover {
    box-shadow: 0 4px 20px rgba(255, 58, 82, 0.4);
    transform: translateY(-2px);
}

/* --- Loading Screen Auto-Fade --- */
#page-loader {
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#page-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* --- Why Choose Us Card Hover --- */
section .rounded-2xl.border-2.border-white\/5 {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

section .rounded-2xl.border-2.border-white\/5:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* --- FAQ Section Polish --- */
#faq-search {
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

#faq-search:focus {
    box-shadow: 0 0 0 3px rgba(255, 58, 82, 0.15);
    border-color: rgba(255, 58, 82, 0.3) !important;
}

/* --- Stats Counter Glow on Scroll --- */
#sales,
#active-players,
#active-servers {
    transition: text-shadow 0.6s ease;
}

/* --- Discount Banner Shimmer --- */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.discount-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

/* --- Navbar Glass Effect on Scroll --- */
#navbar.scrolled {
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- YouTube Video Card Hover --- */
#youtube-videos a,
#youtube-videos-main a {
    transition: transform 0.25s ease;
}

#youtube-videos a:hover,
#youtube-videos-main a:hover {
    transform: translateY(-3px);
}

/* --- Recent Payments Hover --- */
.payment-item {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.payment-item:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.1);
}

/* --- Footer Link Hover Underline --- */
footer a {
    transition: color 0.2s ease;
    position: relative;
}

footer ul a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: #FF3A52;
    transition: width 0.25s ease;
}

footer ul a:hover::after {
    width: 100%;
}

/* --- Improved Currency Dropdown --- */
.grid.grid-cols-3 a {
    transition: all 0.15s ease !important;
}

.grid.grid-cols-3 a:hover {
    transform: scale(1.05);
}

/* --- Discord CTA Section Enhancement --- */
section:has(a[href="https://discord.gg/0resmon"]) .container {
    transition: box-shadow 0.3s ease;
}

section:has(a[href="https://discord.gg/0resmon"]) .container:hover {
    box-shadow: 0 0 60px rgba(4, 116, 243, 0.08);
}

/* =============================================
   CUSTOM DIFFERENTIATORS — Our Design Identity
   ============================================= */

/* --- Shifted Accent: Slightly Warmer Coral --- */
/* Using #FF4D63 instead of the original #FF3A52 in key spots */

/* --- Hero Text Entrance Animation --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp-delay {
    0%, 15% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero section entrance */
section:first-of-type h1 {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

section:first-of-type h1 + p {
    animation: fadeInUp-delay 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

section:first-of-type .flex.items-center.gap-x-3 {
    animation: fadeInUp-delay 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --- Discount Code Pulse Glow --- */
@keyframes codeGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 77, 99, 0.2); }
    50% { box-shadow: 0 0 16px rgba(255, 77, 99, 0.45); }
}

#discount-code {
    animation: codeGlow 2.5s ease-in-out infinite;
    border-radius: 2px;
    padding: 0 2px;
}

/* --- Section Headings: Warm Coral Tint --- */
h1 span[class*="text-[#FF3A52]"] {
    color: #FF4D63 !important;
    filter: drop-shadow(0 0px 14px rgba(255, 77, 99, 0.45));
}

/* --- Why Choose Us: Staggered Card Entrance --- */
@keyframes slideInCards {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gsap-reveal .grid.grid-cols-1.lg\:grid-cols-2 > * {
    opacity: 0;
    animation: slideInCards 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gsap-reveal .grid.grid-cols-1.lg\:grid-cols-2 > *:nth-child(1) { animation-delay: 0.1s; }
.gsap-reveal .grid.grid-cols-1.lg\:grid-cols-2 > *:nth-child(2) { animation-delay: 0.2s; }
.gsap-reveal .grid.grid-cols-1.lg\:grid-cols-2 > *:nth-child(3) { animation-delay: 0.3s; }
.gsap-reveal .grid.grid-cols-1.lg\:grid-cols-2 > *:nth-child(4) { animation-delay: 0.4s; }

/* --- Reviews Badge: Gradient Border Glow --- */
@keyframes borderGlow {
    0%, 100% { border-color: rgba(255, 77, 99, 0.1); }
    50% { border-color: rgba(255, 77, 99, 0.3); }
}

.review-marquee + div,
div:has(> p.font-bold.text-white.text-xl) {
    animation: borderGlow 3s ease-in-out infinite;
}

/* --- FAQ Search: Blinking Cursor Indicator --- */
#faq-search::placeholder {
    transition: opacity 0.3s ease;
}

#faq-search:focus::placeholder {
    opacity: 0.3;
}

/* --- Stats Numbers: Glow Pulse When Visible --- */
@keyframes numberGlow {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.15)); }
    50% { filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.35)); }
}

@keyframes numberGlowRed {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 77, 99, 0.15)); }
    50% { filter: drop-shadow(0 0 24px rgba(255, 77, 99, 0.4)); }
}

#sales, #active-servers {
    animation: numberGlow 3s ease-in-out infinite;
}

#active-players {
    animation: numberGlowRed 3s ease-in-out infinite;
}

/* --- Logo Hover: Subtle Brightness Bump --- */
nav a:first-child img:first-child {
    transition: filter 0.3s ease;
}

nav a:first-child img:first-child:hover {
    filter: brightness(1.15);
}

/* --- Mobile Menu: Smoother Slide --- */
#mobile-menu-panel {
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* --- View All Packages Button: Border Pulse --- */
@keyframes borderPulse {
    0%, 100% { border-color: rgba(255, 255, 255, 0.2); }
    50% { border-color: rgba(255, 77, 99, 0.4); }
}

a[href="/category/open-source"].border.border-white\/20 {
    animation: borderPulse 4s ease-in-out infinite;
}

/* --- Nav Links: Subtle Grow Underline --- */
nav .hidden.xl\:flex a[href] {
    position: relative;
    overflow: hidden;
}

nav .hidden.xl\:flex a[href]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #FF4D63;
    border-radius: 1px;
    transition: width 0.3s ease, left 0.3s ease;
}

nav .hidden.xl\:flex a[href]:hover::after {
    width: 60%;
    left: 20%;
}

/* --- FAQ Items: Slide In From Left --- */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#faq-items > * {
    animation: slideInLeft 0.4s ease forwards;
}

#faq-items > *:nth-child(1) { animation-delay: 0.05s; }
#faq-items > *:nth-child(2) { animation-delay: 0.1s; }
#faq-items > *:nth-child(3) { animation-delay: 0.15s; }
#faq-items > *:nth-child(4) { animation-delay: 0.2s; }
#faq-items > *:nth-child(5) { animation-delay: 0.25s; }
#faq-items > *:nth-child(n+6) { animation-delay: 0.3s; }

/* --- Star Ratings: Warm Gold Tint --- */
.fa-star.text-\[\#FF3A52\] {
    color: #FF6B5A !important;
    filter: drop-shadow(0 2px 6px rgba(255, 107, 90, 0.4));
}

/* --- Review Cards: Subtle Tilt on Hover --- */
#discord-reviews > * {
    transition: transform 0.3s ease;
}

#discord-reviews > *:hover {
    transform: rotate(-1deg) translateY(-2px);
}

/* --- Discord CTA Card: Perspective Tilt --- */
section:has(a[href="https://discord.gg/0resmon"]) .container.max-w-7xl {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

section:has(a[href="https://discord.gg/0resmon"]) .container.max-w-7xl:hover {
    transform: perspective(800px) rotateY(-1.5deg);
    box-shadow: 8px 8px 40px rgba(4, 116, 243, 0.1);
}

/* --- Hero Floating Logos: Enhanced Glow --- */
.float-slow, .float-medium, .float-fast {
    filter: drop-shadow(0 0 20px rgba(255, 77, 99, 0.15));
}

.float-slow:hover, .float-medium:hover, .float-fast:hover {
    filter: drop-shadow(0 0 30px rgba(255, 77, 99, 0.3));
}

/* --- Discount Banner: Warmer Red Gradient --- */
section:first-child {
    background: radial-gradient(50% 366.3% at 50% 50%, #C4151F 0%, #520202 100%) !important;
}

/* --- Payment Cards: Subtle Entrance --- */
@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.payment-item {
    animation: fadeScale 0.5s ease forwards;
}

/* --- YouTube Video Thumbnails: Red Border Accent on Hover --- */
#youtube-videos > *,
#youtube-videos-main > * {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#youtube-videos > *:hover,
#youtube-videos-main > *:hover {
    box-shadow: 0 0 0 2px rgba(255, 77, 99, 0.3),
                0 8px 24px rgba(0, 0, 0, 0.3);
}

/* --- "Add to Basket" Button: Warm White Gradient --- */
.product-actions .add {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important;
}

.product-actions .add:hover {
    background: linear-gradient(135deg, #ffffff 0%, #e8e8e8 100%) !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2),
                0 0 0 1px rgba(255, 77, 99, 0.15);
}

/* =============================================
   BOLD DIFFERENTIATORS — Stronger Visual Impact
   ============================================= */

/* --- Hero '0RESMON': Animated Gradient Shimmer --- */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

section:first-of-type h1 span[style*="background: linear-gradient"] {
    background: linear-gradient(270deg, #FF3A52, #FF8A65, #FF4D63, #FF3A52) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: gradientShift 4s ease infinite !important;
}

/* --- Product Card Image: Zoom + Slight Rotate on Hover --- */
.package-card .relative img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.package-card:hover .relative img {
    transform: scale(1.08) rotate(1deg) !important;
}

/* --- Glowing Section Divider Lines --- */
section + section::before {
    content: '';
    display: block;
    width: 120px;
    height: 2px;
    margin: 0 auto 0;
    background: linear-gradient(90deg, transparent, #FF4D63, transparent);
    opacity: 0.4;
    border-radius: 1px;
}

/* --- Why Choose Us: Icon Box Spin on Hover --- */
.grid.grid-cols-1.lg\:grid-cols-2 .w-12.h-12 {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s ease;
}

.grid.grid-cols-1.lg\:grid-cols-2 > *:hover .w-12.h-12 {
    transform: rotate(12deg) scale(1.1);
    box-shadow: 0 0 20px rgba(255, 77, 99, 0.2);
}

/* --- Product Card: Red Top Border Accent on Hover --- */
.package-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 10%, #FF4D63 50%, transparent 90%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.package-card {
    position: relative;
}

.package-card:hover::after {
    opacity: 1;
}

/* --- Countdown Timer: Number Pop Animation --- */
@keyframes countPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

#countdown-timer > div {
    transition: background 0.3s ease;
}

#countdown-timer > div:hover {
    background: rgba(0, 0, 0, 0.45);
}

#countdown-timer p.text-lg,
#countdown-timer p.text-2xl {
    animation: countPop 1s ease-in-out infinite;
}

/* --- "Join Discord" Hero Button: Gradient Background --- */
a[href*="discord"].bg-\[\#FF3A52\] {
    background: linear-gradient(135deg, #FF3A52 0%, #FF6B5A 100%) !important;
    border: none;
}

a[href*="discord"].bg-\[\#FF3A52\]:hover {
    background: linear-gradient(135deg, #FF4D63 0%, #FF7A6A 100%) !important;
}

/* --- Section Titles: Slight Letter Spacing --- */
h1.font-bold.text-3xl {
    letter-spacing: -0.02em;
}

/* --- Body: Subtle Noise Texture Overlay --- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}