/* Home page LMS / LXP: two mirrored platform sections (views/site/_ft-section.php) joined by the integration
   cable (_ft-bridge.php). LMS is coral, LXP deep green, like the featured projects on the about page.
   LMS: header text start, rail start, stage end. LXP (.ft2--mirror): everything swaps sides. */

/* numbers and Latin marks in the site's own fonts (Persian digits in IranYekan, Latin in Montserrat) */
.ft-num { font-family: IranYekanFaNum-ExtraBold, sans-serif; font-weight: 400; }
html[dir="ltr"] .ft-num { font-family: MontserratLtr, sans-serif; font-weight: 800; }
.ft-latin { font-family: MontserratLtr, sans-serif; font-weight: 800; }

.ft2 {
    --ft-accent: #EE5D38;
    --ft-accent-shadow: rgba(238, 93, 56, .35);
    --ft-accent-soft: #FFF1EC;
    position: relative;
    z-index: 2;
    margin-top: 150px;
    overflow-x: clip;
}
.ft2--lxp {
    --ft-accent: #12807C;
    --ft-accent-shadow: rgba(18, 128, 124, .35);
    --ft-accent-soft: #E3F4F2;
}
.ft2__frame {
    position: relative;
    isolation: isolate;
    padding: 40px;
    border-radius: 36px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 -18px 50px -30px rgba(17, 14, 45, .5), 0 34px 70px -34px rgba(17, 14, 45, .7);
}
.ft2--lms .ft2__frame { background: radial-gradient(70% 90% at 12% 8%, #FF9A6B, transparent 70%), linear-gradient(150deg, #EE5D38, #B93A18); }
.ft2--lxp .ft2__frame { background: radial-gradient(70% 90% at 88% 92%, #1F7A78, transparent 70%), linear-gradient(150deg, #06262E, #0C4145); }
html[dir="ltr"] .ft2--lms .ft2__frame { background: radial-gradient(70% 90% at 88% 8%, #FF9A6B, transparent 70%), linear-gradient(210deg, #EE5D38, #B93A18); }
html[dir="ltr"] .ft2--lxp .ft2__frame { background: radial-gradient(70% 90% at 12% 92%, #1F7A78, transparent 70%), linear-gradient(210deg, #06262E, #0C4145); }
/* fine grid over the colour */
.ft2__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent);
    mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent);
}
.ft2__spine { display: none; }
/* the big outlined letters behind the header */
.ft2__ghost {
    position: absolute;
    z-index: -1;
    top: -30px;
    inset-inline-end: 20px;
    font-size: clamp(110px, 16vw, 230px);
    line-height: 1;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .5);
    opacity: .35;
    pointer-events: none;
    user-select: none;
    direction: ltr;
}
/* (the letters run left to right, so their side is set physically: opposite the title) */
html[dir="rtl"] .ft2__ghost { left: 20px; right: auto; }
html[dir="rtl"] .ft2--mirror .ft2__ghost { right: 20px; left: auto; }
html[dir="ltr"] .ft2__ghost { right: 20px; left: auto; }
html[dir="ltr"] .ft2--mirror .ft2__ghost { left: 20px; right: auto; }

/* --- header --- */
.ft2__head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}
.ft2--mirror .ft2__head { flex-direction: row-reverse; }
.ft2__intro { max-width: 600px; }
.ft2--mirror .ft2__intro { text-align: end; }
.ft2__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .14);
}
html[dir="rtl"] .ft2__eyebrow { padding: 6px 6px 6px 14px; }
.ft2__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
}
.ft2__icon svg { width: 20px; height: 20px; }
.ft2__icon svg, .ft2__icon svg [stroke] { stroke: var(--ft-accent); }
.ft2__icon svg [fill]:not([fill="none"]) { fill: var(--ft-accent); }
.ft2__num { color: #fff; font-size: 15px; line-height: 1; }
.ft2__view { color: rgba(255, 255, 255, .85); font-size: 12px; }
.ft2__title { margin: 16px 0 8px; color: #fff !important; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.32; }
.ft2__lead { margin: 0; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 2.05; }
.ft2__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 11px 20px;
    border-radius: 15px;
    background: #fff;
    color: #110E2D;
    font-size: 13px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ft2__more:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); }
.ft2__more svg { color: var(--ft-accent); }
.ft2__controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ft2__controls .ft-btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: #fff; }
.ft2__controls .ft-btn:hover { background: #fff; border-color: #fff; color: var(--ft-accent); }
.ft2__counter { min-width: 66px; text-align: center; color: #fff; font-size: 15px; opacity: .9; }

/* --- body: rail · text · stage (mirrored: stage · text · rail) --- */
.ft2__body {
    position: relative;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "panel" "stage";
    align-items: start;
}
.ft2__rail { grid-area: rail; }
.ft2__panels { grid-area: panel; }
.ft2__stage { grid-area: stage; }
@media (min-width: 768px) {
    .ft2__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "rail rail" "panel stage"; }
    .ft2--mirror .ft2__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "rail rail" "stage panel"; }
    .ft2__stage { position: sticky; top: 110px; }
}
@media (min-width: 1200px) {
    .ft2__body { grid-template-columns: 250px minmax(0, 1fr) 330px; grid-template-areas: "rail panel stage"; gap: 26px; }
    .ft2--mirror .ft2__body { grid-template-columns: 330px minmax(0, 1fr) 250px; grid-template-areas: "stage panel rail"; }
}

/* --- the rail of topics: a column on wide screens, a scrolling row below --- */
.ft2__rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2px;
    margin: -2px;
}
.ft2__rail::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) {
    .ft2__rail { flex-direction: column; overflow: visible; }
}
.ft2-tab {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 200px;
    max-width: 260px;
    padding: 11px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    scroll-snap-align: start;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
@media (min-width: 1200px) {
    .ft2-tab { min-width: 0; max-width: none; border-color: transparent; background: transparent; }
}
.ft2-tab__num { width: 22px; color: #fff; opacity: .55; font-size: 13px; line-height: 1; transition: color .3s ease, opacity .3s ease; }
.ft2-tab__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    transition: background-color .3s ease;
}
.ft2-tab__ico svg { width: 18px; height: 18px; }
.ft2-tab__ico svg [stroke], .ft2-tab__ico svg[stroke] { stroke: #fff; transition: stroke .3s ease; }
.ft2-tab__title { margin: 0; color: #fff; opacity: .78; font-size: 12.5px; line-height: 1.6; transition: color .3s ease, opacity .3s ease; }
.ft2-tab__bar {
    position: absolute;
    inset-inline: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: rgba(17, 14, 45, .08);
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s ease;
}
.ft2-tab__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ft-accent); }
.ft2-tab:hover { background: rgba(255, 255, 255, .12); }
.ft2-tab:hover .ft2-tab__title { opacity: 1; }
.ft2-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ft2-tab.is-active { background: #fff; border-color: #fff; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .45); }
.ft2-tab.is-active .ft2-tab__num { color: var(--ft-accent); opacity: 1; }
.ft2-tab.is-active .ft2-tab__title { color: #110E2D; opacity: 1; }
.ft2-tab.is-active .ft2-tab__ico { background: var(--ft-accent); }
.ft2-tab.is-active .ft2-tab__bar { opacity: 1; }
.ft-stopped .ft2-tab__bar { opacity: 0 !important; }
/* the open topic points at its text */
@media (min-width: 1200px) {
    .ft2-tab.is-active::after {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-end: -6px;
        width: 13px;
        height: 13px;
        border-radius: 3px;
        background: #fff;
        transform: translateY(-50%) rotate(45deg);
    }
    .ft2--mirror .ft2-tab.is-active::after { inset-inline-end: auto; inset-inline-start: -6px; }
}

/* --- the open topic's text --- */
.ft2-panel__card {
    padding: 26px 28px;
    border-radius: 24px;
    background: #fff;
    color: #110E2D;
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55);
}
@media (min-width: 1200px) {
    .ft2-panel__card { min-height: 300px; }
}
.ft2-panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ft2-panel__count { padding: 5px 11px; border-radius: 20px; background: var(--ft-accent-soft); color: var(--ft-accent); font-size: 13px; line-height: 1; }
.ft2-panel__title { color: #110E2D; font-size: 16px; line-height: 1.6; }
.ft2--lxp .editor-section2 ul li::before, .ft2--lxp .editor-section2 ul li::marker { color: var(--ft-accent); }

/* the stage keeps its own caption off: the header says whose view it is */
.ft2 .ft-stage__cap { display: none; }
.ft2 .ft-stage { max-width: 330px; }
.ft2 .ft-stage__map { box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .6); }

@media (max-width: 991px) {
    .ft2__head { flex-direction: column; align-items: stretch; }
    .ft2--mirror .ft2__head { flex-direction: column; }
    .ft2--mirror .ft2__intro { text-align: start; }
    .ft2__controls { justify-content: flex-start; }
}
@media (max-width: 575px) {
    .ft2 { margin-top: 110px; }
    .ft2__frame { padding: 24px 16px; border-radius: 28px; }
    .ft2__lead { font-size: 13px; }
    .ft2__controls .ft-label-pause, .ft2__controls .ft-label-play { display: none !important; }
    .ft2__controls .ft-toggle { width: 38px; padding: 0; justify-content: center; }
    .ft2-tab { min-width: 180px; }
    .ft2-panel__card { padding: 20px 18px; }
}

/* ===== the integration cable between the two sections ===== */
.ft-bridge {
    position: relative;
    height: 260px;
    margin: -6px 0;
    z-index: 3;
}
/* the cable joins the two frames, so the LXP section starts right after it */
.ft2.ft2--lxp { margin-top: 0; }
.ft-bridge__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ft-bridge__cable { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html[dir="rtl"] .ft-bridge__cable--wide { transform: none; }
html[dir="ltr"] .ft-bridge__cable--wide { transform: scaleX(-1); }
.ft-bridge__cable--tall { display: none; }
.ft-bridge__glow { fill: none; stroke: url(#ftCable); stroke-width: 26; stroke-linecap: round; opacity: .14; vector-effect: non-scaling-stroke; }
.ft-bridge__lane {
    fill: none;
    stroke: url(#ftCable);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 2 9;
    vector-effect: non-scaling-stroke;
    animation: ftLaneDown 1.2s linear infinite;
}
.ft-bridge__lane[data-lane="up"] { animation-name: ftLaneUp; opacity: .7; }
@keyframes ftLaneDown { to { stroke-dashoffset: -22; } }
@keyframes ftLaneUp { to { stroke-dashoffset: 22; } }
/* where the cable plugs into each frame */
.ft-bridge__port {
    position: absolute;
    width: 46px;
    height: 18px;
    margin-inline-start: -23px;
    border-radius: 0 0 14px 14px;
    background: #B93A18;
    box-shadow: 0 6px 16px -6px rgba(185, 58, 24, .8);
}
.ft-bridge__port::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
    animation: ftPort 1.6s ease-in-out infinite;
}
.ft-bridge__port--lms { top: 0; inset-inline-end: 17%; margin-inline-start: 0; margin-inline-end: -23px; }
.ft-bridge__port--lxp { bottom: 0; inset-inline-start: 17%; border-radius: 14px 14px 0 0; background: #0C4145; box-shadow: 0 -6px 16px -6px rgba(12, 65, 69, .8); }
@keyframes ftPort { 50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
/* the two ends' captions */
.ft-bridge__end {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 30px -14px rgba(17, 14, 45, .45);
    white-space: nowrap;
}
.ft-bridge__end b { font-family: MontserratLtr, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .04em; }
.ft-bridge__end span { color: #110E2D; font-size: 13px; }
.ft-bridge__end--lms { top: 26px; inset-inline-end: calc(17% + 44px); }
.ft-bridge__end--lms b { color: #EE5D38; }
.ft-bridge__end--lxp { bottom: 26px; inset-inline-start: calc(17% + 44px); }
.ft-bridge__end--lxp b { color: #12807C; }
/* the core in the middle */
.ft-bridge__core {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -50%);
}
.ft-bridge__core-in {
    position: relative;
    display: grid;
    place-items: center;
    gap: 2px;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #110E2D;
    color: #fff;
    box-shadow: 0 20px 40px -14px rgba(17, 14, 45, .7), inset 0 0 0 6px rgba(255, 255, 255, .06);
    text-align: center;
}
.ft-bridge__core-in svg { margin-top: 10px; color: #FFB199; }
.ft-bridge__core-in strong { margin-bottom: 14px; font-size: 13px; line-height: 1.2; }
.ft-bridge__ring {
    position: absolute;
    left: 50%;
    top: 52px;
    width: 128px;
    height: 128px;
    margin: -64px;
    border-radius: 50%;
    background: conic-gradient(#EE5D38 0 25%, transparent 25% 50%, #12807C 50% 75%, transparent 75%);
    -webkit-mask: radial-gradient(circle, transparent 60px, #000 61px);
    mask: radial-gradient(circle, transparent 60px, #000 61px);
    animation: ftRing 6s linear infinite;
}
@keyframes ftRing { to { transform: rotate(360deg); } }
.ft-bridge__core small { padding: 3px 10px; border-radius: 20px; background: #fff; color: #110E2D; font-size: 11px; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(17, 14, 45, .4); }
/* data chips riding the lanes (placed by feature-tabs.js) */
.ft-bridge__chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ft-bridge__core, .ft-bridge__end { z-index: 2; }
.ft-chip {
    position: absolute;
    left: 0;
    top: 0;
    padding: 4px 10px 4px 10px;
    border-radius: 20px;
    background: #fff;
    color: #110E2D;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 6px 16px -6px rgba(17, 14, 45, .4);
    transform: translate(-50%, -50%);
    opacity: 0;
    will-change: left, top;
}
.ft-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 6px; border-radius: 50%; vertical-align: middle; }
.ft-chip--down::before { background: #EE5D38; }
.ft-chip--up::before { background: #12807C; }
.ft-bridge.is-ready .ft-chip { opacity: 1; transition: opacity .3s; }

@media (max-width: 767px) {
    .ft-bridge { height: 400px; }
    .ft-bridge__cable--wide { display: none; }
    .ft-bridge__cable--tall { display: block; }
    .ft-bridge__cable--tall path { stroke: url(#ftCableTall); }
    .ft-bridge__port--lms, .ft-bridge__port--lxp { inset-inline: auto; left: 50%; margin: 0 0 0 -23px; }
    .ft-bridge__end { left: 50%; transform: translateX(-50%); }
    .ft-bridge__end--lms { top: 34px; inset-inline-end: auto; }
    .ft-bridge__end--lxp { bottom: 34px; inset-inline-start: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .ft2 *, .ft-bridge * { transition: none !important; animation: none !important; }
}