/* ============================================================================
   HOMEPAGE STYLES
   Important Lessons for the Muslim Ummah
   ============================================================================ */

@import url('base.css');

/* ============================================================================
   PAGE LAYOUT
   ============================================================================ */

body {
    background: 
        radial-gradient(ellipse at top, rgba(45, 87, 66, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(45, 87, 66, 0.3) 0%, transparent 50%),
        linear-gradient(180deg, 
            var(--darkest-green) 0%, 
            var(--darker-green) 20%,
            var(--deep-green) 40%,
            var(--forest-green) 50%,
            var(--deep-green) 60%,
            var(--darker-green) 80%,
            var(--darkest-green) 100%
        );
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
}

/* ============================================================================
   DECORATIVE ELEMENTS
   ============================================================================ */

/* Smoke Edge Effects */
.smoke-edge {
    position: fixed;
    pointer-events: none;
    z-index: var(--z-base);
}

.smoke-edge.smoke-top,
.smoke-edge.smoke-bottom {
    left: 0;
    right: 0;
    height: 120px;
}

.smoke-edge.smoke-left,
.smoke-edge.smoke-right {
    top: 0;
    bottom: 0;
    width: 100px;
}

.smoke-edge.smoke-top {
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 31, 21, 0.95) 0%,
        rgba(10, 31, 21, 0.7) 30%,
        rgba(10, 31, 21, 0.3) 60%,
        transparent 100%
    );
}

.smoke-edge.smoke-bottom {
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(10, 31, 21, 0.95) 0%,
        rgba(10, 31, 21, 0.7) 30%,
        rgba(10, 31, 21, 0.3) 60%,
        transparent 100%
    );
}

.smoke-edge.smoke-left {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(10, 31, 21, 0.9) 0%,
        rgba(10, 31, 21, 0.5) 40%,
        transparent 100%
    );
}

.smoke-edge.smoke-right {
    right: 0;
    background: linear-gradient(
        to left,
        rgba(10, 31, 21, 0.9) 0%,
        rgba(10, 31, 21, 0.5) 40%,
        transparent 100%
    );
}

/* Atmospheric Lights */
.atmospheric-light {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: var(--z-base);
    filter: blur(80px);
    opacity: 0.3;
}

.atmospheric-light.light-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.4), transparent 70%);
    top: -100px;
    left: 10%;
    animation: floatLight 15s ease-in-out infinite;
}

.atmospheric-light.light-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.3), transparent 70%);
    bottom: -80px;
    right: 15%;
    animation: floatLight 18s ease-in-out infinite reverse;
}

.atmospheric-light.light-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.25), transparent 70%);
    top: 40%;
    left: -100px;
    animation: floatLight 20s ease-in-out infinite;
    animation-delay: -5s;
}

@keyframes floatLight {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.25;
    }
    25% { 
        transform: translate(30px, -20px) scale(1.1); 
        opacity: 0.35;
    }
    50% { 
        transform: translate(-20px, 30px) scale(0.95); 
        opacity: 0.3;
    }
    75% { 
        transform: translate(20px, 20px) scale(1.05); 
        opacity: 0.25;
    }
}

/* Corner Accents */
.corner-accent {
    position: fixed;
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: var(--z-dropdown);
}

.corner-accent::before,
.corner-accent::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.corner-accent::before {
    width: 80px;
    height: 2px;
}

.corner-accent::after {
    width: 2px;
    height: 80px;
}

.corner-accent.top-left {
    top: 25px;
    left: 25px;
}
.corner-accent.top-left::before { top: 0; left: 0; }
.corner-accent.top-left::after { top: 0; left: 0; }

.corner-accent.top-right {
    top: 25px;
    right: 25px;
}
.corner-accent.top-right::before { top: 0; right: 0; }
.corner-accent.top-right::after { top: 0; right: 0; }

.corner-accent.bottom-left {
    bottom: 25px;
    left: 25px;
}
.corner-accent.bottom-left::before { bottom: 0; left: 0; }
.corner-accent.bottom-left::after { bottom: 0; left: 0; }

.corner-accent.bottom-right {
    bottom: 25px;
    right: 25px;
}
.corner-accent.bottom-right::before { bottom: 0; right: 0; }
.corner-accent.bottom-right::after { bottom: 0; right: 0; }

/* Title Banner Background */
.title-banner {
    position: fixed;
    left: 0;
    right: 0;
    height: 140px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, 
        rgba(255, 140, 0, 0.08) 0%,
        rgba(255, 130, 20, 0.18) 50%,
        rgba(255, 140, 0, 0.08) 100%
    );
    border-top: 1px solid rgba(255, 140, 20, 0.25);
    border-bottom: 1px solid rgba(255, 140, 20, 0.25);
    box-shadow: inset 0 0 60px rgba(255, 140, 0, 0.1);
    z-index: var(--z-base);
    pointer-events: none;
    opacity: 0;
    animation: bannerFadeIn 1s ease-out 0.8s forwards;
}

@keyframes bannerFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) scaleY(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scaleY(1);
    }
}

.title-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle, rgba(255, 150, 30, 0.4) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 140, 20, 0.3) 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px;
    animation: particleFloat 20s linear infinite;
    opacity: 0.5;
}

@keyframes particleFloat {
    from { background-position: 0 0, 40px 40px; }
    to { background-position: 0 -100px, 40px -60px; }
}

/* ============================================================================
   MAIN CONTENT CARD
   ============================================================================ */

.page-content {
    position: relative;
    z-index: var(--z-fixed);
    width: 100%;
    max-width: 480px;
}

.content-card {
    background: linear-gradient(160deg, 
        var(--cream-light) 0%, 
        var(--cream) 30%,
        var(--cream-light) 70%,
        var(--cream) 100%
    );
    border: 2px solid var(--gold);
    border-radius: var(--radius-lg);
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(212, 175, 55, 0.2),
        var(--shadow-glow-gold-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    overflow: hidden;
    animation: fadeInScale 0.8s var(--transition-bounce) forwards;
}

/* Card shimmer effect */
.content-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(212, 175, 55, 0.02) 10%,
        transparent 20%,
        transparent 80%,
        rgba(212, 175, 55, 0.02) 90%,
        transparent 100%
    );
    animation: cardRotate 12s linear infinite;
    pointer-events: none;
}

@keyframes cardRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================================
   BISMILLAH HEADER
   ============================================================================ */

.bismillah-header {
    background: linear-gradient(135deg, var(--deep-green) 0%, var(--primary-green) 100%);
    border-bottom: 2px solid var(--gold);
    padding: var(--space-4);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bismillah-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 70% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 30%);
    animation: orbPulse 8s ease-in-out infinite;
}

@keyframes orbPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.bismillah-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.05) 25%,
        rgba(212, 175, 55, 0.1) 50%,
        rgba(212, 175, 55, 0.05) 75%,
        transparent 100%
    );
    animation: sweepShine 6s linear infinite;
}

@keyframes sweepShine {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

.bismillah {
    font-family: var(--font-arabic);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--gold);
    direction: rtl;
    letter-spacing: 1px;
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 175, 55, 0.3);
    line-height: 1.6;
    position: relative;
    z-index: 1;
    margin: 0;
    animation: bismillahEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}

@keyframes bismillahEntrance {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ============================================================================
   CARD BODY
   ============================================================================ */

.card-body {
    padding: var(--space-6);
    position: relative;
    z-index: 1;
}

/* ============================================================================
   TITLES WRAPPER
   ============================================================================ */

.titles-wrapper {
    background: linear-gradient(90deg, 
        rgba(255, 140, 0, 0.06) 0%,
        rgba(255, 130, 20, 0.12) 50%,
        rgba(255, 140, 0, 0.06) 100%
    );
    border-top: 1px solid rgba(255, 140, 20, 0.25);
    border-bottom: 1px solid rgba(255, 140, 20, 0.25);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    position: relative;
}

.titles-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle, rgba(255, 150, 30, 0.4) 1px, transparent 1px);
    background-size: 35px 35px;
    animation: particleFloat 15s linear infinite;
    opacity: 0.3;
}

/* ============================================================================
   TYPOGRAPHY SECTIONS
   ============================================================================ */

.title-section {
    text-align: center;
    margin-bottom: var(--space-4);
    animation: fadeInUp 0.8s ease-out 0.3s backwards;
    position: relative;
    z-index: 1;
}

.arabic-title {
    font-family: var(--font-arabic);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    direction: rtl;
    text-align: center;
    line-height: 1.7;
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 0 25px rgba(212, 175, 55, 0.15);
    margin: 0;
}

.english-section {
    text-align: center;
    animation: fadeInUp 0.8s ease-out 0.5s backwards;
    position: relative;
    z-index: 1;
}

.english-subtitle {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-1);
}

.english-title-main {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--gold-dark);
    letter-spacing: 1px;
    line-height: 1.3;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(212, 175, 55, 0.12);
    margin: 0;
}

/* ============================================================================
   AUTHOR SECTIONS
   ============================================================================ */

.author-section,
.explainer-section {
    text-align: center;
    margin-bottom: var(--space-5);
}

.author-section { animation: fadeInUp 0.8s ease-out 0.7s backwards; }
.explainer-section { animation: fadeInUp 0.8s ease-out 0.9s backwards; }

.author-label,
.explainer-label {
    font-family: var(--font-arabic);
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-muted);
    direction: rtl;
    margin-bottom: var(--space-1);
}

.author-name,
.explainer-name {
    font-family: var(--font-arabic);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    direction: rtl;
    line-height: 1.8;
    margin-bottom: var(--space-1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.author-english,
.explainer-english {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-secondary);
}

.explainer-desc {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--space-1);
}

/* ============================================================================
   ENTER BUTTON
   ============================================================================ */

.button-section {
    text-align: center;
    margin-top: var(--space-8);
    animation: fadeInUp 0.8s ease-out 1.1s backwards;
}

.enter-btn {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
    background-size: 200% 100%;
    border: none;
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-8);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--darker-green);
    cursor: pointer;
    box-shadow: 
        0 4px 20px rgba(212, 175, 55, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: all var(--transition-bounce);
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
}

.enter-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: buttonShine 3s infinite;
}

@keyframes buttonShine {
    0% { transform: translateX(-100%); }
    25%, 100% { transform: translateX(100%); }
}

.enter-btn:hover {
    background-position: 100% 50%;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 
        0 10px 35px rgba(212, 175, 55, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.enter-btn:active {
    transform: translateY(-1px) scale(1.01);
}

.enter-btn:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
}

.btn-text {
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.btn-icon {
    font-size: 1.2em;
    transition: transform var(--transition-bounce);
    position: relative;
    z-index: 1;
}

.enter-btn:hover .btn-icon {
    transform: translateX(5px);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    body {
        padding: var(--space-4);
    }
    
    .corner-accent {
        width: 50px;
        height: 50px;
    }
    
    .corner-accent::before { width: 50px; }
    .corner-accent::after { height: 50px; }
    
    .corner-accent.top-left,
    .corner-accent.top-right { top: 15px; }
    
    .corner-accent.bottom-left,
    .corner-accent.bottom-right { bottom: 15px; }
    
    .corner-accent.top-left,
    .corner-accent.bottom-left { left: 15px; }
    
    .corner-accent.top-right,
    .corner-accent.bottom-right { right: 15px; }
    
    .atmospheric-light.light-1 { width: 250px; height: 250px; }
    .atmospheric-light.light-2 { width: 200px; height: 200px; }
    .atmospheric-light.light-3 { display: none; }
}

@media (max-width: 480px) {
    body {
        padding: var(--space-3);
    }
    
    .corner-accent {
        width: 35px;
        height: 35px;
    }
    
    .corner-accent::before { 
        width: 35px; 
        height: 1.5px;
    }
    .corner-accent::after { 
        width: 1.5px;
        height: 35px; 
    }
    
    .corner-accent.top-left,
    .corner-accent.top-right { top: 10px; }
    
    .corner-accent.bottom-left,
    .corner-accent.bottom-right { bottom: 10px; }
    
    .corner-accent.top-left,
    .corner-accent.bottom-left { left: 10px; }
    
    .corner-accent.top-right,
    .corner-accent.bottom-right { right: 10px; }
    
    .card-body {
        padding: var(--space-5);
    }
    
    .title-banner {
        height: 100px;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .smoke-edge,
    .atmospheric-light,
    .corner-accent,
    .title-banner {
        display: none !important;
    }
    
    body {
        background: white !important;
        padding: 0;
    }
    
    .content-card {
        box-shadow: none;
        border: 2px solid #333;
    }
}