/* ═══════════════════════════════════════════════════════════
   ANIMATIONS.CSS — انیمیشن‌ها
   ANIMATIONS.CSS — Animations
   
   فهرست / Table of Contents:
   01. Reveal          — ظاهر شدن با اسکرول
   02. Letter Reveal   — نمایش حرف‌به‌حرف
   03. Float           — شنای آروم
   04. Rotate          — چرخش
   05. Bounce          — فلش پایین
   06. Fade In         — محو شدن
   07. Slide In        — لغزش
   08. Blob            — شکل‌های ارگانیک
   09. Shimmer         — درخشش
   10. Service Hover   — خط زیر سرویس
   11. Marquee         — نوار متحرک
   12. Hero Grid       — حرکت گرید
   13. Language        — تغییر زبان
   14. Reduced Motion  — احترام به کاربر
   15. Mobile          — بهینه‌سازی موبایل
   16. Chrome          — بهینه‌سازی کروم
   ═══════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────
   01. REVEAL — ظاهر شدن با اسکرول
   ─────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

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

/* ═══ تأخیر پله‌ای ═══ */
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }
.reveal.delay-5 { transition-delay: 0.5s; }
.reveal.delay-6 { transition-delay: 0.6s; }


/* ───────────────────────────────────────────────────────────
   02. LETTER REVEAL — نمایش حرف‌به‌حرف
   ─────────────────────────────────────────────────────────── */

.letter-reveal {
  display: inline-block;
}

.letter-reveal .letter {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%) rotateX(-90deg);
  transform-origin: center bottom;
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-slow) var(--ease-expo);
  will-change: transform, opacity;
}

.letter-reveal.visible .letter {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

.letter-reveal .letter.space {
  width: 0.3em;
}

.letter-reveal .letter.em {
  color: var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
}


/* ───────────────────────────────────────────────────────────
   03. FLOAT — شنای آروم
   ─────────────────────────────────────────────────────────── */

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-18px) scale(1.03);
  }
}

.float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}

/* ═══ شنا قاب هنری ═══ */
@keyframes floatArt {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-25px); }
}

.float-art {
  animation: floatArt 5s ease-in-out infinite;
}


/* ───────────────────────────────────────────────────────────
   04. ROTATE — چرخش
   ─────────────────────────────────────────────────────────── */

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

.rotate-slow {
  animation: rotateSlow 20s linear infinite;
}


/* ───────────────────────────────────────────────────────────
   05. BOUNCE — فلش پایین
   ─────────────────────────────────────────────────────────── */

@keyframes bounceDown {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.5;
  }
}

.bounce-down {
  animation: bounceDown 1.6s ease-in-out infinite;
}

/* ═══ پالس ملایم ═══ */
@keyframes scrollPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(90, 143, 160, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(90, 143, 160, 0.1);
  }
}

.scroll-pulse {
  animation: scrollPulse 3s ease-in-out infinite;
}


/* ───────────────────────────────────────────────────────────
   06. FADE IN — محو شدن
   ─────────────────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in {
  animation: fadeIn var(--dur-slow) var(--ease-out) forwards;
}

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

.fade-in-up {
  animation: fadeInUp var(--dur-slow) var(--ease-out) forwards;
}

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

.fade-in-down {
  animation: fadeInDown var(--dur-slow) var(--ease-out) forwards;
}


/* ───────────────────────────────────────────────────────────
   07. SLIDE IN — لغزش
   ─────────────────────────────────────────────────────────── */

.slide-in-left {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}


/* ───────────────────────────────────────────────────────────
   08. BLOB — شکل‌های ارگانیک
   ─────────────────────────────────────────────────────────── */

@keyframes blob {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

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

@keyframes blobRotate {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.blob-rotate {
  animation: blobRotate 20s linear infinite;
}


/* ───────────────────────────────────────────────────────────
   09. SHIMMER — درخشش
   ─────────────────────────────────────────────────────────── */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(90, 143, 160, 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes lineGrow {
  from { width: 0; }
  to   { width: 100%; }
}

.line-grow {
  animation: lineGrow 1s var(--ease-expo) forwards;
}


/* ───────────────────────────────────────────────────────────
   10. SERVICE HOVER — خط زیر سرویس
   ─────────────────────────────────────────────────────────── */

.service-item {
  position: relative;
}

.service-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}

.service-item:hover::after {
  width: 100%;
  right: auto;
  left: 0;
}


/* ───────────────────────────────────────────────────────────
   11. MARQUEE — نوار متحرک
   ─────────────────────────────────────────────────────────── */

@keyframes marqueeMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeMoveReverse {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

body.fa .marquee-track {
  animation-name: marqueeMoveReverse;
}


/* ───────────────────────────────────────────────────────────
   12. HERO GRID — حرکت گرید
   ─────────────────────────────────────────────────────────── */

@keyframes heroGridMove {
  0%   { background-position: 0 0; }
  100% { background-position: 80px 80px; }
}

.hero-grid {
  animation: heroGridMove 25s linear infinite;
}


/* ───────────────────────────────────────────────────────────
   13. LANGUAGE — تغییر زبان
   ─────────────────────────────────────────────────────────── */

body.lang-changing {
  animation: langFade 0.35s ease-out;
}

@keyframes langFade {
  0%   { opacity: 1; }
  40%  { opacity: 0.2; }
  100% { opacity: 1; }
}


/* ───────────────────────────────────────────────────────────
   14. 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;
  }

  .reveal,
  .slide-in-left,
  .slide-in-right,
  .gallery-item.reveal,
  .work-list a.reveal {
    opacity: 1 !important;
    transform: none !important;
  }

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


/* ───────────────────────────────────────────────────────────
   15. MOBILE — بهینه‌سازی موبایل
   ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

  .hero-grid,
  .float-art,
  .float-slow,
  .blob,
  .blob-rotate,
  .rotate-slow {
    animation: none !important;
  }

  .reveal {
    transition-duration: 0.6s !important;
    transform: translateY(20px) !important;
  }

  .letter-reveal .letter {
    transition-duration: 0.4s !important;
  }

  .marquee-track {
    animation-duration: 60s !important;
  }
}


/* ───────────────────────────────────────────────────────────
   16. CHROME — بهینه‌سازی کروم
   ─────────────────────────────────────────────────────────── */

.is-chrome .marquee-track {
  animation-duration: 45s !important;
}

.is-chrome .hero-grid {
  animation-duration: 30s !important;
}

.is-chrome .reveal {
  transition-duration: 0.6s !important;
}

.is-chrome .letter-reveal .letter {
  transition-duration: 0.4s !important;
}

/* ═══════════════════════════════════════════════════════
   ABOUT ANIMATION — انیمیشن ورود About
   ═══════════════════════════════════════════════════════ */

/* ═══ عکس About — از چپ میاد ═══ */
.about-image {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 1s cubic-bezier(.2, .8, .2, 1),
    transform 1s cubic-bezier(.2, .8, .2, 1);
}

.about-image.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ═══ متن About — از راست میاد ═══ */
.about-content-col {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 1s cubic-bezier(.2, .8, .2, 1) 0.15s,
    transform 1s cubic-bezier(.2, .8, .2, 1) 0.15s;
}

.about-content-col.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ═══ تیتر About — fade up با تأخیر ═══ */
.about-title {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.2s cubic-bezier(.2, .8, .2, 1) 0.3s,
    transform 1.2s cubic-bezier(.2, .8, .2, 1) 0.3s;
}

.about-content-col.visible .about-title {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ پاراگراف‌ها — تأخیر پله‌ای ═══ */
.about-copy p {
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 0.8s cubic-bezier(.2, .8, .2, 1),
    transform 0.8s cubic-bezier(.2, .8, .2, 1);
}

.about-content-col.visible .about-copy p:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.about-content-col.visible .about-copy p:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.65s;
}

/* ═══ Meta — آخر از همه ═══ */
.about-meta {
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 0.8s cubic-bezier(.2, .8, .2, 1) 0.8s,
    transform 0.8s cubic-bezier(.2, .8, .2, 1) 0.8s;
}

.about-content-col.visible .about-meta {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ موبایل — همه از پایین ═══ */
@media (max-width: 900px) {

  .about-image {
    transform: translateY(30px);
  }

  .about-content-col {
    transform: translateY(30px);
  }
}