/* ==========================================================================
   Vazirmatn Typography & RTL Stylesheet for Lusion.co Clone
   ========================================================================== */

@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-persian: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Typography elements using Vazirmatn */
body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label {
  font-family: var(--font-persian) !important;
  letter-spacing: 0 !important;
}

/* Isolate preloader rolling numeric wheels to authentic monospace */
#preloader-percent-digits,
.preloader-percent-digits,
.preloader-percent-digit,
.preloader-percent-digit-num,
.preloader-percent-text {
  font-family: 'LusionMono', monospace !important;
  direction: ltr !important;
}

/* Canvas & 3D WebGL scenes */
#canvas,
#transition-overlay,
#home-hero-visual-container {
  direction: ltr !important;
}

/* --------------------------------------------------------------------------
   SplitType Word & Line Fixes for Persian
   -------------------------------------------------------------------------- */
.line {
  overflow: visible !important;
  display: block !important;
  direction: rtl !important;
  text-align: right !important;
}

.word {
  display: inline-block !important;
  direction: rtl !important;
  unicode-bidi: isolate !important;
  white-space: nowrap !important;
  margin-left: 0.22em !important;
  position: relative !important;
  top: 0 !important;
  bottom: 0 !important;
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   Header & Navbar (Preserve Exact Lusion Pill Geometry & Alignment)
   -------------------------------------------------------------------------- */
html[dir="rtl"] #header,
html[dir="rtl"] #header-container {
  direction: ltr !important;
}

html[dir="rtl"] #header-right {
  direction: ltr !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}

/* Sound Button (Left circle) */
html[dir="rtl"] #header-right-sound-btn {
  order: 0 !important;
  position: relative !important;
}

/* Talk Button (Middle dark pill) */
html[dir="rtl"] #header-right-talk-btn {
  direction: ltr !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

html[dir="rtl"] #header-right-talk-btn-placeholder {
  display: none !important;
}

html[dir="rtl"] #header-right-talk-container {
  direction: ltr !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65em !important;
}

html[dir="rtl"] #header-right-talk-btn-text {
  font-family: var(--font-persian) !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
  order: 1 !important;
  letter-spacing: 0 !important;
}

html[dir="rtl"] #header-right-talk-btn-arrow {
  order: 2 !important;
  margin-left: 0 !important;
}

/* Menu Button (Right light pill) */
html[dir="rtl"] #header-right-menu-btn {
  direction: ltr !important;
  order: 2 !important;
  position: relative !important;
  width: auto !important;
  min-width: max-content !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}

html[dir="rtl"] #header-right-menu-btn-inner {
  direction: ltr !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65em !important;
}

html[dir="rtl"] #header-right-menu-btn-text,
html[dir="rtl"] #header-right-menu-btn-text-close {
  font-family: var(--font-persian) !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
  order: 1 !important;
  letter-spacing: 0 !important;
}

html[dir="rtl"] #header-right-menu-btn-dots {
  order: 2 !important;
}

html[dir="rtl"] #header-center-project-back-btn-svg,
html[dir="rtl"] #header-center-project-back-btn-svg2 {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Header Menu Drawer (RTL)
   -------------------------------------------------------------------------- */
html[dir="rtl"] #header-menu {
  direction: rtl;
}

html[dir="rtl"] .header-menu-link-inner {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .header-menu-link-svg {
  transform: scaleX(-1);
  margin-right: auto;
  margin-left: 0;
}

html[dir="rtl"] #header-menu-newsletter-title {
  text-align: right;
  direction: rtl;
  line-height: 1.4;
}

html[dir="rtl"] #header-menu-newsletter-input-field {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] #header-menu-newsletter-input-arrow svg {
  transform: scaleX(-1);
}

html[dir="rtl"] #header-menu-labs-arrow,
html[dir="rtl"] #header-menu-labs-arrow2 {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Hero Section (RTL)
   -------------------------------------------------------------------------- */
html[dir="rtl"] #home-hero {
  direction: ltr !important; /* Keep 12-column grid geometry aligned with header */
}

html[dir="rtl"] #home-hero-title {
  direction: rtl !important;
  text-align: right !important;
  grid-column: 3 / span 5 !important;
  max-width: 490px !important;
  line-height: 1.4 !important;
  font-size: clamp(16px, 1.4vw, 21px) !important;
  font-weight: 500 !important;
  overflow: visible !important;
  text-wrap: balance !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[dir="rtl"] #home-hero-title .word {
  transform: none !important; /* Keep Persian cursive text level and pristine */
}

@media (max-width: 1250px) {
  html[dir="rtl"] #header .nikspire-home-portal,
  .nikspire-home-portal {
    display: none !important;
  }
  html[dir="rtl"] #home-hero-title {
    grid-column: 3 / span 5 !important;
    max-width: 440px !important;
    font-size: clamp(14px, 1.3vw, 17px) !important;
  }
}

@media (max-width: 1080px) {
  html[dir="rtl"] #header .nikspire-home-portal,
  .nikspire-home-portal {
    display: none !important;
  }
  html[dir="rtl"] #header #header-right-talk-btn,
  #header-right-talk-btn {
    display: none !important;
  }
  html[dir="rtl"] #home-hero {
    display: flex !important;
    flex-direction: column !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 600px !important;
    padding: calc(var(--base-padding-y, 24px) + 52px) var(--base-padding-x) var(--base-padding-y) !important;
  }
  html[dir="rtl"] #home-hero-title {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 650px !important;
    font-size: clamp(16px, 2.2vw, 21px) !important;
    line-height: 1.45 !important;
    direction: rtl !important;
    text-align: right !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    text-wrap: balance !important;
  }
  html[dir="rtl"] #home-hero-visual-container {
    grid-column: auto !important;
    width: 100% !important;
    flex: 1 1 0 !important;
    min-height: 420px !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: calc(var(--base-padding-y) + 4px) !important;
  }
}

@media (max-width: 812px) {
  html[dir="rtl"] #header-right-menu-btn {
    width: auto !important;
    min-width: max-content !important;
  }
  html[dir="rtl"] #home-hero {
    min-height: 560px !important;
    padding-top: calc(var(--base-padding-y, 20px) + 48px) !important;
  }
  html[dir="rtl"] #home-hero-title {
    font-size: clamp(16px, 3.4vw, 20px) !important;
    margin-bottom: 12px !important;
  }
  html[dir="rtl"] #home-hero-visual-container {
    min-height: 380px !important;
  }
}

@media (max-width: 560px) {
  html[dir="rtl"] #header-right-menu-btn {
    width: auto !important;
    min-width: max-content !important;
  }
  html[dir="rtl"] #header-right-talk-btn {
    display: none !important;
  }
  html[dir="rtl"] .nikspire-home-portal {
    display: none !important;
  }
  html[dir="rtl"] #home-hero {
    min-height: 520px !important;
    padding-top: 64px !important;
  }
  html[dir="rtl"] #home-hero-title {
    font-size: clamp(15px, 4.4vw, 19px) !important;
    margin-bottom: 10px !important;
  }
  html[dir="rtl"] #home-hero-visual-container {
    min-height: 340px !important;
  }
}

html[dir="rtl"] #home-hero-scroll {
  font-family: var(--font-persian) !important;
  letter-spacing: 0.05em !important;
}

/* --------------------------------------------------------------------------
   Reel Section (RTL)
   -------------------------------------------------------------------------- */
html[dir="rtl"] #home-reel {
  direction: rtl;
}

html[dir="rtl"] #home-reel-title {
  direction: rtl !important;
  text-align: right !important;
  line-height: 1.4 !important;
  overflow: visible !important;
}

html[dir="rtl"] #home-reel-title-inner {
  display: inline-block !important;
  position: relative !important;
  overflow: visible !important;
}

html[dir="rtl"] #home-reel-title-inner > div,
html[dir="rtl"] #home-reel-title-line-1,
html[dir="rtl"] #home-reel-title-line-2 {
  overflow: visible !important;
  line-height: 1.4 !important;
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
  margin-top: -0.1em !important;
  margin-bottom: -0.1em !important;
}

html[dir="rtl"] #home-reel-title-line-1 {
  padding-right: calc(var(--grid-space) * 2 + var(--grid-gap) * 2) !important;
  padding-left: 0 !important;
}

@media (max-width: 812px) {
  html[dir="rtl"] #home-reel-title-line-1 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

html[dir="rtl"] #home-reel-title .word {
  top: 0 !important;
  bottom: 0 !important;
  padding-top: 0.15em !important;
  padding-bottom: 0.15em !important;
  overflow: visible !important;
}

html[dir="rtl"] #home-reel-content {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] #home-reel-desc {
  direction: rtl !important;
  text-align: right !important;
  line-height: 1.8 !important;
  font-size: 1.35vw !important;
  font-weight: 400 !important;
}

@media (max-width: 812px) {
  html[dir="rtl"] #home-reel-desc {
    font-size: 3.8vw !important;
  }
}

html[dir="rtl"] #home-reel-cta-arrow svg {
  transform: scaleX(-1);
}

html[dir="rtl"] #home-reel-video-title,
#home-reel-video-title {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   Featured Projects (RTL)
   -------------------------------------------------------------------------- */
html[dir="rtl"] #home-featured {
  direction: rtl;
}

html[dir="rtl"] #home-featured-title-top {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  position: relative !important;
  gap: 2rem !important;
  margin-bottom: 2rem !important;
  direction: rtl !important;
}

html[dir="rtl"] #home-featured-title-wrapper {
  position: relative !important;
  width: fit-content !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

html[dir="rtl"] #home-featured-title {
  text-align: right !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding-top: 0.15em !important;
  overflow: visible !important;
}

html[dir="rtl"] #home-featured-disclaimer {
  position: relative !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: min(32vw, 440px) !important;
  margin-bottom: 0.8em !important;
  text-align: right !important;
  direction: rtl !important;
  font-size: clamp(0.875rem, 0.95vw, 1.15rem) !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
  opacity: 0.9 !important;
}

@media (max-width: 812px) {
  html[dir="rtl"] #home-featured-title-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  html[dir="rtl"] #home-featured-disclaimer {
    width: 100% !important;
    margin: 1.5em 0 !important;
    font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important;
  }
}

html[dir="rtl"] .project-item-footer {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .project-item-line-1 {
  direction: rtl !important;
  text-align: right !important;
  font-size: 0.85em !important;
  line-height: 1.5 !important;
  opacity: 0.85;
}

html[dir="rtl"] .project-item-line-2 {
  direction: rtl !important;
  text-align: right !important;
  display: flex !important;
  flex-direction: row !important;
  position: relative !important;
  left: auto !important;
  direction: rtl;
  padding-inline-end: 4px;
}

html[dir="rtl"] .project-item-line-2-inner {
  overflow: visible !important;
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] #home-goal-title {
  direction: rtl !important;
  text-align: right !important;
  line-height: 1.35 !important;
  font-size: 3.2vw !important;
}

html[dir="rtl"] .home-goal-texts-paragraph {
  direction: rtl !important;
  text-align: right !important;
  line-height: 1.8 !important;
}

html[dir="rtl"] #end-section-title,
html[dir="rtl"] #end-section-title-link,
html[dir="rtl"] #end-section-title-top-decoration,
html[dir="rtl"] #end-section-title-bottom-left-decoration,
html[dir="rtl"] #end-section-title-bottom-right-decoration,
html[dir="rtl"] #end-section-subtitle,
html[dir="rtl"] #end-section-subtitle-text,
html[dir="rtl"] #end-section-content-crosses {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

html[dir="rtl"] #footer {
  direction: rtl;
}

html[dir="rtl"] .footer-address-line {
  direction: rtl;
  text-align: right;
  line-height: 1.5;
}

html[dir="rtl"] #footer-enquires-header,
html[dir="rtl"] #footer-business-header {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] #footer-middle-newsletter {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] #footer-newsletter-input-field {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] #footer-newsletter-input-arrow svg {
  transform: scaleX(-1);
}

html[dir="rtl"] #scroll-nav-content {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] #scroll-nav-next-arrow svg {
  transform: scaleX(-1);
}