/* =========================================================
   ASAL STUDIO — SITE MOTION V2
   Smooth, visible and layout-safe visual motion.
========================================================= */

:root {
    --motion-ease: cubic-bezier(.16, 1, .3, 1);
    --motion-soft-ease: cubic-bezier(.22, .82, .24, 1);
    --motion-gold-rgb: 211, 168, 83;
}


/* =========================================================
   HERO POSITIONING
========================================================= */

.modern-home-hero,
.whatido-hero,
.portfolio-hero,
.contact-simple-hero {
    position: relative !important;
    isolation: isolate !important;
}


/*
 * Backgroundهای اصلی پایین‌تر از نور جدید باقی می‌مانند.
 */

.whatido-hero__background,
.portfolio-minimal-hero__glow,
.contact-simple-hero__glow {
    z-index: 0 !important;
}


/*
 * محتوای واقعی Hero باید بالاتر از نور باشد.
 */

.modern-home-hero__content,
.modern-goal-panel,
.whatido-hero__content,
.whatido-hero__visual,
.portfolio-minimal-hero__content,
.portfolio-scope-panel,
.contact-simple-hero__content {
    position: relative !important;
    z-index: 3 !important;
}


/* =========================================================
   HERO GOLD GLOW
========================================================= */

.site-motion-hero-glow {
    --motion-glow-x: 0px;
    --motion-glow-y: 0px;
    --motion-glow-scroll: 0px;
    --motion-glow-scale: 0.88;
    position: absolute;
    top: -34%;
    left: 5%;
    z-index: 1;
    display: block;
    width: 90%;
    height: 118%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient( ellipse at 45% 38%, rgba( var(--motion-gold-rgb), 0.24 ) 0%, rgba( var(--motion-gold-rgb), 0.125 ) 24%, rgba( var(--motion-gold-rgb), 0.055 ) 43%, rgba( var(--motion-gold-rgb), 0.015 ) 58%, transparent 72% );
    filter: blur(24px);
    transform: translate3d( var(--motion-glow-x), calc( var(--motion-glow-y) + var(--motion-glow-scroll) ), 0 ) scale( var(--motion-glow-scale) );
    transition: opacity 1100ms ease, filter 800ms ease;
    will-change: transform, opacity;
}


    .site-motion-hero-glow.is-motion-glow-visible {
        --motion-glow-scale: 1;
        opacity: 0.92;
    }


html[data-theme="dark"]
.site-motion-hero-glow.is-motion-glow-visible {
    opacity: 0.74;
}


/* =========================================================
   REVEAL ELEMENTS
========================================================= */

/*
 * JavaScript با Web Animations API انیمیشن اصلی
 * را اجرا می‌کند. این حالت فقط مانع Flash اولیه می‌شود.
 */

html.site-motion-enabled
[data-motion-reveal]:not(.is-motion-visible) {
    opacity: 0;
}


html.site-motion-enabled
[data-motion-reveal].is-motion-visible {
    opacity: 1;
}


/* =========================================================
   SMOOTH CURSOR INTERACTION
========================================================= */

.site-motion-interactive {
    --motion-pointer-x: 0px;
    --motion-pointer-y: 0px;
    translate: var(--motion-pointer-x) var(--motion-pointer-y);
    will-change: translate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/*
 * ساختار اصلی کارت‌ها تغییر نمی‌کند.
 * transformهای فعلی کارت با translate مستقل تداخل ندارند.
 */

.site-motion-interactive--card {
    transition: filter 420ms ease, border-color 420ms ease !important;
}


.site-motion-interactive--button {
    transition: filter 320ms ease !important;
}


@media (hover: hover) and (pointer: fine) {

    .site-motion-interactive--card:hover {
        filter: saturate(1.035) brightness(1.012);
    }


    .site-motion-interactive--button:hover {
        filter: saturate(1.055) brightness(1.018);
    }
}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

.site-motion-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 4px;
    overflow: hidden;
    pointer-events: none;
    background: rgba( var(--motion-gold-rgb), 0.08 );
}


.site-motion-progress__bar {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient( 90deg, rgba( 134, 86, 27, 0.96 ), rgba( var(--motion-gold-rgb), 1 ) 48%, rgba( 246, 226, 178, 0.98 ) );
    box-shadow: 0 0 14px rgba( var(--motion-gold-rgb), 0.34 );
    will-change: transform;
}


html[dir="rtl"]
.site-motion-progress__bar {
    transform-origin: right center;
}


/* =========================================================
   TOPBAR SCROLLED STATE
========================================================= */

.topbar {
    transition: background 480ms ease, border-color 480ms ease, box-shadow 480ms ease, backdrop-filter 480ms ease !important;
}


html body
.topbar.is-motion-scrolled {
    border-color: rgba( var(--motion-gold-rgb), 0.34 ) !important;
    background: rgba( 255, 250, 240, 0.79 ) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.19) !important;
    backdrop-filter: blur(28px) saturate(1.19) !important;
    box-shadow: 0 20px 48px rgba( 43, 29, 14, 0.13 ), inset 0 1px 0 rgba( 255, 255, 255, 0.70 ) !important;
}


html[data-theme="dark"]
body
.topbar.is-motion-scrolled {
    border-color: rgba( var(--motion-gold-rgb), 0.25 ) !important;
    background: rgba( 14, 16, 20, 0.82 ) !important;
    box-shadow: 0 22px 52px rgba( 0, 0, 0, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.045 ) !important;
}


/* =========================================================
   THEME / LANGUAGE PRESS
========================================================= */

.premium-theme-toggle.is-motion-pressed,
.language-switch.is-motion-pressed,
.theme-toggle.is-motion-pressed {
    animation: siteMotionControlPress 540ms var(--motion-ease);
}


@keyframes siteMotionControlPress {

    0% {
        scale: 1;
    }

    30% {
        scale: 0.91;
    }

    68% {
        scale: 1.045;
    }

    100% {
        scale: 1;
    }
}


/* =========================================================
   PORTFOLIO EDITORIAL NUMBER
========================================================= */

.portfolio-card {
    position: relative;
}


.site-motion-editorial-number {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid rgba( 255, 255, 255, 0.36 );
    border-radius: 999px;
    color: rgba( 255, 255, 255, 0.96 );
    background: rgba( 14, 15, 18, 0.42 );
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.12em;
    pointer-events: none;
}


html[dir="rtl"]
.site-motion-editorial-number {
    right: 12px;
    left: auto;
}


/* =========================================================
   PORTFOLIO VIDEO PREVIEW
========================================================= */

.portfolio-card__media {
    position: relative;
}


.site-motion-preview-video {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    object-fit: contain;
    object-position: center;
    background: #0d0e11;
    transition: opacity 420ms ease, visibility 0s linear 420ms;
}


.portfolio-card__media.is-motion-previewing
.site-motion-preview-video {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}


/* نوشته PREVIEW توسط JavaScript ساخته می‌شود */

.site-motion-preview-label {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 9;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba( 255, 255, 255, 0.30 );
    border-radius: 999px;
    color: rgba( 255, 255, 255, 0.96 );
    background: rgba( 12, 13, 16, 0.50 );
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    translate: 0 7px;
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.12em;
    pointer-events: none;
    transition: opacity 360ms ease, translate 480ms var(--motion-ease), visibility 0s linear 360ms;
}


.site-motion-preview-label__dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e3b85f;
    box-shadow: 0 0 9px rgba( 227, 184, 95, 0.78 );
    animation: siteMotionPreviewDot 1400ms ease-in-out infinite;
}


.portfolio-card__media.is-motion-previewing
.site-motion-preview-label {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
}


@keyframes siteMotionPreviewDot {

    0%, 100% {
        opacity: 0.45;
        scale: 0.78;
    }

    50% {
        opacity: 1;
        scale: 1;
    }
}


/*
 * کنترل‌ها بالاتر از ویدئو باقی می‌مانند.
 */

.portfolio-card__media.is-motion-previewing
.portfolio-card__overlay,
.portfolio-card__media.is-motion-previewing
.portfolio-card__open {
    z-index: 7;
}


/*
 * هنگام Preview عبارت Play Video محو می‌شود
 * تا نوشته PREVIEW واضح باشد.
 */

.portfolio-card__media.is-motion-previewing
.portfolio-card__media-type {
    opacity: 0;
}


/* =========================================================
   FEATURED CASE STUDY TREATMENT
========================================================= */

.portfolio-featured-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}


.site-motion-case-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.44;
    background: radial-gradient( circle at 84% 12%, rgba( var(--motion-gold-rgb), 0.19 ), transparent 38% ), linear-gradient( 135deg, rgba( var(--motion-gold-rgb), 0.055 ), transparent 48% );
}


.portfolio-featured-card > :not(.site-motion-case-cover) {
    position: relative;
    z-index: 1;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .site-motion-hero-glow {
        top: -20%;
        left: -18%;
        width: 140%;
        height: 100%;
        filter: blur(30px);
    }


    .site-motion-interactive {
        translate: 0 0 !important;
    }


    .site-motion-editorial-number {
        top: 10px;
        left: 10px;
    }


    html[dir="rtl"]
    .site-motion-editorial-number {
        right: 10px;
        left: auto;
    }


    .site-motion-preview-label,
    .site-motion-preview-video {
        display: none !important;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html.site-motion-enabled
    [data-motion-reveal] {
        opacity: 1 !important;
    }


    .site-motion-hero-glow {
        --motion-glow-x: 0px !important;
        --motion-glow-y: 0px !important;
        --motion-glow-scroll: 0px !important;
        --motion-glow-scale: 1 !important;
        opacity: 0.55 !important;
    }


    .site-motion-interactive {
        translate: 0 0 !important;
    }


    .premium-theme-toggle.is-motion-pressed,
    .language-switch.is-motion-pressed,
    .theme-toggle.is-motion-pressed {
        animation: none !important;
    }
}

/* =========================================================
   PORTFOLIO COVER — STAGE 2 PLACEHOLDER

   در مرحله بعد با طراحی کامل جایگزین می‌شود.
========================================================= */

/* =========================================================
   PORTFOLIO PROFESSIONAL COVER SYSTEM
========================================================= */

/*
 * رنگ پیش‌فرض و تنظیمات مشترک تمام کاورها
 */

.portfolio-cover-layer {
    --cover-accent-rgb: 173, 132, 79;
    --cover-accent: rgb( var(--cover-accent-rgb) );
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 16px;
    color: #ffffff;
    pointer-events: none;
    opacity: 1;
    transition: opacity 520ms ease, filter 700ms ease;
    isolation: isolate;
}


/* =========================================================
   MEDIA LAYER ORDER
========================================================= */

.portfolio-card__media {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #171717;
}








.portfolio-card__overlay {
    z-index: 2;
}


.portfolio-card__media-type,
.portfolio-card__open {
    position: absolute;
    z-index: 6;
}


/*
 * شماره‌ای که سیستم Motion قبلی روی خود کارت
 * ایجاد می‌کرد مخفی می‌شود، چون شماره جدید داخل
 * Cover Layer نمایش داده خواهد شد.
 */

.portfolio-card > .site-motion-editorial-number {
    display: none !important;
}


/* =========================================================
   CONTROLLED DARK GRADIENT
========================================================= */

.portfolio-cover-layer__gradient {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    background: linear-gradient( 180deg, rgba( 7, 8, 10, 0.54 ) 0%, rgba( 7, 8, 10, 0.10 ) 32%, rgba( 7, 8, 10, 0.08 ) 49%, rgba( 7, 8, 10, 0.48 ) 73%, rgba( 7, 8, 10, 0.88 ) 100% ), radial-gradient( circle at 88% 16%, rgba( var(--cover-accent-rgb), 0.22 ), transparent 42% );
    transition: opacity 720ms ease, background 720ms ease;
}


/* =========================================================
   TECHNICAL GRID PATTERN
========================================================= */

.portfolio-cover-layer__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    opacity: 0.25;
    background-image: linear-gradient( rgba( var(--cover-accent-rgb), 0.13 ) 1px, transparent 1px ), linear-gradient( 90deg, rgba( var(--cover-accent-rgb), 0.13 ) 1px, transparent 1px ), linear-gradient( 135deg, transparent 0%, transparent 49.7%, rgba( 255, 255, 255, 0.035 ) 50%, transparent 50.3%, transparent 100% );
    background-size: 32px 32px, 32px 32px, 92px 92px;
    -webkit-mask-image: linear-gradient( 145deg, rgba( 0, 0, 0, 0.68 ), transparent 72% );
    mask-image: linear-gradient( 145deg, rgba( 0, 0, 0, 0.68 ), transparent 72% );
    translate: 0 0;
    transition: opacity 800ms ease, translate 1100ms cubic-bezier(.16, 1, .3, 1);
}


/* =========================================================
   ACCENT LIGHT
========================================================= */

.portfolio-cover-layer::after {
    content: "";
    position: absolute;
    right: -22%;
    bottom: -50%;
    z-index: -1;
    width: 75%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.24;
    background: radial-gradient( circle, rgba( var(--cover-accent-rgb), 0.55 ), rgba( var(--cover-accent-rgb), 0.11 ) 42%, transparent 70% );
    filter: blur(30px);
    scale: 0.86;
    transition: opacity 800ms ease, scale 1100ms cubic-bezier(.16, 1, .3, 1);
}


/* =========================================================
   TOP AREA
========================================================= */

.portfolio-cover-layer__top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


.portfolio-cover-layer__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 40px;
    height: 29px;
    padding-inline: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.33 );
    border-radius: 999px;
    color: rgba( 255, 255, 255, 0.98 );
    background: rgba( 10, 11, 13, 0.37 );
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.14 ), 0 8px 22px rgba( 0, 0, 0, 0.14 );
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.12em;
}


.portfolio-cover-layer__category {
    display: block;
    min-width: 0;
    max-width: 70%;
    overflow: hidden;
    color: rgba( 255, 255, 255, 0.90 );
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.45 );
}


/* =========================================================
   BOTTOM TITLE
========================================================= */

.portfolio-cover-layer__bottom {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    max-width: 88%;
    padding-block-end: 38px;
    translate: 0 0;
    transition: translate 900ms cubic-bezier(.16, 1, .3, 1);
}


.portfolio-cover-layer__accent {
    display: block;
    width: 3px;
    height: 36px;
    margin-top: 2px;
    border-radius: 999px;
    background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.92 ), var(--cover-accent) );
    box-shadow: 0 0 18px rgba( var(--cover-accent-rgb), 0.34 );
    scale: 1 0.72;
    transform-origin: center bottom;
    transition: scale 900ms cubic-bezier(.16, 1, .3, 1), box-shadow 650ms ease;
}


.portfolio-cover-layer__title {
    display: -webkit-box;
    overflow: hidden;
    color: #ffffff;
    font-size: clamp( 15px, 1.25vw, 19px );
    font-weight: 850;
    line-height: 1.23;
    letter-spacing: -0.025em;
    text-align: start;
    text-shadow: 0 3px 18px rgba( 0, 0, 0, 0.52 );
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* =========================================================
   LANGUAGE DIRECTION
========================================================= */

html[dir="rtl"]
.portfolio-cover-layer__category {
    text-align: left;
}


html[dir="rtl"]
.portfolio-cover-layer__title {
    direction: rtl;
    text-align: right;
    letter-spacing: 0;
}


/* =========================================================
   CATEGORY ACCENT COLORS
========================================================= */

/*
 * Motion Graphics — Copper
 */

.portfolio-cover--motion {
    --cover-accent-rgb: 184, 111, 76;
}


/*
 * Training Videos — Light Gold
 */

.portfolio-cover--training {
    --cover-accent-rgb: 218, 177, 91;
}


/*
 * Website Design — Olive
 */

.portfolio-cover--website {
    --cover-accent-rgb: 139, 151, 91;
}


/*
 * Automation — Blue Gray
 */

.portfolio-cover--automation {
    --cover-accent-rgb: 104, 132, 151;
}


/*
 * 3D Presentation — Dark Brown
 */

.portfolio-cover--3d {
    --cover-accent-rgb: 115, 81, 63;
}


/*
 * Default
 */

.portfolio-cover--default {
    --cover-accent-rgb: 173, 132, 79;
}


/* =========================================================
   CARD HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {




    .portfolio-card:hover
    .portfolio-cover-layer__pattern {
        opacity: 0.39;
        translate: 5px -5px;
    }


    .portfolio-card:hover
    .portfolio-cover-layer::after {
        opacity: 0.36;
        scale: 1;
    }


    .portfolio-card:hover
    .portfolio-cover-layer__bottom {
        translate: 0 -4px;
    }


    .portfolio-card:hover
    .portfolio-cover-layer__accent {
        scale: 1 1;
        box-shadow: 0 0 24px rgba( var(--cover-accent-rgb), 0.48 );
    }
}


/* =========================================================
   VIDEO PREVIEW MODE
========================================================= */

/*
 * هنگام پخش Preview، کاور به‌آرامی مخفی می‌شود
 * و خود ویدئو بالاتر از آن قرار می‌گیرد.
 */

.portfolio-card__media.is-motion-previewing
.portfolio-cover-layer {
    opacity: 0;
    filter: blur(2px);
}


/*
 * Video Preview در سیستم Motion دارای z-index بالاتر است.
 */

.portfolio-card__media.is-motion-previewing
.site-motion-preview-video {
    z-index: 5;
}


.portfolio-card__media.is-motion-previewing
.site-motion-preview-label {
    z-index: 10;
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.portfolio-cover-layer__gradient {
    background: linear-gradient( 180deg, rgba( 2, 3, 4, 0.62 ) 0%, rgba( 2, 3, 4, 0.12 ) 32%, rgba( 2, 3, 4, 0.12 ) 50%, rgba( 2, 3, 4, 0.58 ) 74%, rgba( 2, 3, 4, 0.93 ) 100% ), radial-gradient( circle at 88% 16%, rgba( var(--cover-accent-rgb), 0.19 ), transparent 42% );
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .portfolio-cover-layer {
        padding: 13px;
    }


    .portfolio-cover-layer__number {
        min-width: 36px;
        height: 26px;
        padding-inline: 8px;
        font-size: 9px;
    }


    .portfolio-cover-layer__category {
        max-width: 66%;
        font-size: 8px;
    }


    .portfolio-cover-layer__bottom {
        max-width: 92%;
        gap: 9px;
        padding-block-end: 32px;
    }


    .portfolio-cover-layer__accent {
        height: 31px;
    }


    .portfolio-cover-layer__title {
        font-size: 14px;
    }



}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .portfolio-card__media > img,
    .portfolio-cover-layer,
    .portfolio-cover-layer__pattern,
    .portfolio-cover-layer::after,
    .portfolio-cover-layer__bottom,
    .portfolio-cover-layer__accent {
        transition: none !important;
    }





    .portfolio-card:hover
    .portfolio-cover-layer__pattern {
        translate: 0 0;
    }


    .portfolio-card:hover
    .portfolio-cover-layer__bottom {
        translate: 0 0;
    }
}


/* =========================================================
   PORTFOLIO COVER — MINIMAL VERSION
========================================================= */

/*
 * رنگ Accent روی کل کارت تعریف می‌شود تا هم شماره
 * و هم خط کنار عنوان بتوانند از آن استفاده کنند.
 */

.portfolio-card {
    --cover-accent-rgb: 173, 132, 79;
}


    .portfolio-card[data-cover-accent="motion"] {
        --cover-accent-rgb: 184, 111, 76;
    }


    .portfolio-card[data-cover-accent="training"] {
        --cover-accent-rgb: 218, 177, 91;
    }


    .portfolio-card[data-cover-accent="website"] {
        --cover-accent-rgb: 139, 151, 91;
    }


    .portfolio-card[data-cover-accent="automation"] {
        --cover-accent-rgb: 104, 132, 151;
    }


    .portfolio-card[data-cover-accent="presentation3d"] {
        --cover-accent-rgb: 115, 81, 63;
    }


    .portfolio-card[data-cover-accent="default"] {
        --cover-accent-rgb: 173, 132, 79;
    }


/* =========================================================
   MINIMAL IMAGE COVER
========================================================= */

.portfolio-cover-layer {
    display: block;
    padding: 0;
}


/*
 * Gradient حالا بسیار محدودتر است چون دیگر
 * نیازی به ایجاد زمینه برای عنوان نداریم.
 */

.portfolio-cover-layer__gradient {
    background: linear-gradient( 180deg, rgba( 6, 7, 9, 0.30 ) 0%, rgba( 6, 7, 9, 0.04 ) 36%, rgba( 6, 7, 9, 0.02 ) 68%, rgba( 6, 7, 9, 0.15 ) 100% ), radial-gradient( circle at 86% 12%, rgba( var(--cover-accent-rgb), 0.10 ), transparent 38% );
}


/*
 * Pattern فنی بسیار محوتر از نسخه قبلی
 */

.portfolio-cover-layer__pattern {
    opacity: 0.09;
    background-size: 38px 38px, 38px 38px, 110px 110px;
}


/*
 * نور Accent پایین تصویر تقریباً حذف می‌شود.
 */

.portfolio-cover-layer::after {
    right: -30%;
    bottom: -65%;
    width: 62%;
    opacity: 0.08;
    filter: blur(38px);
}


/* =========================================================
   EDITORIAL NUMBER
========================================================= */

.portfolio-cover-layer__number {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    min-width: 40px;
    height: 29px;
    padding-inline: 10px;
    border-color: rgba( 255, 255, 255, 0.28 );
    background: rgba( 10, 11, 13, 0.34 );
    box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.12 ), 0 8px 20px rgba( 0, 0, 0, 0.12 );
}


html[dir="rtl"]
.portfolio-cover-layer__number {
    right: 14px;
    left: auto;
}


/* =========================================================
   ACCENT LINE BESIDE CARD TITLE
========================================================= */

.portfolio-card__body h3 {
    position: relative;
    padding-inline-start: 15px;
}


    .portfolio-card__body h3::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 0.08em;
        bottom: 0.08em;
        width: 5px;
        border-radius: 999px;
        background: rgb( var(--cover-accent-rgb) );
        box-shadow: 0 0 10px rgba( var(--cover-accent-rgb), 0.18 );
        transform: scaleY(0.86);
        transform-origin: center;
        transition: transform 620ms cubic-bezier(.16, 1, .3, 1), box-shadow 480ms ease;
    }


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .portfolio-card:hover
    .portfolio-cover-layer__pattern {
        opacity: 0.14;
        translate: 3px -3px;
    }


    .portfolio-card:hover
    .portfolio-cover-layer::after {
        opacity: 0.12;
    }


    .portfolio-card:hover
    .portfolio-card__body h3::before {
        transform: scaleY(1);
        box-shadow: 0 0 14px rgba( var(--cover-accent-rgb), 0.28 );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .portfolio-cover-layer__number {
        top: 11px;
        left: 11px;
        min-width: 36px;
        height: 26px;
        padding-inline: 8px;
        font-size: 9px;
    }


    html[dir="rtl"]
    .portfolio-cover-layer__number {
        right: 11px;
        left: auto;
    }


    .portfolio-card__body h3 {
        padding-inline-start: 12px;
    }


        .portfolio-card__body h3::before {
            width: 2px;
        }
}


/* =========================================================
   PORTFOLIO COVER — CLEAN MINIMAL VERSION
========================================================= */

/*
 * روی تصویر فقط شماره Editorial باقی می‌ماند.
 */

.portfolio-cover-layer {
    background: transparent !important;
    filter: none !important;
}


.portfolio-cover-layer__gradient,
.portfolio-cover-layer__pattern {
    display: none !important;
}


.portfolio-cover-layer::after {
    content: none !important;
    display: none !important;
}


/*
 * جلوگیری از تغییر رنگ یا تیرگی تصویر هنگام Hover
 */

.portfolio-card:hover
.portfolio-cover-layer {
    filter: none !important;
}

/* =========================================================
   VIDEO PREVIEW LABEL — BOTTOM POSITION
========================================================= */

.site-motion-preview-label {
    top: auto !important;
    right: 13px !important;
    bottom: 13px !important;
    left: auto !important;
}


html[dir="rtl"]
.site-motion-preview-label {
    right: 13px !important;
    left: auto !important;
}


.portfolio-card__body h3 {
    position: relative;
    padding-inline-start: 17px;
}

@media (max-width: 760px) {

    .portfolio-card__body h3 {
        padding-inline-start: 14px;
    }


        .portfolio-card__body h3::before {
            width: 4px;
        }


    .site-motion-preview-label {
        right: 10px !important;
        bottom: 10px !important;
    }
}



/* =========================================================
   COMPANY MARQUEE — PREMIUM REDESIGN / STAGE 1
========================================================= */

.company-marquee-card {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    height: 118px !important;
    margin-top: 8px !important;
    margin-bottom: 30px !important;
    display: grid !important;
    grid-template-columns: 205px minmax(0, 1fr) !important;
    align-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba( 176, 133, 58, 0.26 ) !important;
    border-radius: 30px !important;
    background: radial-gradient( circle at 11% 8%, rgba( 223, 186, 105, 0.20 ), transparent 32% ), linear-gradient( 135deg, rgba( 250, 247, 239, 0.97 ), rgba( 241, 236, 224, 0.88 ) ) !important;
    box-shadow: 0 18px 44px rgba( 62, 44, 20, 0.10 ), inset 0 1px 0 rgba( 255, 255, 255, 0.82 ) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
    backdrop-filter: blur(20px) saturate(1.08) !important;
}


    /*
 * نور محیطی بسیار محدود در کل نوار
 */

    .company-marquee-card::before {
        content: "";
        position: absolute;
        top: -75%;
        right: 12%;
        z-index: -1;
        width: 42%;
        aspect-ratio: 1;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0.42;
        background: radial-gradient( circle, rgba( 219, 178, 89, 0.18 ), transparent 68% );
        filter: blur(30px);
    }


/* =========================================================
   LEFT INFORMATION PANEL
========================================================= */

.company-marquee-header {
    position: relative !important;
    z-index: 5 !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 22px 0 32px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    border-right: none !important;
    border-inline-end: 1px solid rgba( 128, 94, 39, 0.20 ) !important;
    background: linear-gradient( 135deg, rgba( 225, 204, 155, 0.42 ), rgba( 255, 252, 243, 0.18 ) ) !important;
}


    /*
 * خط هویت طلایی پنل سمت چپ
 */

    .company-marquee-header::before {
        content: "";
        position: absolute;
        inset-inline-start: 17px;
        top: 28px;
        bottom: 28px;
        width: 4px;
        border-radius: 999px;
        background: #b88b3d;
        box-shadow: 0 0 14px rgba( 184, 139, 61, 0.20 );
    }


    .company-marquee-header span {
        margin: 0 0 7px !important;
        color: #8b6628 !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        letter-spacing: 1.65px !important;
        text-transform: uppercase !important;
    }


    .company-marquee-header strong {
        max-width: 155px !important;
        color: #33271e !important;
        font-size: 19px !important;
        font-weight: 900 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.45px !important;
    }


/* =========================================================
   MARQUEE VIEWPORT
========================================================= */

.company-marquee-mask {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
}


    /*
 * Fade نرم لبه‌ها
 * در مرحله‌های بعد دقیق‌تر می‌شود.
 */

    .company-marquee-mask::before,
    .company-marquee-mask::after {
        width: 58px !important;
        z-index: 8 !important;
    }


    .company-marquee-mask::before {
        background: linear-gradient( 90deg, rgba( 244, 239, 226, 0.96 ), rgba( 244, 239, 226, 0 ) ) !important;
    }


    .company-marquee-mask::after {
        background: linear-gradient( 270deg, rgba( 244, 239, 226, 0.96 ), rgba( 244, 239, 226, 0 ) ) !important;
    }


/* =========================================================
   MOVING GROUP
========================================================= */

.company-marquee-group {
    gap: 16px !important;
    padding-right: 16px !important;
}


/* =========================================================
   PREMIUM LOGO CARDS
========================================================= */

.company-logo-item {
    position: relative !important;
    isolation: isolate !important;
    min-width: 220px !important;
    height: 72px !important;
    padding: 9px 18px 9px 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba( 117, 91, 52, 0.18 ) !important;
    border-radius: 22px !important;
    background: rgba( 255, 253, 248, 0.78 ) !important;
    box-shadow: 0 9px 22px rgba( 52, 39, 23, 0.10 ), inset 0 1px 0 rgba( 255, 255, 255, 0.92 ) !important;
    transform: translateY(0) scale(1) !important;
    transition: transform 520ms cubic-bezier(.16, 1, .3, 1), border-color 420ms ease, background 420ms ease, box-shadow 520ms ease !important;
}


    /*
 * Highlight بسیار ظریف بالای کارت
 */

    .company-logo-item::before {
        content: "";
        position: absolute;
        top: 0;
        right: 18px;
        left: 18px;
        z-index: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba( 255, 255, 255, 0.95 ), transparent );
        pointer-events: none;
    }


    /*
 * نور خیلی محدود پشت لوگو
 */

    .company-logo-item::after {
        content: "";
        position: absolute;
        inset-inline-start: -24px;
        top: 50%;
        z-index: 0;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        opacity: 0.12;
        background: radial-gradient( circle, rgba( 193, 148, 66, 0.65 ), transparent 70% );
        filter: blur(12px);
        translate: 0 -50%;
        pointer-events: none;
        transition: opacity 420ms ease, scale 520ms cubic-bezier(.16, 1, .3, 1);
    }


    /* =========================================================
   LOGO
========================================================= */

    .company-logo-item img {
        position: relative !important;
        z-index: 2 !important;
        flex: 0 0 auto !important;
        width: 56px !important;
        height: 52px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        object-fit: contain !important;
        object-position: center !important;
        opacity: 0.92 !important;
        filter: saturate(0.88) contrast(1.02) !important;
        transform: scale(1) !important;
        transition: transform 520ms cubic-bezier(.16, 1, .3, 1), filter 420ms ease, opacity 420ms ease !important;
    }


.company-logo-fallback {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
    font-size: 15px !important;
}


/* =========================================================
   COMPANY NAME
========================================================= */

.company-logo-item strong {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #172337 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14.5px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.15px !important;
}


/* =========================================================
   SIMPLE HOVER — STAGE 1
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .company-logo-item:hover {
        transform: translateY(-3px) scale(1.012) !important;
        border-color: rgba( 185, 138, 54, 0.38 ) !important;
        background: rgba( 255, 252, 243, 0.96 ) !important;
        box-shadow: 0 15px 30px rgba( 58, 40, 17, 0.14 ), 0 0 0 3px rgba( 192, 145, 58, 0.055 ), inset 0 1px 0 rgba( 255, 255, 255, 0.96 ) !important;
    }


        .company-logo-item:hover::after {
            opacity: 0.20;
            scale: 1.12;
        }


        .company-logo-item:hover img {
            opacity: 1 !important;
            filter: saturate(1.04) contrast(1.035) !important;
            transform: scale(1.045) !important;
        }
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.company-marquee-card {
    border-color: rgba( 208, 164, 83, 0.20 ) !important;
    background: radial-gradient( circle at 10% 8%, rgba( 199, 149, 65, 0.11 ), transparent 34% ), linear-gradient( 135deg, rgba( 19, 20, 24, 0.97 ), rgba( 29, 26, 22, 0.94 ) ) !important;
    box-shadow: 0 20px 48px rgba( 0, 0, 0, 0.32 ), inset 0 1px 0 rgba( 255, 255, 255, 0.045 ) !important;
}


html[data-theme="dark"]
.company-marquee-header {
    border-inline-end-color: rgba( 213, 168, 84, 0.16 ) !important;
    background: linear-gradient( 135deg, rgba( 178, 129, 51, 0.12 ), rgba( 255, 255, 255, 0.018 ) ) !important;
}


    html[data-theme="dark"]
    .company-marquee-header span {
        color: #d8ad61 !important;
    }


    html[data-theme="dark"]
    .company-marquee-header strong {
        color: #f8f1e4 !important;
    }


html[data-theme="dark"]
.company-marquee-mask::before {
    background: linear-gradient( 90deg, rgba( 25, 24, 23, 0.98 ), transparent ) !important;
}


html[data-theme="dark"]
.company-marquee-mask::after {
    background: linear-gradient( 270deg, rgba( 25, 24, 23, 0.98 ), transparent ) !important;
}


html[data-theme="dark"]
.company-logo-item {
    border-color: rgba( 214, 171, 91, 0.14 ) !important;
    background: rgba( 255, 255, 255, 0.05 ) !important;
    box-shadow: 0 10px 25px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 255, 255, 255, 0.045 ) !important;
}


    html[data-theme="dark"]
    .company-logo-item strong {
        color: #f4eee4 !important;
    }


    html[data-theme="dark"]
    .company-logo-item img {
        padding: 4px !important;
        border-radius: 11px !important;
        background: rgba( 255, 252, 245, 0.92 ) !important;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .company-marquee-card {
        top: -22px !important;
        height: 126px !important;
        margin-top: 8px !important;
        margin-bottom: 28px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 42px 84px !important;
        border-radius: 26px !important;
    }


    .company-marquee-header {
        height: 42px !important;
        padding: 0 18px 0 50px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border-inline-end: none !important;
        border-bottom: 1px solid rgba( 144, 106, 44, 0.17 ) !important;
    }


        .company-marquee-header::before {
            inset-inline-start: 18px;
            top: 50%;
            bottom: auto;
            width: 24px;
            height: 3px;
            translate: 0 -50%;
        }


        .company-marquee-header span {
            display: none !important;
        }


        .company-marquee-header strong {
            max-width: none !important;
            font-size: 15px !important;
        }


    .company-marquee-mask {
        height: 84px !important;
    }


    .company-logo-item {
        min-width: 195px !important;
        height: 64px !important;
    }


        .company-logo-item img {
            width: 48px !important;
            height: 46px !important;
        }


        .company-logo-item strong {
            font-size: 13.5px !important;
        }
}


@media (max-width: 720px) {

    .company-marquee-card {
        top: -16px !important;
        height: 118px !important;
        margin-top: 2px !important;
        margin-bottom: 36px !important;
        grid-template-rows: 38px 80px !important;
        border-radius: 23px !important;
    }


    .company-marquee-header {
        height: 38px !important;
        padding-inline-start: 46px !important;
    }


        .company-marquee-header::before {
            inset-inline-start: 15px;
            width: 22px;
        }


    .company-logo-item {
        min-width: 184px !important;
        height: 60px !important;
        padding: 7px 14px 7px 10px !important;
        gap: 11px !important;
        border-radius: 18px !important;
    }


        .company-logo-item img {
            width: 44px !important;
            height: 42px !important;
        }


        .company-logo-item strong {
            font-size: 13px !important;
        }


    .company-marquee-mask::before,
    .company-marquee-mask::after {
        width: 34px !important;
    }
}


/* =========================================================
   COMPANY MARQUEE — RTL AND HIGHLIGHT FIX
========================================================= */

/* =========================================================
   SAME HEADER BACKGROUND IN ENGLISH AND PERSIAN
========================================================= */

.company-marquee-header,
html[dir="ltr"] .company-marquee-header,
html[dir="rtl"] .company-marquee-header {
    background: linear-gradient( 135deg, rgba( 225, 204, 155, 0.42 ), rgba( 255, 252, 243, 0.18 ) ) !important;
}


/* =========================================================
   LOGICAL PADDING
========================================================= */

.company-marquee-header {
    padding: 0 !important;
    padding-inline-start: 34px !important;
    padding-inline-end: 22px !important;
    text-align: start !important;
}


/*
 * در نسخه فارسی خط در سمت راست قرار می‌گیرد.
 * فاصله نوشته با خط نیز بیشتر می‌شود.
 */

html[dir="rtl"]
.company-marquee-header {
    padding-inline-start: 44px !important;
    padding-inline-end: 20px !important;
    align-items: flex-start !important;
    text-align: right !important;
}


/*
 * موقعیت خط با جهت صفحه هماهنگ می‌شود.
 */

.company-marquee-header::before {
    inset-inline-start: 17px !important;
    inset-inline-end: auto !important;
}


html[dir="rtl"]
.company-marquee-header::before {
    inset-inline-start: 17px !important;
    inset-inline-end: auto !important;
}


/*
 * متن‌های پنل در فارسی راست‌چین می‌شوند.
 */

html[dir="rtl"]
.company-marquee-header span,
html[dir="rtl"]
.company-marquee-header strong {
    width: 100% !important;
    text-align: right !important;
}


/* =========================================================
   DARK MODE HEADER
========================================================= */

html[data-theme="dark"]
.company-marquee-header,
html[data-theme="dark"][dir="ltr"]
.company-marquee-header,
html[data-theme="dark"][dir="rtl"]
.company-marquee-header {
    background: linear-gradient( 135deg, rgba( 178, 129, 51, 0.12 ), rgba( 255, 255, 255, 0.018 ) ) !important;
}


/* =========================================================
   GOLD TOP HIGHLIGHT FOR BRAND CARDS
========================================================= */

/*
 * خط سفید بالای کارت به Highlight طلایی تبدیل می‌شود.
 */

.company-logo-item::before {
    top: 0 !important;
    right: 18px !important;
    left: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient( 90deg, transparent 0%, rgba( 180, 132, 51, 0.18 ) 16%, rgba( 190, 143, 58, 0.76 ) 50%, rgba( 180, 132, 51, 0.18 ) 84%, transparent 100% ) !important;
    box-shadow: 0 1px 8px rgba( 184, 137, 52, 0.16 ) !important;
}


/*
 * Highlight سفید داخل Shadow کارت نیز حذف می‌شود.
 */

.company-logo-item {
    box-shadow: 0 9px 22px rgba( 52, 39, 23, 0.10 ), inset 0 1px 0 rgba( 187, 139, 54, 0.28 ) !important;
}


@media (hover: hover) and (pointer: fine) {

    .company-logo-item:hover {
        box-shadow: 0 15px 30px rgba( 58, 40, 17, 0.14 ), 0 0 0 3px rgba( 192, 145, 58, 0.055 ), inset 0 1px 0 rgba( 198, 151, 64, 0.42 ) !important;
    }


        .company-logo-item:hover::before {
            background: linear-gradient( 90deg, transparent 0%, rgba( 193, 146, 58, 0.25 ) 15%, rgba( 213, 168, 78, 0.95 ) 50%, rgba( 193, 146, 58, 0.25 ) 85%, transparent 100% ) !important;
            box-shadow: 0 1px 11px rgba( 204, 157, 65, 0.26 ) !important;
        }
}


/* =========================================================
   DARK MODE BRAND HIGHLIGHT
========================================================= */

html[data-theme="dark"]
.company-logo-item {
    box-shadow: 0 10px 25px rgba( 0, 0, 0, 0.28 ), inset 0 1px 0 rgba( 213, 168, 84, 0.20 ) !important;
}


    html[data-theme="dark"]
    .company-logo-item::before {
        background: linear-gradient( 90deg, transparent, rgba( 218, 175, 92, 0.78 ), transparent ) !important;
        box-shadow: 0 1px 9px rgba( 218, 175, 92, 0.20 ) !important;
    }


/* =========================================================
   TABLET / MOBILE RTL FIX
========================================================= */

@media (max-width: 1100px) {

    .company-marquee-header {
        padding: 0 !important;
        padding-inline-start: 50px !important;
        padding-inline-end: 18px !important;
        text-align: start !important;
    }


    html[dir="rtl"]
    .company-marquee-header {
        padding-inline-start: 50px !important;
        padding-inline-end: 18px !important;
        text-align: right !important;
    }


        html[dir="rtl"]
        .company-marquee-header strong {
            text-align: right !important;
            margin-top:14px;
        }


        .company-marquee-header::before,
        html[dir="rtl"]
        .company-marquee-header::before {
            inset-inline-start: 18px !important;
            inset-inline-end: auto !important;
        }
}


@media (max-width: 620px) {

    .company-marquee-header,
    html[dir="rtl"]
    .company-marquee-header {
        padding-inline-start: 46px !important;
        padding-inline-end: 15px !important;
    }


        .company-marquee-header::before,
        html[dir="rtl"]
        .company-marquee-header::before {
            inset-inline-start: 15px !important;
            inset-inline-end: auto !important;
        }
}


/* =========================================================
   COMPANY MARQUEE — PROFESSIONAL EDGE FADE / STAGE 2
========================================================= */

.company-marquee-mask {
    --company-marquee-fade-size: 82px;
    /*
     * خود لوگوها به‌تدریج شفاف می‌شوند؛
     * بنابراین Fade با Light و Dark Mode هماهنگ می‌ماند.
     */
    -webkit-mask-image: linear-gradient( 90deg, transparent 0, rgba( 0, 0, 0, 0.18 ) 18px, #000 var(--company-marquee-fade-size), #000 calc( 100% - var(--company-marquee-fade-size) ), rgba( 0, 0, 0, 0.18 ) calc( 100% - 18px ), transparent 100% ) !important;
    mask-image: linear-gradient( 90deg, transparent 0, rgba( 0, 0, 0, 0.18 ) 18px, #000 var(--company-marquee-fade-size), #000 calc( 100% - var(--company-marquee-fade-size) ), rgba( 0, 0, 0, 0.18 ) calc( 100% - 18px ), transparent 100% ) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    /*
     * یک عمق بسیار محدود در لبه‌های نوار
     */
    box-shadow: inset 24px 0 30px -32px rgba( 175, 128, 47, 0.32 ), inset -24px 0 30px -32px rgba( 175, 128, 47, 0.32 ) !important;
}


    /*
 * Fadeهای رنگی قدیمی غیرفعال می‌شوند.
 * Mask جدید جایگزین آن‌هاست.
 */

    .company-marquee-mask::before,
    .company-marquee-mask::after {
        content: none !important;
        display: none !important;
    }


/* =========================================================
   TRACK EDGE SPACING
========================================================= */

.company-marquee-track {
    padding-block: 9px !important;
}


/*
 * جلوگیری از برخورد اولین و آخرین کارت با لبه Fade
 */

.company-marquee-group {
    padding-inline-start: 8px !important;
    padding-inline-end: 8px !important;
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.company-marquee-mask {
    box-shadow: inset 24px 0 32px -32px rgba( 213, 168, 84, 0.19 ), inset -24px 0 32px -32px rgba( 213, 168, 84, 0.19 ) !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .company-marquee-mask {
        --company-marquee-fade-size: 60px;
    }


    .company-marquee-track {
        padding-block: 7px !important;
    }
}


@media (max-width: 620px) {

    .company-marquee-mask {
        --company-marquee-fade-size: 38px;
        box-shadow: inset 14px 0 22px -24px rgba( 175, 128, 47, 0.25 ), inset -14px 0 22px -24px rgba( 175, 128, 47, 0.25 ) !important;
    }


    .company-marquee-group {
        padding-inline-start: 4px !important;
        padding-inline-end: 4px !important;
    }
}















/* =========================================================
   COMPANY MARQUEE — HOVER DESCRIPTION AND CENTER FOCUS
========================================================= */

/*
 * حرکت CSS غیرفعال می‌شود؛
 * حرکت دقیق توسط JavaScript کنترل خواهد شد.
 */

.company-marquee-track {
    animation: none !important;
    will-change: transform !important;
}


/*
 * قانون توقف قدیمی CSS دیگر لازم نیست.
 */

.company-marquee-card:hover
.company-marquee-track {
    animation-play-state: running !important;
}


/* =========================================================
   CENTER SCALE
========================================================= */

.company-logo-item {
    --company-center-scale: 1;
    scale: var( --company-center-scale ) !important;
    transform-origin: center !important;
    transition: scale 160ms linear, transform 420ms cubic-bezier(.16, 1, .3, 1), border-color 360ms ease, box-shadow 420ms ease, background 360ms ease !important;
    will-change: scale, transform !important;
}


/* =========================================================
   BRAND TEXT WRAPPER
========================================================= */

.company-brand-copy {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
}


html[dir="rtl"]
.company-brand-copy {
    align-items: flex-end !important;
    text-align: right !important;
}


.company-brand-copy
.company-brand-name {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   LANGUAGE VISIBILITY
========================================================= */

.company-brand-name--fa,
.company-brand-description--fa {
    display: none !important;
}


html[dir="rtl"]
.company-brand-name--en,
html[dir="rtl"]
.company-brand-description--en {
    display: none !important;
}


html[dir="rtl"]
.company-brand-name--fa {
    display: block !important;
}


html[dir="rtl"]
.company-brand-description--fa {
    display: block !important;
}


/* =========================================================
   HOVER DESCRIPTION
========================================================= */

.company-brand-description {
    width: 100%;
    max-width: 150px;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    color: #946a29;
    opacity: 0;
    transform: translateY(5px);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.055em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    transition: max-height 420ms cubic-bezier(.16, 1, .3, 1), margin-top 420ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}


.company-brand-description--en {
    display: block !important;
}


.company-brand-description--fa {
    letter-spacing: 0;
    text-transform: none;
}


html[dir="rtl"]
.company-brand-description--en {
    display: none !important;
}


@media (hover: hover) and (pointer: fine) {

    .company-logo-item:hover
    .company-brand-description {
        max-height: 16px;
        margin-top: 3px;
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.company-brand-description {
    color: #d8ae65;
}