/**
 * ECOIA — Animations (Full Redesign)
 * GSAP-ready initial states | SplitType helpers | Pure CSS animations
 * توجه: موقعیت‌های اولیه توسط GSAP در gsap-init.js تنظیم می‌شوند
 *       این فایل فقط helpers و pure CSS animations را تعریف می‌کند
 */

/* ════════════════════════════════════════════════════════════
   ۱. SplitType — Line Reveal Wrapper
   هر .line نیاز به overflow:hidden دارد
   gsap-init.js این wrapper را به‌صورت داینامیک اضافه می‌کند
════════════════════════════════════════════════════════════ */

/* SplitType word/char/line containers */
.split-wrap {
    overflow:   hidden;
    display:    block;
    line-height: inherit;
}

/* هر کلمه که SplitType می‌سازد */
.word {
    display:        inline-block;
    overflow:       hidden;
    vertical-align: bottom;
}

/* هر خط که SplitType می‌سازد */
.line {
    overflow: hidden;
    display:  block;
}

/* ════════════════════════════════════════════════════════════
   ۲. Section Label — عنوان کوچک بالای هر بخش
   «درباره کانون» / «خدمات ما» / etc.
════════════════════════════════════════════════════════════ */

.section-label {
    display:        inline-flex;
    align-items:    center;
    gap:            0;
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--gold, #C8A951);
    margin-bottom:  clamp(16px, 2vh, 24px);
    line-height:    1;
    position:       relative;
}

/* خط بعد از label (RTL: چپ متن = راست در LTR) */
.section-label::after {
    content:        '';
    display:        inline-block;
    width:          28px;
    height:         1px;
    background:     linear-gradient(to left, transparent, var(--gold, #C8A951));
    vertical-align: middle;
    margin-right:   12px;
    opacity:        0.7;
    flex-shrink:    0;
}

/* ════════════════════════════════════════════════════════════
   ۳. Gold Divider — خط طلایی ظریف بین المان‌ها
════════════════════════════════════════════════════════════ */

.gold-divider {
    display:    block;
    width:      48px;
    height:     1px;
    background: var(--gold, #C8A951);
    margin:     clamp(20px, 2.5vh, 28px) 0;
    opacity:    0.5;
}

.gold-divider--center {
    margin-left:  auto;
    margin-right: auto;
}

/* ════════════════════════════════════════════════════════════
   ۴. Section Heading — عنوان بزرگ بخش‌ها
════════════════════════════════════════════════════════════ */

.section-heading {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     var(--text-h2, clamp(32px, 4vw, 56px));
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    line-height:   1.2;
    letter-spacing: var(--tracking-tight, -0.02em);
    margin-bottom: clamp(16px, 2vh, 24px);
    overflow:      hidden;   /* SplitType line reveal */
}

/* عنوان با Cormorant italic (برای بخش‌های خاص) */
.section-heading--display {
    font-family:  var(--font-display, 'Cormorant Garamond', serif);
    font-style:   italic;
    font-weight:  300;
    font-size:    var(--text-display, clamp(52px, 7vw, 96px));
    letter-spacing: -0.03em;
}

/* ════════════════════════════════════════════════════════════
   ۵. Grid Background Lines — Why ECOIA section
════════════════════════════════════════════════════════════ */

.grid-bg {
    position:   absolute;
    inset:      0;
    z-index:    0;
    background-image:
        linear-gradient(var(--border-subtle, #141414) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-subtle, #141414) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity:    0.4;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   ۶. Pure CSS Animations — بدون نیاز به GSAP
════════════════════════════════════════════════════════════ */

/* --- Gold Pulse: روی نقاط map و dot های accent --- */
@keyframes gold-pulse {
    0%, 100% { box-shadow: 0 0 0   0   rgba(200, 169, 81, 0.6); }
    50%       { box-shadow: 0 0 0  10px rgba(200, 169, 81, 0.0); }
}

.anim-pulse {
    animation: gold-pulse 2.4s ease-out infinite;
}

/* --- Gold Glow Text: روی اعداد counter و display titles --- */
@keyframes gold-text-glow {
    0%, 100% { text-shadow: none; }
    50%       { text-shadow: 0 0 20px rgba(200, 169, 81, 0.30),
                             0 0 40px rgba(200, 169, 81, 0.12); }
}

.anim-text-glow {
    animation: gold-text-glow 3s ease-in-out infinite;
}

/* --- Shimmer: روی progress bar ها و border های طلایی --- */
@keyframes shimmer-gold {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.anim-shimmer {
    background: linear-gradient(
        90deg,
        var(--gold-dark, #8B6914) 0%,
        var(--gold-bright, #F0E0A8) 40%,
        var(--gold, #C8A951) 50%,
        var(--gold-bright, #F0E0A8) 60%,
        var(--gold-dark, #8B6914) 100%
    );
    background-size: 200% auto;
    animation: shimmer-gold 3s linear infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Float: عناصر شناور --- */
@keyframes float-y {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}

.anim-float {
    animation: float-y 4s ease-in-out infinite;
}

/* --- Spin Slow: برای آیکون‌های چرخان --- */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.anim-spin-slow {
    animation: spin-slow 12s linear infinite;
}

/* ════════════════════════════════════════════════════════════
   ۸. CTA Strip — Parallax Section
════════════════════════════════════════════════════════════ */

.parallax-cta {
    position:   relative;
    min-height: 500px;
    overflow:   hidden;
    display:    flex;
    align-items: center;
    justify-content: center;
}

.parallax-cta__bg {
    position:   absolute;
    inset:      -20%;   /* فضای اضافی برای parallax */
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 50%,
            rgba(200, 169, 81, 0.06) 0%,
            transparent 70%),
        url('/assets/images/pages/home/parallax-intro.png');
    background-size:     cover;
    background-position: center;
    filter:     brightness(0.30) contrast(1.15) saturate(0.8);
    will-change: transform;
}

.parallax-cta__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(7, 7, 7, 0.65);
}

.parallax-cta__content {
    position:    relative;
    z-index:     2;
    text-align:  center;
    padding:     clamp(60px, 8vw, 100px) var(--container-pad, 24px);
    max-width:   min(800px, 100%);
}

/* ════════════════════════════════════════════════════════════
   ۹. Image Hover Overlay — برای کارت‌های Services
════════════════════════════════════════════════════════════ */

.img-hover-wrap {
    overflow: hidden;
    position: relative;
}

.img-hover-wrap img,
.img-hover-wrap .img-bg {
    transition: transform 0.7s var(--ease-cinematic),
                filter   0.5s ease;
}

.img-hover-wrap:hover img,
.img-hover-wrap:hover .img-bg {
    transform: scale(1.06);
}

/* ════════════════════════════════════════════════════════════
   ۱۰. GSAP ScrollTrigger Pin Section
════════════════════════════════════════════════════════════ */

.pin-section {
    /* overflow: hidden باعث مشکل با GSAP pin می‌شود */
    overflow: clip;
}

/* ════════════════════════════════════════════════════════════
   ۱۱. Reduced Motion — کاهش همه انیمیشن‌ها
════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }

    .grid-bg { display: none; }
}