/* ==========================================================================
   NSS — Signature effect styles
   Pairs with nss-fx.js. No font-size is declared here except via --fs-* tokens.
   ========================================================================== */

/* ---------- 1. LINE REVEAL MASKS ---------------------------------------- */
.nss-lines { display: block; }
.nss-line {
    display: block;
    overflow: hidden;
    padding-bottom: .08em;   /* room for descenders inside the mask */
    margin-bottom: -.08em;
}
.nss-line__in {
    display: block;
    transform-origin: 0 100%;
    will-change: transform;
}
body.rtl .nss-line__in { transform-origin: 100% 100%; }

/* pre-measure state used while buildLines() runs */
.nss-w { display: inline-block; }

/* ---------- 2. ODOMETER -------------------------------------------------- */
.nss-odo {
    display: inline-flex;
    align-items: flex-start;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    direction: ltr;           /* digits always read left-to-right */
}
.nss-odo__col {
    display: block;
    height: 1em;
    overflow: hidden;
}
.nss-odo__strip {
    display: block;
    will-change: transform;
}
.nss-odo__strip > span {
    display: block;
    height: 1em;
    line-height: 1;
}
.nss-odo__fix { display: block; }
.nss-odo__suffix {
    color: var(--nss-cyan-300);
    margin-inline-start: .04em;
}

/* ---------- 3. CUSTOM CURSOR -------------------------------------------- */
@media (hover: hover) {
    body.has-cursor,
    body.has-cursor a,
    body.has-cursor button { cursor: none; }
}

.nss-cursor__dot,
.nss-cursor__ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    margin: -4px 0 0 -4px;
}

.nss-cursor__dot {
    width: 8px;
    height: 8px;
    background: var(--nss-cyan);
}

.nss-cursor__ring {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 1.5px solid rgba(23, 175, 208, .55);
    transition: width .32s var(--e-out), height .32s var(--e-out),
                margin .32s var(--e-out), background .32s var(--e-out),
                border-color .32s var(--e-out);
}

.nss-cursor__ring.is-link {
    width: 60px; height: 60px;
    margin: -30px 0 0 -30px;
    background: rgba(23, 175, 208, .1);
    border-color: var(--nss-cyan);
}

.nss-cursor__ring.is-view {
    width: 84px; height: 84px;
    margin: -42px 0 0 -42px;
    background: var(--nss-cyan);
    border-color: var(--nss-cyan);
}

.nss-cursor__ring.is-down { transform: translate(-50%, -50%) scale(.82); }

.nss-cursor__label {
    color: #fff;
    font-size: var(--fs-micro);
    font-weight: 800;
    letter-spacing: .14em;
    opacity: 0;
    transition: opacity .2s var(--e-out);
}
.nss-cursor__ring.is-view .nss-cursor__label { opacity: 1; }

/* ---------- 4. SECTION RAIL ---------------------------------------------- */
.nss-rail {
    position: fixed;
    inset-inline-end: 26px;
    top: 50%;
    z-index: 8400;
    display: grid;
    gap: 14px;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--e-out), visibility var(--t-base);
}
.nss-rail.is-on { opacity: 1; visibility: visible; }

.nss-rail__dot {
    position: relative;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(5, 44, 62, .22);
    cursor: pointer;
    transition: all var(--t-base) var(--e-out);
}
.nss-rail__dot::after {
    content: attr(data-rail-label);
    position: absolute;
    inset-inline-end: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: var(--nss-deep);
    color: #fff;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all var(--t-fast) var(--e-out);
}
.nss-rail__dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.nss-rail__dot.is-active {
    background: var(--nss-cyan);
    box-shadow: 0 0 0 5px rgba(23, 175, 208, .18);
    transform: scale(1.25);
}

@media (max-width: 1399px) { .nss-rail { display: none; } }

/* ---------- 5. PINNED HORIZONTAL SCROLL ---------------------------------- */
.nss-hz { position: relative; overflow: clip; }

.nss-hz__viewport {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
}

.nss-hz__track {
    display: flex;
    gap: var(--sp-3);
    padding-inline: max(24px, calc((100vw - var(--shell)) / 2 + 24px));
    will-change: transform;
}

/* intro panel that travels with the track */
.nss-hz__intro {
    flex: 0 0 min(460px, 78vw);
    align-self: center;
    padding-inline-end: var(--sp-3);
}

.nss-hz__card {
    position: relative;
    flex: 0 0 min(380px, 80vw);
    display: flex;
    flex-direction: column;
    height: min(560px, 68svh);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--nss-deep);
    cursor: pointer;
    transition: transform var(--t-base) var(--e-out),
                box-shadow var(--t-base) var(--e-out);
}
.nss-hz__card:hover { transform: translateY(-10px); box-shadow: var(--sh-lg); }

.nss-hz__media { position: absolute; inset: 0; }
.nss-hz__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--e-out), filter var(--t-base) var(--e-out);
    filter: saturate(.75) brightness(.72);
}
.nss-hz__card:hover .nss-hz__media img {
    transform: scale(1.09);
    filter: saturate(1) brightness(.82);
}
.nss-hz__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 33, 46, .18) 0%, rgba(4, 33, 46, .55) 46%, rgba(4, 33, 46, .96) 100%);
}

.nss-hz__body {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: var(--sp-3);
    color: #fff;
}

.nss-hz__index {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 13px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    font-weight: 800;
    letter-spacing: .14em;
    backdrop-filter: blur(8px);
}

.nss-hz__icon {
    position: absolute;
    z-index: 2;
    inset-inline-end: var(--sp-3);
    top: var(--sp-3);
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: var(--fs-bl-card-title);
    transition: all var(--t-base) var(--e-out);
}
.nss-hz__card:hover .nss-hz__icon {
    background: var(--grad-brand);
    border-color: transparent;
    transform: rotate(-8deg) scale(1.06);
}

.nss-hz__title {
    margin: 0 0 9px;
    color: #fff;
    font-size: var(--fs-bl-card-title);
    line-height: 1.35;
}

.nss-hz__text {
    margin: 0 0 18px;
    font-size: var(--fs-bl-card-text);
    line-height: 1.7;
    color: rgba(217, 234, 242, .8);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nss-hz__more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--fs-bl-card-btn);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nss-cyan-300);
}
.nss-hz__more i { transition: transform var(--t-fast) var(--e-out); }
.nss-hz__card:hover .nss-hz__more i { transform: translateX(5px); }
body.rtl .nss-hz__card:hover .nss-hz__more i { transform: translateX(-5px); }

/* progress bar under the rail */
.nss-hz__progress {
    position: absolute;
    inset-inline: max(24px, calc((100vw - var(--shell)) / 2 + 24px));
    bottom: 48px;
    height: 2px;
    border-radius: var(--r-pill);
    background: rgba(5, 44, 62, .12);
    overflow: hidden;
}
.nss-hz__bar {
    height: 100%;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
body.rtl .nss-hz__bar { transform-origin: 100% 50%; }

.nss-hz__hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--sp-3);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nss-slate);
}
.nss-hz__hint i { color: var(--nss-cyan); animation: nss-nudge 1.8s var(--e-io) infinite; }
@keyframes nss-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* fallback: no pinning below lg, or when motion is reduced */
.nss-hz.is-static .nss-hz__viewport { min-height: 0; display: block; }
.nss-hz.is-static .nss-hz__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    padding-inline: 0;
    transform: none !important;
}
.nss-hz.is-static .nss-hz__intro {
    grid-column: 1 / -1;
    padding-inline-end: 0;
    margin-bottom: var(--sp-3);
}
.nss-hz.is-static .nss-hz__card { flex: initial; height: 460px; }
.nss-hz.is-static .nss-hz__progress,
.nss-hz.is-static .nss-hz__hint { display: none; }

/* ---------- 6. STICKY SHOWCASE ------------------------------------------- */
.nss-show {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    align-items: start;
}

.nss-show__stage {
    position: sticky;
    top: 110px;
    height: min(620px, 74svh);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--nss-deep);
    box-shadow: var(--sh-lg);
}

.nss-show__media {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.nss-show__media.is-active { opacity: 1; }
.nss-show__media img { width: 100%; height: 100%; object-fit: cover; }
.nss-show__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(4, 33, 46, .9) 100%);
}

.nss-show__caption {
    position: absolute;
    z-index: 2;
    inset-inline: var(--sp-3);
    bottom: var(--sp-3);
    color: #fff;
}
.nss-show__caption b {
    display: block;
    font-size: var(--fs-bl-card-title);
    margin-bottom: 4px;
}
.nss-show__caption span {
    font-size: var(--fs-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nss-cyan-300);
}

.nss-show__list { display: grid; }

.nss-show__item {
    position: relative;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--nss-line);
    cursor: pointer;
    transition: padding-inline-start var(--t-base) var(--e-out);
}
.nss-show__item:last-child { border-bottom: 1px solid var(--nss-line); }
.nss-show__item.is-active { padding-inline-start: 22px; }

.nss-show__item::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: var(--sp-4);
    bottom: var(--sp-4);
    width: 3px;
    border-radius: var(--r-pill);
    background: var(--grad-brand);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform var(--t-base) var(--e-out);
}
.nss-show__item.is-active::before { transform: scaleY(1); }

.nss-show__num {
    display: block;
    margin-bottom: 10px;
    font-size: var(--fs-micro);
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--nss-slate-300);
    transition: color var(--t-base) var(--e-out);
}
.nss-show__item.is-active .nss-show__num { color: var(--nss-cyan); }

.nss-show__title {
    margin: 0 0 10px;
    font-size: var(--fs-vm-title);
    line-height: 1.25;
    color: var(--nss-slate-300);
    transition: color var(--t-base) var(--e-out);
}
.nss-show__item.is-active .nss-show__title { color: var(--nss-deep); }

.nss-show__text {
    margin: 0;
    font-size: var(--fs-prj-desc);
    line-height: 1.8;
    color: var(--nss-slate);
    max-width: 52ch;
}

.nss-show__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}
.nss-show__meta b {
    display: block;
    font-size: var(--fs-counter-num-sm);
    font-weight: 900;
    line-height: 1.1;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nss-show__meta span {
    font-size: var(--fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nss-slate);
}

.nss-show__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: var(--sp-2);
    font-size: var(--fs-bl-card-btn);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nss-cyan-700);
    opacity: 0;
    transform: translateY(6px);
    transition: all var(--t-base) var(--e-out);
}
.nss-show__item.is-active .nss-show__cta { opacity: 1; transform: translateY(0); }

@media (max-width: 991px) {
    .nss-show { grid-template-columns: 1fr; gap: var(--sp-3); }
    .nss-show__stage { position: relative; top: 0; height: 300px; }
    .nss-show__item.is-active { padding-inline-start: 16px; }
    .nss-show__title { font-size: var(--fs-vm-title-sm); color: var(--nss-deep); }
}

/* ---------- 7. STACK CARDS ----------------------------------------------- */
.nss-stack { display: grid; gap: var(--sp-3); }
.nss-stack > * { will-change: transform; }

/* giant ghost numeral behind a stacked card */
.nss-ghost {
    position: absolute;
    inset-inline-end: 24px;
    top: -18px;
    font-size: var(--fs-watermark-sm);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
    user-select: none;
}
.nss-ghost--dark { color: rgba(5, 44, 62, .05); }

/* ---------- 8. KINETIC BAND ---------------------------------------------- */
.nss-kinetic {
    position: relative;
    padding-block: var(--sp-3);
    background: var(--nss-deep-800);
    border-block: 1px solid rgba(255, 255, 255, .07);
    overflow: hidden;
    transform: rotate(-1.4deg) scale(1.03);
}
body.rtl .nss-kinetic { transform: rotate(1.4deg) scale(1.03); }

.nss-kinetic__track {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    width: max-content;
    will-change: transform;
}

.nss-kinetic__item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-section-sub);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(217, 234, 242, .34);
    transition: color var(--t-base) var(--e-out);
}
.nss-kinetic__item:hover { color: #fff; }
.nss-kinetic__item i {
    color: var(--nss-cyan);
    font-size: .7em;
}

/* ---------- 9. RADAR PIN -------------------------------------------------- */
.nss-radar { position: relative; }
.nss-radar::before,
.nss-radar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--nss-cyan);
    opacity: 0;
}
.nss-office.is-active .nss-radar::before { animation: nss-radar 2.2s var(--e-io) infinite; }
.nss-office.is-active .nss-radar::after  { animation: nss-radar 2.2s var(--e-io) .7s infinite; }

@keyframes nss-radar {
    0%   { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* ---------- 10. GIANT CTA TYPE ------------------------------------------- */
.nss-cta__ghost {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    z-index: 0;
    transform: translateY(-50%);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.nss-cta__ghost-track {
    display: flex;
    width: max-content;
    will-change: transform;
}
.nss-cta__ghost span {
    display: block;
    white-space: nowrap;
    padding-inline-end: .3em;
    font-size: var(--fs-watermark);
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.045em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(111, 220, 239, .13);
}

@media (max-width: 991px) {
    .nss-cta__ghost span { font-size: var(--fs-watermark-sm); }
}

/* ---------- 11. REDUCED MOTION ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nss-cursor__dot,
    .nss-cursor__ring,
    .nss-rail { display: none; }
    body.has-cursor,
    body.has-cursor a,
    body.has-cursor button { cursor: auto; }
    .nss-line__in { transform: none !important; }
    .nss-show__media { opacity: 1; }
    .nss-show__media:not(.is-active) { display: none; }
}