/* ==========================================================================
   redesign-fx.css — слой интерактивности премиум-редизайна.
   Активен только под body.rd. Всё в рамках адекватности: заметно, но со вкусом.
   Контент прячется под reveal ТОЛЬКО когда JS выставил .rd-fx-ready
   (если JS не загрузился — всё видно). Уважает prefers-reduced-motion.
   ========================================================================== */

/* ---- Плавный скролл по якорям ---- */
@media (prefers-reduced-motion: no-preference) {
    html:has(body.rd) { scroll-behavior: smooth; }
}

/* ========================= SCROLL-REVEAL ========================= */
body.rd.rd-fx-ready .rd-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
                transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
body.rd.rd-fx-ready .rd-reveal.is-in { opacity: 1; transform: none; }
/* лёгкий scale-вариант для крупных карточек */
body.rd.rd-fx-ready .rd-reveal.rd-reveal--scale { transform: translateY(22px) scale(.98); }
body.rd.rd-fx-ready .rd-reveal.rd-reveal--scale.is-in { transform: none; }

/* ========================= ХЕДЕР: морфинг при скролле ========================= */
body.rd header {
    transition: background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
body.rd.rd-scrolled header {
    background: rgba(10, 6, 7, .72);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
    border-bottom: 1px solid var(--rd-line);
}

/* ========================= CURSOR-SPOTLIGHT на карточках ========================= */
body.rd .fx-spot { position: relative; isolation: isolate; }
body.rd .fx-spot::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 59, 59, .10), transparent 62%);
    opacity: 0; transition: opacity .3s ease;
}
body.rd .fx-spot:hover::before { opacity: 1; }

/* ========================= КНОПКИ: shine-блик ========================= */
body.rd .rd-btn { position: relative; overflow: hidden; }
body.rd .rd-btn > * { position: relative; z-index: 1; }
body.rd .rd-btn::after {
    content: ""; position: absolute; top: 0; left: -125%; width: 55%; height: 100%; z-index: 0;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
    transform: skewX(-18deg); transition: left .6s ease; pointer-events: none;
}
body.rd .rd-btn:hover::after { left: 135%; }

/* ========================= HERO: живое свечение эмблемы ========================= */
@media (prefers-reduced-motion: no-preference) {
    body.rd .rd-emblem__glow { animation: rdGlowPulse 7s ease-in-out infinite; }
}
@keyframes rdGlowPulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.08); }
}

/* ========================= FILM GRAIN (тонкая плёнка) ========================= */
body.rd::before {
    content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========================= МЕРЦАНИЕ акцентных заголовков ========================= */
@media (prefers-reduced-motion: no-preference) {
    body.rd .rd-h2 .accent,
    body.rd .rd-hero__title .accent {
        background-size: 220% auto;
        animation: rdShimmer 6s linear infinite;
    }
}
@keyframes rdShimmer { to { background-position: 220% center; } }

/* ========================= BACK-TO-TOP ========================= */
body.rd .rd-totop {
    position: fixed; right: 22px; bottom: 22px; z-index: 60;
    width: 46px; height: 46px; display: inline-grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--rd-line-2);
    background: rgba(21, 16, 17, .8); color: var(--rd-red-2);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    cursor: pointer; opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, border-color .2s ease, background-color .2s ease;
}
body.rd.rd-scrolled-far .rd-totop { opacity: 1; transform: none; pointer-events: auto; }
body.rd .rd-totop:hover { border-color: var(--rd-line-red); background: var(--rd-red-soft); transform: translateY(-2px); }
body.rd .rd-totop .material-symbols-outlined { font-size: 24px; }

/* ========================= REDUCED MOTION ========================= */
@media (prefers-reduced-motion: reduce) {
    body.rd.rd-fx-ready .rd-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    body.rd .rd-btn::after,
    body.rd .fx-spot::before { display: none; }
    body.rd::before { display: none; }
}