/* ==========================================================================
   coming-soon.css — заглушка «сайт у розробці» для METROPEDIA
   Стиль 1:1 із hero головної: тунель + плівкове зерно + віньєтка.
   Усі розміри у фіксованих px. Адаптив — медіа-запитами (теж px).
   Кольори/шрифти — лише з токенів _root.css.
   ========================================================================== */

/* ============================ СЦЕНА ====================================== */
.cs {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 96px 24px 88px;
}

/* фон-тунель (як hero__bg, але cover на весь екран) */
.cs__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("../images/main/about3-decobg2.jpg") center center no-repeat;
    transform: scale(1.04);                 /* запас під легкий parallax */
    will-change: transform;
}

/* мутант, що виринає з темряви у правому нижньому куті */
.cs__beast {
    position: absolute;
    right: -40px;
    bottom: -20px;
    z-index: 2;
    width: 440px;
    height: auto;
    opacity: .5;
    pointer-events: none;
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .6)) saturate(.85);
    animation: cs-breathe 9s var(--ease) infinite;
    will-change: transform;
}

/* плівкове зерно/пил поверх фону */
.cs__grain {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: url("../images/main/grain.png") center center / cover no-repeat;
    pointer-events: none;
}

/* затемнення: верх · віньєтка по центру · низ (як hero__overlay) */
.cs__overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        radial-gradient(120% 96% at 50% 46%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .86) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .18) 26%, rgba(0, 0, 0, .26) 62%, rgba(0, 0, 0, .92) 100%);
}

/* ============================ КОНТЕНТ ==================================== */
.cs__content {
    position: relative;
    z-index: 10;
    max-width: 760px;
    text-align: center;
}

/* логотип METRO 2039 */
.cs__logo {
    width: min(800px, 74vw);
    height: auto;
    margin: 0 auto 30px;
    filter: drop-shadow(0 10px 34px rgba(0, 0, 0, .6));
    animation: cs-rise .9s var(--ease) both;
}

.cs__eyebrow {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--c-text-soft);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
    animation: cs-rise .9s var(--ease) .06s both;
}

/* тонка жовта риска-роздільник */
.cs__rule {
    display: block;
    width: 56px;
    height: 3px;
    margin: 22px auto 20px;
    background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
    box-shadow: 0 0 14px rgba(248, 200, 0, .5);
    animation: cs-rise .9s var(--ease) .12s both;
}

.cs__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 64px;
    line-height: 1.04;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-accent);
    text-shadow: 0 4px 30px rgba(0, 0, 0, .65);
    animation: cs-rise .9s var(--ease) .16s both;
}

.cs__accent {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 9px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-top: 14px;
    padding-left: 9px;                       /* компенсація letter-spacing для центру */
    text-shadow: 0 0 22px rgba(248, 200, 0, .35), 0 3px 18px rgba(0, 0, 0, .6);
    animation: cs-rise .9s var(--ease) .22s both;
}

.cs__lead {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--c-text-soft);
    max-width: 620px;
    margin: 30px auto 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .7);
    animation: cs-rise .9s var(--ease) .28s both;
}
.cs__lead strong {
    color: var(--c-text);
    font-weight: 500;
}

/* ----------------------- індикатор «копаємо тунелі» --------------------- */
.cs__progress {
    max-width: 380px;
    margin: 40px auto 0;
    animation: cs-rise .9s var(--ease) .34s both;
}

.cs__bar {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}
.cs__bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, #c79600 28%, var(--c-accent) 55%, #ffe9a8 80%, transparent 100%);
    box-shadow: 0 0 12px rgba(248, 200, 0, .6);
    animation: cs-dig 2.2s var(--ease) infinite;
}

.cs__status {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--c-text-dim);
    margin-top: 14px;
    transition: opacity .35s var(--ease);
}

/* ------------------------------ соцмережі ------------------------------- */
.cs__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-top: 36px;
    animation: cs-rise .9s var(--ease) .4s both;
}
.cs__social a {
    color: var(--c-text);
    opacity: .82;
    line-height: 0;
    transition: color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}
.cs__social a:hover {
    color: var(--c-accent);
    opacity: 1;
    transform: scale(1.14);
}
.cs__social svg {
    width: 23px;
    height: 23px;
    fill: currentColor;
}

/* ============================== ФУТЕР ==================================== */
.cs__footer {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 26px;
    text-align: center;
    animation: cs-rise .9s var(--ease) .5s both;
}
.cs__footer p {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-text-dim);
}
.cs__footer a {
    color: var(--c-text-soft);
    transition: color .2s var(--ease);
}
.cs__footer a:hover { color: var(--c-accent); }

/* ============================== АНІМАЦІЇ ================================= */
@keyframes cs-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* «бур» проходить тунелем зліва направо */
@keyframes cs-dig {
    0%   { left: -45%; }
    100% { left: 100%; }
}

/* ледь помітне «дихання» мутанта */
@keyframes cs-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-10px) scale(1.012); }
}

/* мерехтіння зерна (зсув позиції покроково) */
@keyframes cs-grain {
    0%   { background-position: 0 0; }
    20%  { background-position: -12px 8px; }
    40%  { background-position: 10px -10px; }
    60%  { background-position: -8px -6px; }
    80%  { background-position: 12px 10px; }
    100% { background-position: 0 0; }
}

/* ============================== АДАПТИВ ================================== */
@media (max-width: 720px) {
    .cs { padding: 84px 20px 80px; }
    .cs__beast { display: none; }
    .cs__logo { margin-bottom: 24px; }
    .cs__eyebrow { font-size: 13px; letter-spacing: 2.5px; }
    .cs__title { font-size: 38px; }
    .cs__accent { font-size: 21px; letter-spacing: 7px; padding-left: 7px; }
    .cs__lead { font-size: 16px; margin-top: 24px; }
    .cs__progress { margin-top: 32px; }
    .cs__social { gap: 22px; margin-top: 30px; }
}

@media (max-width: 380px) {
    .cs__title { font-size: 32px; }
    .cs__accent { font-size: 18px; letter-spacing: 5px; }
}

/* ======================= ЗМЕНШЕНИЙ РУХ (a11y) =========================== *
   _root.css уже глушить тривалості анімацій/переходів. Тут додатково
   зупиняємо нескінченні цикли, щоб нічого не «дихало» й не рухалось. */
@media (prefers-reduced-motion: reduce) {
    .cs__bg,
    .cs__beast,
    .cs__grain,
    .cs__bar-fill { animation: none; }
    .cs__bg { transform: none; }
    .cs__beast { transform: translateY(0); }
    .cs__bar-fill { left: 0; width: 100%; }   /* статична повна смуга */
}