/* ── Base ── */
[dir="rtl"] { font-family: 'Vazirmatn', sans-serif; }
[dir="ltr"] { font-family: 'Inter', sans-serif; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
[x-cloak] { display: none !important; }

/* ── Gradient text ── */
.gradient-text {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 55%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Grid bg ── */
.bg-grid {
    background-image:
            linear-gradient(rgba(124,58,237,.045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(124,58,237,.045) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #7c3aed; border-radius: 999px; }

/* ══════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.from-left  { transform: translateX(-36px) translateY(0); }
.reveal.from-right { transform: translateX( 36px) translateY(0); }
.reveal.scale-up   { transform: scale(.88); opacity: 0; transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.reveal.visible    { opacity: 1; transform: none; }

/* ══════════════════════════════════════
   HERO – PARTICLES
══════════════════════════════════════ */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}
@keyframes particleFloat {
    0%   { transform: translateY(0)    translateX(0);    opacity: .15; }
    25%  { transform: translateY(-40px) translateX(18px); opacity: .6;  }
    50%  { transform: translateY(-20px) translateX(-12px);opacity: .3;  }
    75%  { transform: translateY(-55px) translateX(8px);  opacity: .7;  }
    100% { transform: translateY(0)    translateX(0);    opacity: .15; }
}

/* ── Hero blobs ── */
@keyframes blobPulse {
    0%,100% { transform: scale(1)   translate(0,0);       border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
    33%     { transform: scale(1.12) translate(20px,-10px);border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%; }
    66%     { transform: scale(.9)  translate(-15px,15px); border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; }
}
.blob1 { animation: blobPulse  9s ease-in-out infinite; }
.blob2 { animation: blobPulse 11s ease-in-out infinite reverse; }

/* ── Floating badges ── */
@keyframes floatBadge  { 0%,100%{transform:translateY(0);}   50%{transform:translateY(-10px);} }
@keyframes floatBadge2 { 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-8px) rotate(2deg);} }
.float1 { animation: floatBadge  3.5s ease-in-out infinite; }
.float2 { animation: floatBadge2 4.2s ease-in-out infinite 1.4s; }

/* ── Typing cursor ── */
.cursor::after {
    content: '|';
    animation: blink .8s step-start infinite;
    color: #7c3aed;
    font-weight: 300;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ── Tech stack ticker ── */
.ticker-wrap { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker { from{transform:translateX(-0%);} to{transform:translateX(50%);} }

/* ══════════════════════════════════════
   TIMELINE
══════════════════════════════════════ */
.timeline-line {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 19px;
    width: 2px;
    background: linear-gradient(to bottom, #7c3aed, #06b6d4);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 1.4s cubic-bezier(.16,1,.3,1);
}
.timeline-line.drawn { transform: scaleY(1); }

@keyframes dotRing {
    0%,100%{ box-shadow: 0 0 0 0   rgba(124,58,237,.5); }
    50%    { box-shadow: 0 0 0 10px rgba(124,58,237,0);  }
}
.dot-ring { animation: dotRing 2.4s ease-in-out infinite; }

/* ══════════════════════════════════════
   SKILL WAVE
══════════════════════════════════════ */
.wave-child { opacity: 0; }
@keyframes waveIn {
    from { opacity:0; transform:translateY(14px) scale(.92); }
    to   { opacity:1; transform:translateY(0)    scale(1);   }
}
.wave-child.waved { animation: waveIn .42s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ══════════════════════════════════════
   CARD & PILL INTERACTIONS
══════════════════════════════════════ */
.card-hover {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -12px rgba(124,58,237,.22);
    border-color: rgba(124,58,237,.3) !important;
}
.dark .card-hover:hover {
    box-shadow: 0 24px 50px -12px rgba(124,58,237,.35);
}

.skill-pill {
    display: inline-block;
    transition: transform .22s ease, box-shadow .22s ease;
    cursor: default;
}
.skill-pill:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 8px 22px rgba(124,58,237,.28);
}

/* ── Social icon ── */
.social-icon {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 1.5px solid rgba(156,163,175,.4);
    color: #6b7280;
    font-size: 16px;
    transition: all .22s ease;
    text-decoration: none;
}
.social-icon:hover {
    border-color: #7c3aed; color: #7c3aed;
    background: rgba(124,58,237,.08);
    transform: translateY(-3px) scale(1.1);
}
.dark .social-icon { border-color: rgba(255,255,255,.12); color: #9ca3af; }
.dark .social-icon:hover { border-color: #a78bfa; color: #a78bfa; background: rgba(167,139,250,.1); }

/* ── Avatar glow ── */
.avatar-glow {
    box-shadow: 0 0 0 1px rgba(124,58,237,.35), 0 0 60px rgba(124,58,237,.15);
    animation: avatarPulse 4s ease-in-out infinite;
}
@keyframes avatarPulse {
    0%,100%{ box-shadow: 0 0 0 1px rgba(124,58,237,.35), 0 0 60px rgba(124,58,237,.15); }
    50%    { box-shadow: 0 0 0 1px rgba(124,58,237,.5),  0 0 80px rgba(124,58,237,.25); }
}

/* ── CTA button glow shimmer ── */
.btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary::before {
    content: '';
    position: absolute;
    top: -50%; left: -75%;
    width: 50%; height: 200%;
    background: rgba(255,255,255,.18);
    transform: skewX(-20deg);
    transition: left .55s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(124,58,237,.4); }
.btn-primary:hover::before { left: 130%; }

/* ── Section alt ── */
.section-alt { background: rgba(124,58,237,.025); }
.dark .section-alt { background: rgba(255,255,255,.014); }

/* ── Back to top ── */
#btt {
    opacity: 0; transform: translateY(12px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
#btt.visible { opacity: 1; transform: none; pointer-events: auto; }

/* ── Nav active ── */
.nav-link.active { color: #7c3aed; background: rgba(124,58,237,.08); }
.dark .nav-link.active { color: #a78bfa; background: rgba(167,139,250,.1); }

/* ── Contact gradient card ── */
@keyframes gradientShift {
    0%,100%{ background-position: 0%   50%; }
    50%    { background-position: 100% 50%; }
}
.contact-card {
    background: linear-gradient(-45deg, #7c3aed, #5b21b6, #0e7490, #7c3aed);
    background-size: 300% 300%;
    animation: gradientShift 7s ease infinite;
}

/* ── Project card animated thumbnail ── */
.proj-thumb {
    background: linear-gradient(-45deg, #7c3aed22, #06b6d422, #a78bfa22, #0891b222);
    background-size: 400% 400%;
    animation: gradientShift 5s ease infinite;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity:1; transform:none; }
}