/* Home page LMS / LXP: the campus map (LMS), the learner's path (LXP) and the bridge between them.
   Markup: views/site/_ft-campus.php, _ft-path.php, _ft-bridge.php; behaviour: assets/js/feature-tabs.js */

/* --- layout: text panels beside the stage; the LXP section mirrors it --- */
.ft-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: center;
}
@media (min-width: 768px) {
    .ft-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 30px; }
    .ft-split--mirror { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .ft-split--mirror .ft-stage { order: -1; }
}
/* the text no longer follows the pointer (the stage does) */
[data-ft-stage-section] .services2Content > :last-child { transform: none; transition: none; }

/* --- the stage --- */
.ft-stage {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    transform: translate(var(--ft-px, 0px), var(--ft-py, 0px));
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.ft-stage__map {
    position: relative;
    aspect-ratio: 360 / 320;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(17, 14, 45, .08), inset 0 0 0 1px rgba(17, 14, 45, .04);
}
.ft-stage__map > svg { display: block; width: 100%; height: 100%; border-radius: inherit; }
.ft-stage__layer { position: absolute; inset: 0; pointer-events: none; }
.ft-stage__cap {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #ECF1F7;
    color: #110E2D;
    font-size: 10px;
    line-height: 1.4;
}
.ft-stage__hub {
    position: absolute;
    left: 50%;
    top: 52.5%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    line-height: 1;
    letter-spacing: .08em;
    color: #110E2D;
}

/* --- pins: the tab icons on the stage --- */
.ft-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    transition: margin .5s cubic-bezier(.2, .7, .2, 1), opacity .5s ease;
}
.ft-pin__ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(17, 14, 45, .1);
    transition: background-color .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.ft-pin__ico svg { width: 17px; height: 17px; }
.ft-pin__ico svg [stroke], .ft-pin__ico svg[stroke] { transition: stroke .35s ease; }
.ft-pin__label {
    position: absolute;
    top: calc(100% + 7px);
    padding: 5px 10px;
    border-radius: 20px;
    background: #110E2D;
    color: #fff;
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    z-index: 3;
}
.ft-pin.is-near-left .ft-pin__label { left: -6px; }
.ft-pin.is-near-right .ft-pin__label { right: -6px; }
.ft-pin:hover .ft-pin__ico { transform: scale(1.08); }
.ft-pin:hover .ft-pin__label,
.ft-pin.is-active .ft-pin__label { opacity: 1; transform: none; }
.ft-pin.is-active { z-index: 2; }
.ft-pin.is-active .ft-pin__ico {
    background: var(--ft-accent, #EE5D38);
    box-shadow: 0 8px 18px var(--ft-accent-shadow, rgba(238, 93, 56, .35));
}
.ft-pin.is-active .ft-pin__ico svg [stroke], .ft-pin.is-active .ft-pin__ico svg[stroke] { stroke: #fff; }
.ft-pin:focus-visible { outline: none; }
.ft-pin:focus-visible .ft-pin__ico { outline: 2px solid #EE5D38; outline-offset: 3px; }

/* --- LMS: the campus --- */
.cm-paper { opacity: 0; transition: opacity 1s ease; }
.cm-road {
    fill: none;
    stroke: #110E2D;
    stroke-opacity: .16;
    stroke-width: 1.4;
    stroke-dasharray: 3 5;
    opacity: 0;
    transition: opacity .8s ease .5s, stroke .3s ease, stroke-opacity .3s ease;
}
.cm-road.is-active {
    stroke: #EE5D38;
    stroke-opacity: 1;
    stroke-width: 2.2;
    animation: cmFlow .9s linear infinite;
}
.cm-trees circle { fill: #ECF1F7; stroke: #110E2D; stroke-opacity: .12; opacity: 0; transition: opacity .8s ease 1s; }
.cm-plaza { fill: #ECF1F7; stroke: #110E2D; stroke-opacity: .25; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1.2s ease, fill-opacity .6s ease .8s; }
.cm-plaza-in { fill: #fff; stroke: #110E2D; stroke-opacity: .12; opacity: 0; transition: opacity .6s ease 1s; }
.cm-ring { fill: none; stroke: #EE5D38; stroke-opacity: .4; transform-box: fill-box; transform-origin: center; opacity: 0; }
.cm-compass { opacity: 0; transition: opacity .8s ease 1.2s; }
.cm-b { opacity: 0; transition: opacity .6s ease var(--d, 0s); }
.cm-lift { transform-box: fill-box; transform-origin: center bottom; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.cm-shadow { fill: #110E2D; opacity: .06; transition: opacity .5s ease; }
.cm-depth { fill: #ECF1F7; stroke: #110E2D; stroke-opacity: .14; transition: fill .4s ease, stroke .4s ease; }
.cm-face {
    fill: #fff;
    stroke: #110E2D;
    stroke-opacity: .4;
    stroke-width: 1.2;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.1s ease var(--d, 0s), fill .4s ease, stroke .4s ease;
}
.cm-win { fill: #110E2D; opacity: .12; transition: fill .4s ease, opacity .4s ease; }
.cm-b.is-active .cm-lift { transform: translateY(-7px); }
.cm-b.is-active .cm-shadow { opacity: .12; }
.cm-b.is-active .cm-face { fill: #fff3ef; stroke: #EE5D38; stroke-opacity: 1; }
.cm-b.is-active .cm-depth { fill: #fbd9cf; stroke: #EE5D38; stroke-opacity: .6; }
.cm-b.is-active .cm-win { fill: #EE5D38; opacity: .55; }
.ft-stage--campus .ft-pin { opacity: 0; }
.ft-stage--campus .ft-pin.is-active { margin-top: -7px; }
.ft-stage__hub { opacity: 0; transition: opacity .6s ease 1s; }
/* drawn once the stage scrolls into view */
.is-drawn .cm-paper, .is-drawn .cm-road, .is-drawn .cm-trees circle, .is-drawn .cm-plaza-in,
.is-drawn .cm-compass, .is-drawn .cm-b, .is-drawn .ft-stage__hub { opacity: 1; }
.is-drawn .cm-plaza { stroke-dashoffset: 0; fill-opacity: 1; }
.is-drawn .cm-face { stroke-dashoffset: 0; }
.is-drawn .cm-ring { animation: cmPulse 2.6s ease-out 1.4s infinite; }
.is-drawn.ft-stage--campus .ft-pin { opacity: 1; transition-delay: 0s; }
.ft-stage--campus .ft-pin:nth-child(n) { transition: margin .5s cubic-bezier(.2, .7, .2, 1), opacity .5s ease .9s; }

/* --- LXP: the learner's path --- */
[dir="rtl"] .ft-stage--path .ft-stage__map > svg { transform: scaleX(-1); }
.ft-stage--path .ft-stage__cap { bottom: auto; top: 10px; }
.lp-track { fill: none; stroke: #ECF1F7; stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.lp-dash { fill: none; stroke: #110E2D; stroke-opacity: .2; stroke-width: 1.2; stroke-dasharray: 2 6; opacity: 0; transition: opacity .8s ease 1s; }
.lp-progress { fill: none; stroke: var(--ft-accent, #EE5D38); stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .5s ease 1.2s; }
.lp-dot, .lp-flag { opacity: 0; transition: opacity .5s ease 1.3s; }
.lp-dot circle:not(.lp-glow):not([stroke]) { fill: var(--ft-accent, #EE5D38); }
.lp-flag path[fill] { fill: var(--ft-accent, #EE5D38); }
.lp-glow { animation: lpGlow 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ft-stage--path .ft-pin { opacity: 0; }
.ft-stage--path .ft-pin.is-done .ft-pin__ico { background: #110E2D; }
.ft-stage--path .ft-pin.is-done .ft-pin__ico svg [stroke], .ft-stage--path .ft-pin.is-done .ft-pin__ico svg[stroke] { stroke: #fff; }
.is-drawn .lp-track { stroke-dashoffset: 0; }
.is-drawn .lp-dash, .is-drawn .lp-progress, .is-drawn .lp-dot, .is-drawn .lp-flag { opacity: 1; }
.is-drawn.is-ready.ft-stage--path .ft-pin { opacity: 1; }
.ft-stage--path .ft-pin { transition: opacity .5s ease calc(.9s + var(--i, 0) * .08s); }

@keyframes cmFlow { to { stroke-dashoffset: -16; } }
@keyframes cmPulse {
    0% { opacity: .9; transform: scale(.8); }
    100% { opacity: 0; transform: scale(1.35); }
}
@keyframes lpGlow {
    0%, 100% { transform: scale(.85); }
    50% { transform: scale(1.15); }
}

@media (max-width: 575px) {
    .ft-stage { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .ft-stage, .ft-stage *, .ft-bridge, .ft-bridge * { animation: none !important; transition: none !important; }
}