/* ========================================
   ROLLEN INVESTMENTS - HOMEPAGE BUG FIXES
   Visual Corrections & Visibility Improvements
   Priority: Section 1 "SUSTAINING GROWTH"
   ======================================== */

/* ====================
   SECTION 1 FIX: HERO "SUSTAINING GROWTH"
   Issues: Text too large, poor visibility, excessive animations
   ==================== */

/* Reduce excessive animations - tone down floating shapes */
.hero-shape {
    opacity: 0.15 !important; /* Reduce from 0.4-0.8 to subtle */
    border-width: 0.5px !important; /* Thinner borders */
}

@keyframes floatShape {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
        opacity: 0.1; /* Much more subtle */
    }
    50% { 
        transform: translate(0, -40px) rotate(90deg); 
        opacity: 0.15; /* Reduced visibility */
    }
}

/* Reduce logo glow animation - less distraction */
.hero-logo::before {
    opacity: 0.3 !important; /* Reduce glow intensity */
    animation: pulseGlow 6s ease-in-out infinite !important; /* Slower animation */
}

@keyframes pulseGlow {
    0%, 100% { 
        opacity: 0.2; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.3; 
        transform: translate(-50%, -50%) scale(1.05); /* Less dramatic */
    }
}

/* FIX: Reduce logo size for better proportions */
.hero-logo img {
    height: 140px !important; /* Reduced from 180px */
}

/* FIX: Reduce slogan size */
.hero-slogan {
    font-size: 1.05rem !important; /* Reduced from 1.3rem */
    margin-bottom: 2rem !important; /* Tighter spacing */
    padding: 0 2.5rem !important; /* Less horizontal space */
}

.hero-slogan::before,
.hero-slogan::after {
    width: 50px !important; /* Shorter decorative lines */
}

/* FIX: Reduce title size for better readability */
.hero-title {
    font-size: 3.5rem !important; /* Reduced from 4.8rem */
    margin-bottom: 2rem !important; /* Tighter spacing */
    line-height: 1.2 !important;
}

/* FIX: Reduce subtitle size */
.hero-subtitle {
    font-size: 1.35rem !important; /* Reduced from 1.7rem */
    margin-bottom: 3rem !important; /* Tighter spacing */
    max-width: 750px !important; /* Narrower for better reading */
}

/* FIX: Reduce button sizes */
.hero-buttons .btn-large {
    padding: 1.1rem 2.5rem !important; /* Reduced from 1.4rem 3.5rem */
    font-size: 0.95rem !important; /* Reduced from 1.15rem */
}

/* FIX: Reduce button gap */
.hero-buttons {
    gap: 1.5rem !important; /* Reduced from 2rem */
    margin-top: 3rem !important; /* Reduced from 4rem */
}

/* FIX: Tone down entrance animations */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(25px); /* Less dramatic movement */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoReveal {
    0% {
        opacity: 0;
        transform: translateY(-40px) scale(0.85); /* Less dramatic */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* FIX: Simplify scroll indicator animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { 
        transform: translateX(-50%) translateY(0); 
    }
    40% { 
        transform: translateX(-50%) translateY(-8px); /* Less bouncy */
    }
    60% { 
        transform: translateX(-50%) translateY(-4px); 
    }
}

/* FIX: Improve text contrast - ensure readability */
.hero-title,
.hero-subtitle,
.hero-slogan {
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.6) !important; /* Stronger shadow for readability */
}

/* FIX: Reduce hero content padding for mobile visibility */
.hero-content {
    padding: 4rem 2rem !important; /* Reduced from 6rem 3rem */
}

/* ====================
   GENERAL HOMEPAGE BUG FIXES
   ==================== */

/* FIX: Stats section - reduce overly large numbers */
.stat-number {
    font-size: 3.5rem !important; /* Reduced from 4.2rem */
}

.stat-label {
    font-size: 1rem !important; /* Reduced from 1.15rem */
}

/* FIX: Reduce excessive hover lift on stats */
.stat-item:hover {
    transform: translateY(-8px) !important; /* Reduced from -12px */
}

/* FIX: Brand showcase - better text sizing */
.brand-showcase-text h3 {
    font-size: 2rem !important; /* Reduced from 2.4rem */
}

.brand-showcase-text p {
    font-size: 1.15rem !important; /* Reduced from 1.25rem */
}

/* FIX: Gold section - reduce overly large title */
.gold-showcase .section-title {
    font-size: 3.8rem !important; /* Reduced from 4.5rem */
}

.gold-showcase .section-intro {
    font-size: 1.2rem !important; /* Reduced from 1.35rem */
}

/* FIX: Reduce excessive card hover lift */
.gold-showcase .card:hover {
    transform: translateY(-10px) !important; /* Reduced from -15px */
}

/* FIX: Button hover effects - less dramatic */
.btn-primary.btn-large:hover,
.btn-secondary.btn-large:hover {
    transform: translateY(-2px) !important; /* Reduced from -4px */
}

/* FIX: Ensure all text is visible with proper z-index */
.hero-content * {
    position: relative;
    z-index: 3; /* Ensure text stays above animated elements */
}

/* ====================
   RESPONSIVE BUG FIXES
   ==================== */

@media (max-width: 1400px) {
    .hero-title {
        font-size: 3.2rem !important;
    }
    
    .gold-showcase .section-title {
        font-size: 3.4rem !important;
    }
}

@media (max-width: 1200px) {
    .hero-title {
        font-size: 2.8rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 992px) {
    .hero-logo img {
        height: 110px !important; /* Further reduced on tablets */
    }
    
    .hero-title {
        font-size: 2.4rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.15rem !important;
    }
    
    .hero-slogan {
        font-size: 0.95rem !important;
    }
    
    .gold-showcase .section-title {
        font-size: 3rem !important;
    }
}

@media (max-width: 768px) {
    .hero-content {
        padding: 3rem 1.5rem !important;
    }
    
    .hero-logo img {
        height: 90px !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.05rem !important;
    }
    
    .hero-slogan {
        font-size: 0.85rem !important;
        padding: 0 1.5rem !important;
    }
    
    .hero-buttons .btn-large {
        padding: 1rem 2rem !important;
        font-size: 0.9rem !important;
        width: 100%;
    }
    
    .hero-buttons {
        gap: 1rem !important;
        flex-direction: column;
    }
    
    .stat-number {
        font-size: 3rem !important;
    }
    
    .gold-showcase .section-title {
        font-size: 2.4rem !important;
    }
}

@media (max-width: 480px) {
    .hero-logo img {
        height: 75px !important;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    .stat-item {
        padding: 2rem 1.5rem !important;
    }
    
    .stat-number {
        font-size: 2.5rem !important;
    }
}

/* ====================
   LAYERING & OVERLAP FIXES
   ==================== */

/* FIX: Ensure proper z-index hierarchy */
.hero-background {
    z-index: 0 !important;
}

.hero-overlay {
    z-index: 1 !important;
}

.hero-shapes {
    z-index: 1 !important;
}

.hero-content {
    z-index: 10 !important; /* Ensure content is always on top */
}

.scroll-indicator {
    z-index: 10 !important;
}

/* FIX: Prevent text cutoff on smaller screens */
.container {
    overflow: visible !important;
}

/* FIX: Ensure buttons don't overlap text */
.hero-buttons {
    margin-top: 2.5rem !important;
    position: relative;
    z-index: 10;
}

/* ====================
   READABILITY IMPROVEMENTS
   ==================== */

/* FIX: Improve button contrast */
.btn-primary.btn-large {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; /* Stronger shadow */
}

.btn-secondary.btn-large {
    border: 2px solid rgba(255, 255, 255, 0.5) !important; /* More visible border */
}

/* FIX: Ensure logo is always visible */
.hero-logo {
    margin-bottom: 2.5rem !important; /* Reduced from 3.5rem */
}

/* FIX: Reduce excessive blur effects */
.stat-item {
    backdrop-filter: blur(10px) !important; /* Reduced from 15px */
}

.gold-showcase .card {
    backdrop-filter: blur(15px) !important; /* Reduced from 25px */
}

/* ====================
   ANIMATION PERFORMANCE FIXES
   ==================== */

/* FIX: Reduce animation complexity for better performance */
.hero-shape {
    will-change: transform, opacity;
}

.hero-logo::before {
    will-change: transform, opacity;
}

/* FIX: Disable animations on mobile for better performance */
@media (max-width: 768px) {
    .hero-shape {
        animation: none !important;
        opacity: 0.05 !important; /* Very subtle static shapes */
    }
    
    .hero-logo::before {
        animation: none !important;
        opacity: 0.2 !important;
    }
}

/* ====================
   ACCESSIBILITY FIXES
   ==================== */

/* FIX: Ensure focus states are visible */
.btn-large:focus {
    outline: 3px solid rgba(212, 175, 55, 0.8) !important;
    outline-offset: 3px;
}

/* FIX: Improve link visibility */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* FIX: Ensure all text meets contrast requirements */
.hero-title span {
    -webkit-text-fill-color: #f4e4a6 !important; /* Lighter gold for better contrast */
}

/* ====================
   FINAL POLISH
   ==================== */

/* FIX: Smooth all transitions */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* FIX: Ensure section dividers don't cause layout shifts */
.section-divider {
    overflow: hidden;
    position: relative;
}

/* FIX: Prevent horizontal scroll on mobile */
body {
    overflow-x: hidden !important;
}

.hero,
.stats-section,
.gold-showcase {
    overflow-x: hidden !important;
}

/* FIX: Ensure consistent font rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}