/* ===================== Карусель ===================== */
.carousel { position: relative; outline: none; -webkit-user-select: none; user-select: none; }
.carousel:focus-visible .carousel-viewport { box-shadow: 0 0 0 2px #7C3AED; }

.carousel-viewport {
    position: relative; overflow: hidden; width: 100%;
    aspect-ratio: 16 / 10; max-height: min(62vh, 580px);
    border-radius: 1rem; border: 1px solid rgba(255,255,255,.1);
    background: #0d0d18; touch-action: pan-y;
}
.carousel-track {
    display: flex; height: 100%;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}
.carousel-track.dragging { transition: none; }

.carousel-slide {
    position: relative; flex: 0 0 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* Размытая подложка из самого фото — фото целиком, без чёрных полос */
.carousel-slide::before {
    content: ""; position: absolute; inset: -24px; z-index: 0;
    background: var(--bg) center / cover no-repeat;
    filter: blur(26px) brightness(.45) saturate(1.3);
    transform: scale(1.1);
}
.carousel-slide img, .carousel-slide video {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.carousel-slide img { cursor: zoom-in; -webkit-user-drag: none; }
.carousel-slide img { animation: slide-img-in .7s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes slide-img-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

.carousel-btn, .carousel-expand {
    position: absolute; z-index: 5; border: 0; cursor: pointer; color: #fff;
    background: rgba(10, 10, 20, .55); backdrop-filter: blur(8px);
    display: grid; place-items: center;
    transition: background .2s, transform .2s, opacity .2s;
}
.carousel-btn {
    top: 50%; width: 46px; height: 46px; border-radius: 50%;
    font-size: 30px; line-height: 1; padding-bottom: 4px;
    transform: translateY(-50%); opacity: 0;
}
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-viewport:hover .carousel-btn, .carousel:focus-within .carousel-btn { opacity: 1; }
.carousel-btn:hover { background: #7C3AED; transform: translateY(-50%) scale(1.12); }
@media (hover: none) { .carousel-btn { opacity: .85; width: 40px; height: 40px; } }

.carousel-expand {
    top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 10px; font-size: 18px;
    opacity: 0;
}
.carousel-viewport:hover .carousel-expand, .carousel:focus-within .carousel-expand { opacity: 1; }
.carousel-expand:hover { background: #7C3AED; transform: scale(1.1); }
@media (hover: none) { .carousel-expand { opacity: .85; } }

.carousel-counter {
    position: absolute; z-index: 5; left: 12px; bottom: 12px;
    font-size: 12px; font-weight: 600; letter-spacing: .04em;
    padding: 4px 10px; border-radius: 999px; background: rgba(10,10,20,.6); backdrop-filter: blur(8px);
}
.carousel-counter:empty { display: none; }

.carousel-thumbs {
    display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin; scrollbar-color: #7C3AED transparent;
}
.carousel-thumb {
    flex: 0 0 76px; aspect-ratio: 4 / 3; padding: 0; cursor: pointer;
    border-radius: .6rem; overflow: hidden; background: #12121e;
    border: 2px solid transparent; opacity: .5;
    transition: opacity .25s, border-color .25s, transform .25s;
}
.carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-thumb:hover { opacity: .85; transform: translateY(-2px); }
.carousel-thumb.is-active { opacity: 1; border-color: #7C3AED; }
.carousel-thumb-video { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-size: 18px; }

/* ===================== Просмотрщик фото (lightbox) ===================== */
.lb {
    position: fixed; inset: 0; z-index: 400; display: none;
    background: rgba(4, 4, 10, .97);
    color: #fff; touch-action: none;
}
/* На время просмотра прячем шапку и плавающие элементы сайта */
body.lb-lock nav[data-nav], body.lb-lock .fx-top, body.lb-lock .fx-progress, body.lb-lock .fx-cursor-glow { visibility: hidden; }
.lb.open { display: block; animation: lb-fade .3s ease both; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

.lb-stage {
    position: absolute; inset: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-in;
}
.lb-stage.zoomed { cursor: grab; }
.lb-stage.panning { cursor: grabbing; }
.lb-img {
    max-width: 92vw; max-height: 86vh; object-fit: contain;
    transform-origin: center center; will-change: transform;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
    -webkit-user-drag: none; user-select: none;
    box-shadow: 0 20px 80px rgba(0,0,0,.6); border-radius: 6px;
}
.lb-img.no-anim { transition: opacity .3s ease; }
.lb-img.loading { opacity: 0; }
.lb-img.enter-next { animation: lb-in-next .4s cubic-bezier(.22, 1, .36, 1) both; }
.lb-img.enter-prev { animation: lb-in-prev .4s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes lb-in-next { from { opacity: 0; transform: translateX(60px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lb-in-prev { from { opacity: 0; transform: translateX(-60px) scale(.97); } to { opacity: 1; transform: none; } }

.lb-top {
    position: absolute; z-index: 3; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
}
.lb-count { font-size: 14px; font-weight: 600; opacity: .9; }
.lb-actions { display: flex; gap: 8px; align-items: center; }
.lb-btn {
    width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; text-decoration: none;
    background: rgba(255,255,255,.1); font-size: 20px; line-height: 1;
    display: grid; place-items: center; transition: background .2s, transform .2s;
}
.lb-btn:hover { background: #7C3AED; transform: scale(1.1); }

.lb-nav {
    position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
    width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
    background: rgba(255,255,255,.1); font-size: 34px; padding-bottom: 5px;
    display: grid; place-items: center; transition: background .2s, transform .2s;
}
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-nav:hover { background: #7C3AED; transform: translateY(-50%) scale(1.1); }
.lb.single .lb-nav { display: none; }

.lb-caption {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; text-align: center;
    padding: 28px 80px 18px; font-size: 14px; color: #D1D5DB;
    background: linear-gradient(to top, rgba(0,0,0,.65), transparent); pointer-events: none;
}
.lb-hint { display: block; margin-top: 4px; font-size: 12px; color: #9CA3AF; }

.lb-spinner {
    position: absolute; z-index: 2; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border: 3px solid rgba(255,255,255,.2); border-top-color: #7C3AED; border-radius: 50%;
    animation: lb-spin .8s linear infinite; display: none;
}
.lb.is-loading .lb-spinner { display: block; }
@keyframes lb-spin { to { transform: rotate(360deg); } }

body.lb-lock { overflow: hidden; }

@media (max-width: 640px) {
    .lb-nav { width: 44px; height: 44px; font-size: 28px; }
    .lb-prev { left: 8px; }
    .lb-next { right: 8px; }
    .lb-caption { padding: 24px 16px 14px; }
    .lb-hint { display: none; }
}

/* Описание проекта: картинки внутри текста тоже открываются в просмотрщике */
.prose img[data-lightbox] { cursor: zoom-in; border-radius: .75rem; transition: transform .3s, box-shadow .3s; }
.prose img[data-lightbox]:hover { transform: scale(1.01); box-shadow: 0 10px 40px rgba(124,58,237,.25); }

@media (prefers-reduced-motion: reduce) {
    .carousel-track, .lb-img, .carousel-slide img { transition: none !important; animation: none !important; }
}