/* ==========================================================================
   GLT Transport — glttransport.com
   Kinematik qat

   `site.css`-dən SONRA yüklənir və yalnız hərəkət/səhnə elementlərini
   əlavə edir. Mövcud dizayn sistemi toxunulmaz qalır.

   Əsas qayda: məzmun əvvəldir. Skript və ya WebGL işləməsə bütün
   mətnlər adi axınla oxunur — kinematik düzüm yalnız `.is-cinematic`
   sinfi ilə qoşulur, onu da yalnız səhnə həqiqətən qurulanda JS verir.

   Bölmələr:
     01. Səhnə kətanı
     02. Kinematik səyahət
     03. HUD
     04. Fəsil mətnləri
     05. Qlobus (hero)
     06. Dəniz və hissəcik sahəsi
     07. Preloader
     08. Səhifə keçidi
     09. Fərdi kursor
     10. Tipoqrafiya və şəkil açılışları
     11. Səviyyələr, responsivlik, əlçatanlıq
   ========================================================================== */


/* ==========================================================================
   01. Səhnə kətanı
   ========================================================================== */

[data-webgl],
[data-journey-stage] {
    position: relative;
    isolation: isolate;
}

.g-stage__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
}

/* Səhnə qurulanda HTML əvəzedici sönür. */
[data-webgl].is-live > .g-webgl__fallback {
    opacity: 0;
    visibility: hidden;
}

.g-webgl__fallback {
    transition: opacity var(--g-slow) var(--g-ease);
}


/* ==========================================================================
   02. Kinematik səyahət
   ========================================================================== */

/*
| Standart (skriptsiz) görünüş: adi bölmə, mərhələlər siyahı kimi.
| Səhnə qurulanda JS `.is-cinematic` əlavə edir və düzüm dəyişir.
*/

.j {
    position: relative;
    background: var(--g-bg-deep);
}

.j__intro {
    padding-block: var(--g-section) 0;
}

/*
| Standart halda səhnə adi blokdur və kətan ümumiyyətlə yaradılmır —
| fəsillər onun içində sadə mətn axını kimi qalır.
*/
.j__stage {
    position: static;
}

.j__chapters {
    display: grid;
    gap: 28px;
    padding-block: 48px var(--g-section);
}

.j__chapter {
    display: grid;
    gap: 12px;
    max-width: 62ch;
    padding: 26px 28px;
    border: 1px solid var(--g-line);
    border-radius: var(--g-radius-l);
    background: var(--g-surface);
}

.j__place {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--g-font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--g-brand);
}

.j__place::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--g-brand-line);
}

.j__title {
    font-family: var(--g-font-display);
    font-size: clamp(1.5rem, 3.2vw, 2.6rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--g-text);
}

.j__text {
    max-width: 46ch;
    color: var(--g-text-2);
    line-height: 1.65;
}

/* ---- Kinematik rejim ---- */

.j.is-cinematic {
    /* Fəsil sayına görə uzunluq — hər fəsilə təxminən bir ekran. */
    height: var(--j-length, 900vh);
}

.j.is-cinematic .j__intro {
    position: relative;
    z-index: 2;
    padding-block: var(--g-section);
    pointer-events: none;
}

.j.is-cinematic .j__stage {
    position: sticky;
    top: 0;
    display: block;
    height: 100vh;
    overflow: hidden;
    /* Səhnə hazır olana qədər fon boş ağ yanıb-sönməsin. */
    background:
        linear-gradient(
            180deg,
            var(--g-bg-deep) 0%,
            color-mix(in oklab, var(--g-brand) 6%, var(--g-bg-deep)) 100%
        );
}

.j.is-cinematic .j__chapters {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    pointer-events: none;
}

.j.is-cinematic .j__chapter {
    position: absolute;
    left: clamp(20px, 6vw, 92px);
    bottom: clamp(96px, 14vh, 160px);
    width: min(460px, 42vw);
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0;
    visibility: hidden;
}

.j.is-cinematic .j__title {
    font-size: clamp(1.8rem, 3vw, 3rem);
    text-shadow: 0 2px 30px rgb(from var(--g-bg) r g b / .55);
}

.j.is-cinematic .j__text {
    color: var(--g-text);
    opacity: .82;
    text-shadow: 0 1px 20px rgb(from var(--g-bg) r g b / .6);
}

/* Sətir maskası — fəsil mətni sətir-sətir qalxır. */
.j__line {
    display: block;
    overflow: hidden;
    padding-bottom: .12em;
    margin-bottom: -.12em;
}

.j__line > span {
    display: block;
    will-change: transform;
}


/* ==========================================================================
   03. HUD
   ========================================================================== */

.j__hud {
    position: absolute;
    inset: auto clamp(20px, 5vw, 64px) clamp(28px, 5vh, 56px) auto;
    z-index: 3;
    display: none;
    grid-auto-flow: row;
    gap: 18px;
    justify-items: end;
    pointer-events: none;
}

.j.is-cinematic .j__hud {
    display: grid;
}

.j__readout {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.j__label {
    font-family: var(--g-font-mono);
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--g-text-3);
}

.j__value {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--g-font-display);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.03em;
    color: var(--g-text);
    font-variant-numeric: tabular-nums;
}

.j__unit {
    font-family: var(--g-font-mono);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--g-text-3);
}

.j__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--g-font-mono);
    font-size: .66rem;
    letter-spacing: .14em;
    color: var(--g-text-2);
}

.j__flag {
    padding: 3px 9px 4px;
    border: 1px solid var(--g-brand-line);
    border-radius: var(--g-radius-pill);
    background: var(--g-brand-soft);
    color: var(--g-brand);
    font-weight: 700;
}

/* İrəliləyiş zolağı — səhnənin altında. */
.j__progress {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    height: 2px;
    background: var(--g-line);
    display: none;
}

.j.is-cinematic .j__progress {
    display: block;
}

.j__progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--g-brand), var(--g-brand-3));
    transform: scaleX(0);
    transform-origin: left;
}


/* ==========================================================================
   05. «AZİMUT» — hero-nun istiqamət aləti
   ========================================================================== */

/*
| Server-render SVG texniki lövhə: cızılmış dərəcə cizgiləri, marşrut,
| brend nişangahı oxda. Bəzək qadağandır — üç cizgi qalınlığı, bir
| amber vurğu, qalan hər şey neqativ boşluqdur. Cizgi tonları
| dəyişənlərlə verilir ki, «həkk olunmuş» görünüş hər iki rejimdə
| qorunub tənzimlənə bilsin.
*/

.g-azimut {
    --az-ink: color-mix(in oklab, var(--g-text) 20%, transparent);
    --az-ink-strong: color-mix(in oklab, var(--g-text) 44%, transparent);
    --az-ink-faint: color-mix(in oklab, var(--g-text) 12%, transparent);
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 74vh;
    margin-inline: auto;
    overflow: visible;
}

/* Cizgilər — həkk, boya deyil. */

.az-ink {
    fill: none;
    stroke: var(--az-ink);
    stroke-width: 1;
}

.az-ink--minor {
    stroke: var(--az-ink-faint);
    stroke-width: 0.75;
}

.az-ink--ring {
    stroke: var(--az-ink-faint);
}

.az-ink--alidade {
    stroke: var(--az-ink-strong);
    stroke-width: 0.9;
}

.az-amber {
    stroke: var(--g-amber);
    stroke-width: 3;
    stroke-linecap: round;
}

.az-num {
    fill: var(--az-ink-strong);
    font-family: var(--g-font-mono);
    font-size: 12px;
    letter-spacing: .14em;
}

.az-mono {
    fill: var(--az-ink-strong);
    font-family: var(--g-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
}

.az-mono--brg {
    font-size: 13px;
    fill: var(--g-text);
}

.az-mono--strong {
    fill: var(--g-text);
}

.az-stamp .az-mono {
    font-size: 10.5px;
}

/* Marşrut — yol dili: astar + axan kəsik mərkəz xətti. */

.az-route-casing {
    fill: none;
    stroke: var(--az-ink-faint);
    stroke-width: 3;
    stroke-linecap: round;
}

.az-route {
    fill: none;
    stroke: var(--g-brand-3);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 12 10;
    opacity: .85;
}

/* Məntəqələr. */

.az-wp circle {
    fill: var(--g-brand-2);
}

.az-wp--minor circle {
    fill: var(--az-ink-strong);
}

.az-wp .az-wp__name {
    fill: var(--g-text);
    transition: opacity var(--g-fast) var(--g-ease);
    opacity: .78;
}

.az-wp .az-wp__geo {
    fill: var(--az-ink);
    font-size: 10px;
    transition: opacity var(--g-fast) var(--g-ease);
    opacity: .55;
}

.az-wp:hover .az-wp__name,
.az-wp:hover .az-wp__geo {
    opacity: 1;
}

.az-wp--minor .az-wp__name {
    font-size: 9.5px;
    opacity: .5;
}

/* Nişangah — brendin öz həndəsəsi, alətin oxu. */

.az-ret__ring {
    fill: none;
    stroke: var(--g-brand-2);
    stroke-width: 2.4;
}

.az-ret__tick {
    stroke: var(--g-brand-2);
    stroke-width: 2.4;
    stroke-linecap: round;
}

.az-ret__dot {
    fill: var(--g-brand-2);
}

.az-ret__halo {
    fill: none;
    stroke: var(--g-brand-3);
    stroke-width: 1;
    opacity: 0;
}

/* Yük impulsu — yalnız ona yumşaq parıltı icazəlidir. */

.az-pulse {
    fill: var(--g-brand-3);
    opacity: 0;
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--g-brand-3) 60%, transparent));
}

.g-hero__visual {
    position: relative;
}

@media (min-width: 1080px) {
    .g-hero__visual--azimut {
        position: relative;
        min-height: 62vh;
    }

    /*
    | Alət öz sütunundan sağa daşır: limbin qövsü ekran arxasında
    | itir — cihaz kadrdan böyükdür, ölçü hissi buradan gəlir.
    */
    .g-hero__visual--azimut .g-azimut {
        position: absolute;
        top: 50%;
        right: clamp(-20vw, -10vw, -80px);
        width: clamp(600px, 50vw, 880px);
        max-height: none;
        transform: translateY(-50%);
    }
}

.g-scrollcue {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    color: var(--g-text-3);
    font-family: var(--g-font-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.g-scrollcue__rail {
    position: relative;
    width: 2px;
    height: 40px;
    border-radius: 2px;
    background: var(--g-line-2);
    overflow: hidden;
}

.g-scrollcue__rail::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -60%;
    height: 60%;
    background: linear-gradient(to bottom, transparent, var(--g-brand-2));
    animation: g-cue 1.9s var(--g-ease-in-out) infinite;
}

@keyframes g-cue {
    0%   { transform: translateY(0); }
    100% { transform: translateY(266%); }
}


/* ==========================================================================
   06. Dəniz və hissəcik sahəsi
   ========================================================================== */

.g-section--ocean {
    position: relative;
    overflow: hidden;
}

.g-section--ocean > .g-container {
    position: relative;
    z-index: 1;
}

.g-ocean {
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    z-index: 0;
    pointer-events: none;
    opacity: .82;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 88%, transparent);
}

.g-cta--field {
    position: relative;
    overflow: hidden;
}

.g-cta--field > .g-cta__inner {
    position: relative;
    z-index: 1;
}

.g-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .9;
    /* Halqa maskası — mərkəz təmiz qalır, mətn oxunaqlı olur. */
    -webkit-mask-image: radial-gradient(
        68% 76% at 50% 50%,
        transparent 0%,
        rgba(0, 0, 0, .35) 42%,
        #000 66%,
        transparent 100%
    );
    mask-image: radial-gradient(
        68% 76% at 50% 50%,
        transparent 0%,
        rgba(0, 0, 0, .35) 42%,
        #000 66%,
        transparent 100%
    );
}


/* ==========================================================================
   07. Preloader
   ========================================================================== */

html.is-loading,
html.is-loading body {
    overflow: hidden;
}

.g-preloader {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 26px;
    background: var(--g-bg-deep);
    transition:
        opacity 640ms var(--g-ease),
        visibility 640ms var(--g-ease);
}

.g-preloader.is-done {
    opacity: 0;
    visibility: hidden;
}

.g-preloader__mark {
    width: 62px;
    height: 62px;
    object-fit: contain;
    animation: g-pre-pulse 1.6s var(--g-ease-in-out) infinite;
}

@keyframes g-pre-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(.93); opacity: .64; }
}

.g-preloader__bar {
    position: relative;
    width: min(260px, 54vw);
    height: 2px;
    border-radius: 2px;
    background: var(--g-line-2);
    overflow: hidden;
}

/* Zolaq JS tərəfindən idarə olunur — həqiqi yüklənməni göstərir. */
.g-preloader__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--g-brand), var(--g-brand-3));
    transform: scaleX(0);
    transform-origin: left;
}

.g-preloader__meta {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--g-font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--g-text-3);
}

.g-preloader__count {
    color: var(--g-text);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   08. Səhifə keçidi
   ========================================================================== */

.g-curtain {
    position: fixed;
    inset: 0;
    z-index: 8000;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

/*
| Baza vəziyyət — pərdə yığılıb. Giriş animasiyası bitəndən sonra
| element məhz bura qayıdır, ona görə `fill-mode: backwards` kifayətdir
| və skript işləməsə də pərdə ekranda ilişib qalmır.
*/
/*
| Tikişin kökü: `1fr` sütunları ekran eninə tam bölünmür (1919 px / 5 =
| 383.8), üstəlik hər lövhə `transform` səbəbindən ayrıca kompozisiya
| qatıdır — brauzer hər qatın kənarını ayrıca yuvarlaqlaşdırır və
| qonşular arasında bir piksellik boşluq qalır. Məhz bu, 3-cü və 4-cü
| lövhələr arasında görünən nazik cizgi idi.
|
| Həlli: hər lövhə öz sərhədindən 1 px kənara eyni rənglə boyanır
| (`box-shadow` yeri tutmur, ona görə düzülüş dəyişmir) və qonşusunun
| altına girir. Kölgə də `transform` ilə miqyaslanır, ona görə lövhə
| yığılanda o da yox olur — ekranda heç bir qalıq qalmır.
*/
.g-curtain__panel {
    background: var(--g-brand);
    box-shadow: 0 0 0 1px var(--g-brand);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 560ms var(--g-ease);
    animation: g-curtain-open 680ms var(--g-ease) backwards;
}

@keyframes g-curtain-open {
    from { transform: scaleY(1); transform-origin: top; }
    to   { transform: scaleY(0); transform-origin: top; }
}

.g-curtain__panel:nth-child(1) { transition-delay: 0ms;   animation-delay: 180ms; }
.g-curtain__panel:nth-child(2) { transition-delay: 45ms;  animation-delay: 135ms; }
.g-curtain__panel:nth-child(3) { transition-delay: 90ms;  animation-delay: 90ms;  }
.g-curtain__panel:nth-child(4) { transition-delay: 135ms; animation-delay: 45ms;  }
.g-curtain__panel:nth-child(5) { transition-delay: 180ms; animation-delay: 0ms;   }

/*
| İlk keçiddən sonra giriş animasiyası bir daha oynamamalıdır —
| yoxsa `is-out` silinən kimi pərdə yenidən ekranı örtərdi.
*/
.g-curtain.has-navigated .g-curtain__panel {
    animation: none;
}

.g-curtain.is-in {
    pointer-events: all;
}

/* Çıxış: panellər aşağıdan qalxıb ekranı örtür. */
.g-curtain.is-in .g-curtain__panel {
    transform: scaleY(1);
    transform-origin: bottom;
}

/* Giriş: panellər yuxarı çəkilir. */
.g-curtain.is-out .g-curtain__panel {
    transform: scaleY(0);
    transform-origin: top;
}


/* ==========================================================================
   10. Tipoqrafiya və şəkil açılışları
   ========================================================================== */

.g-split__mask {
    display: inline-block;
    overflow: hidden;
    /* Enən hərflər (g, y, ğ, ц) kəsilməsin. */
    padding-bottom: .14em;
    margin-bottom: -.14em;
    vertical-align: bottom;
}

.g-split__word {
    display: inline-block;
    will-change: transform;
}

[data-reveal-image] {
    overflow: hidden;
}

[data-parallax] {
    will-change: transform;
}

/* Kitabxana yüklənmədisə heç nə gizli qalmır. */
html.no-motion .g-split__word,
html.no-motion [data-motion],
html.no-motion [data-motion-item],
html.no-motion [data-hero-item] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
}

html:not(.js) [data-motion],
html:not(.js) [data-motion-item] {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   11. Səviyyələr, responsivlik, əlçatanlıq
   ========================================================================== */

/*
| Qeyd: `--j-length` `pages/home.js` tərəfindən inline verilir və
| səviyyəni (full / lite) orada nəzərə alır. Buraya CSS qaydası
| yazmaq faydasızdır — inline dəyər onu həmişə üstələyir.
*/


/* ==========================================================================
   0F. «NÖQTƏ» — kinematik final
   ========================================================================== */

/*
| Standart (skriptsiz) görünüş: adi qapanış bölməsi — ayırıcı,
| söz nişanı, başlıq, mətn, üç keçid. Kinematik rejimi (`is-cinematic`)
| yalnız pages/finale.js verir; bütün gizlətmə/yerləşdirmə oradan
| idarə olunur ki, JS olmayan ziyarətçi məzmunun hamısını görsün.
|
| Final HƏMİŞƏ qaranlıqdır — film qaranlıqda bitər. İşıqlı rejimdə də
| bölmə öz tünd fonunu saxlayır, ona görə rənglər dəyişənlərdən yox,
| birbaşa tünd palitradan gəlir.
*/

.f {
    position: relative;
    --f-bg: #04070d;
    --f-ink: #eaf1fb;
    --f-ink-2: rgba(234, 241, 251, .64);
    --f-ink-3: rgba(234, 241, 251, .38);
    --f-cyan: #2fb8e6;
    --f-cyan-soft: rgba(47, 184, 230, .32);
    --f-line: rgba(234, 241, 251, .12);
    background: var(--f-bg);
    color: var(--f-ink);
}

.f__stage {
    position: relative;
    display: grid;
    justify-items: center;
    gap: clamp(28px, 4vw, 44px);
    padding: clamp(72px, 10vw, 128px) var(--g-gutter) clamp(64px, 8vw, 96px);
    text-align: center;
}

/* ---- Kətan və böyük SVG: yalnız kinematik rejimdə ---- */

.f__canvas,
.f__svg,
.f__hud,
.f__copy,
.f__cursor {
    display: none;
}

/* ---- Statik ayırıcı ---- */

.f__divider {
    width: min(420px, 70vw);
    height: auto;
    overflow: visible;
}

.f__divider .f__route {
    stroke-dasharray: none;
}

.f__city-tick {
    stroke: var(--f-ink-3);
    stroke-width: 1.5;
}

/* ---- SVG cizgi dili ---- */

.f__seam {
    stroke: var(--f-cyan);
    stroke-width: 2;
    filter: drop-shadow(0 0 6px var(--f-cyan-soft));
}

.f__net path {
    fill: none;
    stroke: var(--f-ink-3);
    stroke-width: 1;
    opacity: .35;
}

.f__route {
    fill: none;
    stroke: var(--f-cyan);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px var(--f-cyan-soft));
}

.f__city line {
    stroke: var(--f-ink-2);
    stroke-width: 1.6;
}

.f__city text {
    fill: var(--f-ink-3);
    font-family: var(--g-font-mono);
    font-size: 17px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.f__ret-dot {
    fill: var(--f-cyan);
    filter: drop-shadow(0 0 10px var(--f-cyan));
}

.f__ret-ring {
    fill: none;
    stroke: var(--f-cyan);
    stroke-width: 2.4;
    filter: drop-shadow(0 0 8px var(--f-cyan-soft));
}

.f__ret [data-f-tick] {
    stroke: var(--f-cyan);
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* ---- HUD ---- */

.f__hud {
    position: absolute;
    left: clamp(20px, 5vw, 64px);
    bottom: clamp(26px, 5vh, 52px);
    z-index: 3;
    grid-auto-flow: row;
    gap: 9px;
    justify-items: start;
    font-size: .68rem;
    letter-spacing: .18em;
    color: var(--f-ink-3);
    text-align: left;
    pointer-events: none;
}

.f__hud b {
    font-weight: 600;
    color: var(--f-ink);
    font-variant-numeric: tabular-nums;
}

.f__hud-seal,
.f__hud-stamp {
    color: var(--f-cyan);
}

/* ---- İki taktlı ara mətn ---- */

.f__copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    place-items: center;
    pointer-events: none;
}

.f__line {
    position: absolute;
    max-width: 26ch;
    overflow: hidden;
    font-family: var(--g-font-display);
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--f-ink);
}

.f__line > span {
    display: block;
    will-change: transform;
}

/* ---- Brend anı ---- */

.f__brand {
    display: grid;
    justify-items: center;
    gap: clamp(18px, 2.6vw, 30px);
}

.f__wordmark {
    display: inline-flex;
    align-items: center;
    gap: .14em;
    font-family: var(--g-font-display);
    font-size: clamp(1.35rem, 3.4vw, 2.7rem);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--f-ink);
    white-space: nowrap;
}

.f__wm {
    display: inline-block;
    overflow: hidden;
}

.f__wm > span {
    display: inline-block;
    will-change: transform;
}

.f__wm-o {
    display: inline-grid;
    place-items: center;
    color: var(--f-cyan);
}

.f__wm-o .f-reticle {
    display: block;
    filter: drop-shadow(0 0 12px var(--f-cyan-soft));
}

.f__headline {
    max-width: 16ch;
    font-family: var(--g-font-display);
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.025em;
}

.f__hl {
    display: block;
    overflow: hidden;
    padding-bottom: .1em;
    margin-bottom: -.1em;
}

.f__hl > span {
    display: block;
    will-change: transform;
}

/* Cümlənin nöqtəsi — mikro-nişangah. */
.f__dot {
    display: inline-block;
    margin-left: .12em;
    color: var(--f-cyan);
    vertical-align: baseline;
}

.f__dot .f-reticle {
    display: inline-block;
    vertical-align: baseline;
}

/* ---- Çağırış ---- */

.f__cta {
    position: relative;
    display: grid;
    justify-items: center;
    gap: clamp(20px, 3vw, 30px);
    width: min(880px, 100%);
}

.f__kicker {
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--f-ink-3);
}

/* Yolun davamı — çağırış xətti. */
.f__ctaline {
    width: 100%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--f-cyan-soft) 12%,
            var(--f-cyan-soft) 88%,
            transparent
        );
    transform-origin: center;
}

.f__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 3vw, 28px);
    width: 100%;
}

.f__action {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 18px 12px 20px;
    border-radius: var(--g-radius-l);
    transition:
        background var(--g-fast) var(--g-ease),
        transform var(--g-fast) var(--g-ease);
}

.f__action:hover {
    background: rgba(234, 241, 251, .045);
    transform: translateY(-2px);
}

.f__action-label {
    position: relative;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--f-cyan);
}

/* Bənd nöqtəsi — xəttin üstündəki dayanacaq. */
.f__action-label::before {
    content: "";
    position: absolute;
    top: -27px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--f-cyan);
    transform: translateX(-50%);
    box-shadow: 0 0 10px var(--f-cyan-soft);
}

.f__action-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(.95rem, 1.5vw, 1.12rem);
    font-weight: 600;
    color: var(--f-ink);
}

.f__action--primary .f__action-text {
    color: var(--f-cyan);
}

/* «İZLƏ» bəndinin canlı nöqtəsi — yoldakı yük. */
.f__action-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g-green, #0d9c6c);
    animation: f-live 2.4s ease-in-out infinite;
}

@keyframes f-live {
    0%, 100% { opacity: .35; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(3px); }
}

/* Seçilən bəndə sürüşən nişangah — brend işarəsi kursora çevrilir. */
.f__cursor {
    position: absolute;
    z-index: 3;
    color: var(--f-cyan);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 10px var(--f-cyan-soft));
}

/* ---- Kinematik rejim ---- */

.f.is-cinematic {
    height: var(--f-length, 560vh);
}

.f.is-cinematic .f__stage {
    position: sticky;
    top: 0;
    display: block;
    height: 100vh;
    padding: 0;
    overflow: hidden;
}

.f.is-cinematic .f__canvas {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

.f.is-cinematic .f__canvas canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.f.is-cinematic .f__svg {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
}

.f.is-cinematic .f__divider {
    display: none;
}

.f.is-cinematic .f__hud {
    display: grid;
}

.f.is-cinematic .f__copy {
    display: grid;
}

.f.is-cinematic .f__brand {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: clamp(20px, 3vh, 34px);
    padding-inline: var(--g-gutter);
    pointer-events: none;
}

.f.is-cinematic .f__cta {
    position: absolute;
    left: 50%;
    bottom: clamp(48px, 12vh, 120px);
    z-index: 3;
    transform: translateX(-50%);
    width: min(880px, calc(100% - 2 * var(--g-gutter)));
}

.f.is-cinematic .f__cursor {
    display: block;
}

@media (max-width: 900px) {
    .f.is-cinematic .f__cta {
        bottom: 6vh;
    }

    .f__actions {
        gap: 8px;
    }

    .f__action {
        padding: 12px 8px 14px;
    }
}

@media (max-width: 640px) {
    .f__actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .f__action {
        grid-template-columns: 72px minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        padding: 10px 12px;
    }

    .f__action-label::before {
        display: none;
    }
}

@media (max-width: 1180px) {
    .j.is-cinematic .j__chapter {
        width: min(420px, 54vw);
    }
}

@media (max-width: 991px) {
    .g-azimut {
        max-height: 54vh;
    }

    .j.is-cinematic .j__hud {
        inset: auto 20px auto auto;
        top: calc(var(--g-header-h) + 20px);
        bottom: auto;
    }

    .j.is-cinematic .j__value {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    /*
    | Mobil: kinematik səhnə ümumiyyətlə qurulmur (bax `core/env.js`),
    | ona görə burada yalnız siyahı görünüşü nizamlanır.
    */
    .j__chapters {
        gap: 20px;
    }

    .j__chapter {
        padding: 22px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .g-preloader,
    .g-curtain {
        display: none !important;
    }

    .g-scrollcue__rail::after,
    .g-preloader__mark {
        animation: none;
    }

    .g-split__word,
    [data-parallax],
    [data-motion],
    [data-motion-item],
    [data-hero-item] {
        transform: none !important;
        opacity: 1 !important;
    }

    .j.is-cinematic {
        height: auto;
    }

    .f.is-cinematic {
        height: auto;
    }
}

@media print {
    .g-preloader,
    .g-curtain,
    [data-webgl],
    .j__stage,
    .f__canvas,
    .f__svg,
    .f__hud {
        display: none !important;
    }
}