/* ============================================
   IranChange Landing Page - Premium Styles
   Iranian/Islamic inspired design system
   ============================================ */

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #fefdfb;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #065f46, #064e3b);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #047857, #065f46);
}

/* ============================================
   Islamic / Geometric Pattern Backgrounds
   ============================================ */

/* Hero Islamic geometric pattern (eslimi-inspired 8-pointed star grid) */
.hero-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23d4a017' stroke-width='0.5' opacity='0.08'%3E%3C!-- 8-pointed star --%3E%3Cpath d='M40 10 L46 26 L60 20 L54 34 L70 40 L54 46 L60 60 L46 54 L40 70 L34 54 L20 60 L26 46 L10 40 L26 34 L20 20 L34 26 Z'/%3E%3C!-- Inner octagon --%3E%3Cpath d='M40 18 L50 30 L62 40 L50 50 L40 62 L30 50 L18 40 L30 30 Z'/%3E%3C!-- Center circle --%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3C!-- Corner connectors --%3E%3Cpath d='M0 0 L14 14 M80 0 L66 14 M0 80 L14 66 M80 80 L66 66'/%3E%3C!-- Edge connectors --%3E%3Cpath d='M40 0 L40 10 M80 40 L70 40 M40 80 L40 70 M0 40 L10 40'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* Subtle section pattern (lighter eslimi for content sections) */
.section-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23d4a017' stroke-width='0.3' opacity='0.04'%3E%3Cpath d='M30 5 L35 18 L48 12 L42 25 L55 30 L42 35 L48 48 L35 42 L30 55 L25 42 L12 48 L18 35 L5 30 L18 25 L12 12 L25 18 Z'/%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* Shamse (sun medallion) decoration */
.shamse-decoration {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23d4a017' stroke-width='1'%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3Ccircle cx='100' cy='100' r='70'/%3E%3Ccircle cx='100' cy='100' r='50'/%3E%3Ccircle cx='100' cy='100' r='30'/%3E%3Cpath d='M100 10 L110 40 L140 20 L120 50 L150 50 L125 65 L155 80 L125 80 L140 110 L110 90 L110 120 L100 90 L90 120 L90 90 L60 110 L75 80 L45 80 L75 65 L50 50 L80 50 L60 20 L90 40 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ============================================
   Animations
   ============================================ */

/* Float animation for background orbs */
@keyframes float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}

@keyframes floatDelayed {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(20px) scale(0.95); }
}

.animate-float {
    animation: float 8s ease-in-out infinite;
}

.animate-float-delayed {
    animation: floatDelayed 10s ease-in-out infinite;
    animation-delay: 2s;
}

/* Gold shimmer text animation */
@keyframes shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.animate-shimmer {
    background-size: 200% auto;
    animation: shimmer 6s ease-in-out infinite;
}

/* ============================================
   Scroll Reveal System
   ============================================ */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* ============================================
   Header
   ============================================ */

.header-scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 30px rgba(6, 95, 70, 0.08);
    border-bottom-color: rgba(6, 95, 70, 0.08) !important;
}

/* ============================================
   Glass Card Effect
   ============================================ */

.glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.85);
}

/* ============================================
   Rate Cards (Hero)
   ============================================ */

.rate-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.rate-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Currency Cards
   ============================================ */

.currency-card {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   FAQ Accordion
   ============================================ */

.faq-item[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    background: white;
    border-color: rgba(6, 95, 70, 0.15);
}

.faq-item summary {
    -webkit-tap-highlight-color: transparent;
}

.faq-item summary:focus {
    outline: none;
}

.faq-item summary:focus-visible {
    outline: 2px solid #065f46;
    outline-offset: 2px;
    border-radius: 1rem;
}

/* ============================================
   Decorative Elements
   ============================================ */

/* Iranian-style decorative border for sections */
.iranian-border-top {
    position: relative;
}

.iranian-border-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #d4a017, transparent);
}

/* ============================================
   Trust Badge hover effect
   ============================================ */

.trust-badge:hover .trust-badge-icon {
    transform: scale(1.1) rotate(5deg);
}

/* ============================================
   Selection color
   ============================================ */

::selection {
    background: rgba(6, 95, 70, 0.15);
    color: #065f46;
}

::-moz-selection {
    background: rgba(6, 95, 70, 0.15);
    color: #065f46;
}

/* ============================================
   Mobile Responsive Tweaks
   ============================================ */

@media (max-width: 640px) {
    /* Tighter spacing on mobile */
    .reveal {
        transform: translateY(20px);
    }

    /* Disable heavy backdrop-blur on low-end mobile */
    @supports not (backdrop-filter: blur(12px)) {
        .glass-card {
            background: rgba(255, 255, 255, 0.92);
        }
    }

    /* Rate cards grid adjustments */
    .rate-card {
        padding: 0.75rem;
    }

    /* FAQ better touch targets */
    .faq-item summary {
        padding: 1rem 1.25rem;
    }
}

@media (max-width: 768px) {
    /* Reduce pattern opacity on smaller screens for performance */
    .hero-pattern {
        opacity: 0.5;
    }

    .section-pattern {
        opacity: 0.5;
    }

    .shamse-decoration {
        display: none;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .hero-pattern,
    .section-pattern,
    .shamse-decoration {
        display: none;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    header {
        position: static !important;
    }
}