@import url('base.css');
@import url('components.css');

/* Font Icons using Unicode characters */
.rupeeget-icon-transparent::before {
    content: '💰';
    font-size: 2rem;
}

.rupeeget-icon-secure::before {
    content: '🔒';
    font-size: 2rem;
}

.rupeeget-icon-flexible::before {
    content: '⚡';
    font-size: 2rem;
}

.rupeeget-icon-fast::before {
    content: '🚀';
    font-size: 2rem;
}

.rupeeget-icon-nbfc::before {
    content: '🏛️';
    font-size: 1.5rem;
}

.rupeeget-icon-security::before {
    content: '🛡️';
    font-size: 1.5rem;
}

/* Page-specific animations */
.rupeeget-animate-in {
    animation: slideInUp 0.6s ease-out forwards;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero section specific styles */
.rupeeget-hero-title {
    animation: fadeInUp 1s ease-out 0.2s both;
}

.rupeeget-hero-subtitle {
    animation: fadeInUp 1s ease-out 0.4s both;
}

.rupeeget-hero-actions {
    animation: fadeInUp 1s ease-out 0.6s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Feature cards staggered animation */
.rupeeget-feature-card:nth-child(1) {
    animation: slideInUp 0.6s ease-out 0.1s both;
}

.rupeeget-feature-card:nth-child(2) {
    animation: slideInUp 0.6s ease-out 0.2s both;
}

.rupeeget-feature-card:nth-child(3) {
    animation: slideInUp 0.6s ease-out 0.3s both;
}

.rupeeget-feature-card:nth-child(4) {
    animation: slideInUp 0.6s ease-out 0.4s both;
}

/* Process steps animation */
.rupeeget-step:nth-child(1) {
    animation: slideInLeft 0.6s ease-out 0.1s both;
}

.rupeeget-step:nth-child(2) {
    animation: slideInLeft 0.6s ease-out 0.2s both;
}

.rupeeget-step:nth-child(3) {
    animation: slideInLeft 0.6s ease-out 0.3s both;
}

.rupeeget-step:nth-child(4) {
    animation: slideInLeft 0.6s ease-out 0.4s both;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Loan cards animation */
.rupeeget-loan-card:nth-child(1) {
    animation: scaleIn 0.6s ease-out 0.1s both;
}

.rupeeget-loan-card:nth-child(2) {
    animation: scaleIn 0.6s ease-out 0.2s both;
}

.rupeeget-loan-card:nth-child(3) {
    animation: scaleIn 0.6s ease-out 0.3s both;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* CTA section animation */
.rupeeget-cta-content {
    animation: fadeInUp 1s ease-out 0.2s both;
}

/* Hover effects for interactive elements */
.rupeeget-feature-card:hover .rupeeget-icon-circle {
    transform: scale(1.1) rotate(5deg);
}

.rupeeget-step:hover .rupeeget-step-number {
    transform: scale(1.1);
}

.rupeeget-loan-card:hover {
    transform: translateY(-8px) scale(1.02);
}

/* Loading states */
.rupeeget-loading {
    opacity: 0.6;
    pointer-events: none;
}

.rupeeget-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--rupeeget-primary);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Accessibility improvements */
.rupeeget-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus styles */
.rupeeget-btn-primary:focus,
.rupeeget-btn-secondary:focus {
    outline: 2px solid var(--rupeeget-warning);
    outline-offset: 2px;
}

.rupeeget-nav-link:focus {
    outline: 2px solid var(--rupeeget-primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .rupeeget-header,
    .rupeeget-footer,
    .rupeeget-cookie-consent {
        display: none;
    }
    
    .rupeeget-hero {
        min-height: auto;
        padding: 2rem 0;
    }
    
    .rupeeget-hero-title {
        font-size: 2rem;
    }
}