/* [nexora] 2026-10-22 «Наши работы» (Конструктор проектов): сцена больших видео-карточек, «Показать ещё», премиальный idle-режим.
   Медиа — без обрезки и размытия: object-fit: contain на тёмной подложке. */
#nx-dev-portfolio .nx-proj { --nx-proj-accent: 139, 147, 255; --nx-proj-violet: 167, 139, 250; position: relative; }
#nx-dev-portfolio .nx-proj-stage { position: relative; display: grid; margin: 0 0 24px; }
#nx-dev-portfolio .nx-proj-stage > .nx-proj-slide { grid-area: 1 / 1; }
#nx-dev-portfolio .nx-proj-stage--multi > .nx-proj-slide { transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform .9s cubic-bezier(.4, 0, .2, 1); }
#nx-dev-portfolio .nx-proj-stage--multi > .nx-proj-slide:not(.is-active) { opacity: 0 !important; visibility: hidden; pointer-events: none; transform: scale(.985); }
#nx-dev-portfolio .nx-proj-stage--multi > .nx-proj-slide.is-active { opacity: 1; visibility: visible; transform: none; }
/* без обрезки: кадр целиком */
#nx-dev-portfolio .nx-proj-big .nx-dev-case__media img,
#nx-dev-portfolio .nx-proj-big .nx-dev-case__video,
#nx-dev-portfolio .nx-proj-big .nx-dev-case__media--video.is-playing .nx-dev-case__video { object-fit: contain; object-position: center; background: #0b0d14; }
#nx-dev-portfolio .nx-proj-small .nx-dev-case__media img { object-fit: contain; background: #0f1220; }
/* светящийся ореол активной большой карточки */
#nx-dev-portfolio .nx-proj-stage__glow { position: absolute; inset: -18px; z-index: 0; pointer-events: none; border-radius: 30px; opacity: 0;
    background: radial-gradient(60% 70% at 30% 40%, rgba(var(--nx-proj-violet), .28), transparent 70%), radial-gradient(50% 60% at 80% 70%, rgba(var(--nx-proj-accent), .22), transparent 70%);
    filter: blur(24px); transition: opacity 1.2s ease; }
#nx-dev-portfolio .nx-proj-stage > .nx-dev-case { position: relative; z-index: 1; }
#nx-dev-portfolio .nx-proj.is-idle .nx-proj-stage__glow { opacity: 1; animation: nxProjGlow 9s ease-in-out infinite alternate; }
@keyframes nxProjGlow { 0% { transform: translate3d(-2%, -1%, 0) scale(1); } 100% { transform: translate3d(2%, 1%, 0) scale(1.04); } }
#nx-dev-portfolio .nx-proj .nx-dev-case { transition: box-shadow .9s ease, border-color .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
#nx-dev-portfolio .nx-proj.is-idle .nx-proj-big.is-active,
#nx-dev-portfolio .nx-proj.is-idle .nx-proj-stage:not(.nx-proj-stage--multi) .nx-proj-big { border-color: rgba(var(--nx-proj-violet), .45);
    box-shadow: 0 0 0 1px rgba(var(--nx-proj-violet), .25), 0 30px 80px -30px rgba(124, 92, 255, .75); }
/* малые карточки: деликатный свет по очереди */
#nx-dev-portfolio .nx-proj.is-idle .nx-proj-small.is-spot { border-color: rgba(var(--nx-proj-violet), .38); transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(var(--nx-proj-violet), .18), 0 22px 50px -26px rgba(124, 92, 255, .65); }
/* точки сцены */
#nx-dev-portfolio .nx-proj-dots { position: absolute; z-index: 3; left: 50%; bottom: -30px; transform: translateX(-50%); display: flex; gap: 8px; }
#nx-dev-portfolio .nx-proj-stage--multi { margin-bottom: 54px; }
#nx-dev-portfolio .nx-proj-dot { width: 34px; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; }
#nx-dev-portfolio .nx-proj-dot span { position: relative; display: block; width: 100%; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .16); }
#nx-dev-portfolio .nx-proj-dot span::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, rgb(var(--nx-proj-accent)), rgb(var(--nx-proj-violet))); }
#nx-dev-portfolio .nx-proj-dot.is-active span::after { transform: scaleX(1); }
#nx-dev-portfolio .nx-proj.is-idle .nx-proj-dot.is-active span::after { transform: scaleX(0); animation: nxProjBar var(--nx-proj-slide, 6500ms) linear forwards; }
@keyframes nxProjBar { to { transform: scaleX(1); } }
#nx-dev-portfolio .nx-proj-dot:focus-visible { outline: 2px solid #c58bff; outline-offset: 3px; border-radius: 4px; }
/* «Показать ещё» */
#nx-dev-portfolio .nx-proj-hidden[hidden] { display: none !important; }
#nx-dev-portfolio .nx-proj-small.is-entering { animation: nxProjIn .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes nxProjIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
#nx-dev-portfolio .nx-proj-more { display: flex; justify-content: center; margin: 34px 0 0; }
#nx-dev-portfolio .nx-proj-more__btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px 0 22px; border-radius: 999px; cursor: pointer;
    font-size: 15px; font-weight: 600; letter-spacing: .01em; color: #eef0ff; isolation: isolate;
    background: linear-gradient(145deg, rgba(var(--nx-proj-accent), .20), rgba(16, 19, 32, .55)); border: 1px solid rgba(var(--nx-proj-violet), .38);
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .7), 0 0 0 6px rgba(var(--nx-proj-accent), .08);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease; }
#nx-dev-portfolio .nx-proj-more__btn i { font-size: 18px; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
#nx-dev-portfolio .nx-proj-more__btn[aria-expanded="true"] i { transform: rotate(45deg); }
#nx-dev-portfolio .nx-proj-more__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; font-size: 12.5px;
    background: rgba(var(--nx-proj-violet), .22); border: 1px solid rgba(var(--nx-proj-violet), .35); }
#nx-dev-portfolio .nx-proj-more__btn[aria-expanded="true"] .nx-proj-more__count { display: none; }
#nx-dev-portfolio .nx-proj-more__ring { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .3s ease;
    background: conic-gradient(from var(--nx-proj-ang, 0deg), transparent 0 60%, rgba(var(--nx-proj-violet), .9) 75%, transparent 90%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
#nx-dev-portfolio .nx-proj-more__btn:hover { transform: translateY(-2px); border-color: rgba(var(--nx-proj-violet), .6); box-shadow: 0 18px 40px -16px rgba(124, 92, 255, .75), 0 0 0 8px rgba(var(--nx-proj-accent), .12); }
#nx-dev-portfolio .nx-proj-more__btn:hover .nx-proj-more__ring, #nx-dev-portfolio .nx-proj.is-idle .nx-proj-more__ring { opacity: 1; animation: nxProjSpin 3.2s linear infinite; }
@property --nx-proj-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes nxProjSpin { to { --nx-proj-ang: 360deg; } }
#nx-dev-portfolio .nx-proj-more__btn:focus-visible { outline: 2px solid #c58bff; outline-offset: 4px; }
#nx-dev-portfolio .nx-dev-tag--ph { --nx-tag-c: #a78bfa; }
#nx-dev-portfolio .nx-dev-case__stats li[data-nx-count] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
    #nx-dev-portfolio .nx-proj *, #nx-dev-portfolio .nx-proj *::before, #nx-dev-portfolio .nx-proj *::after { animation: none !important; transition: none !important; }
}
/* [nexora] 2026-10-22 b: «Показать больше» в описании (по границе предложения, без затухания) */
#nx-dev-portfolio .nx-desc__text { margin-bottom: 0; }
#nx-dev-portfolio .nx-desc__rest[hidden] { display: none; }
#nx-dev-portfolio .nx-desc__toggle { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: #b7a6ff; transition: color .2s ease; }
#nx-dev-portfolio .nx-desc__toggle[hidden] { display: none; }
#nx-dev-portfolio .nx-desc__toggle:hover { color: #d9cfff; }
#nx-dev-portfolio .nx-desc__toggle i { transition: transform .3s ease; }
#nx-dev-portfolio .nx-desc.is-open .nx-desc__toggle i { transform: rotate(180deg); }
#nx-dev-portfolio .nx-desc__toggle:focus-visible { outline: 2px solid #c58bff; outline-offset: 3px; border-radius: 4px; }
/* [nexora] 2026-10-22 c: большая карточка без полос и без обрезки.
   Медиа-колонка фиксированной ширины (58%), высота = ширина / собственное соотношение файла (--nx-media-ar, JS читает videoWidth/naturalWidth; запасное 16/9).
   Высоту карточки задаёт медиа; панель текста той же высоты, развёрнутый текст прокручивается внутри панели. */
#nx-dev-portfolio .nx-proj-big.nx-dev-case--feature { display: flex; flex-direction: row; align-items: flex-start; }
#nx-dev-portfolio .nx-proj-big .nx-dev-case__media { position: relative; flex: 0 0 58%; width: 58%; align-self: flex-start;
    aspect-ratio: var(--nx-media-ar, 16 / 9); height: auto; min-height: 0; overflow: hidden; background: #0b0d14; }
#nx-dev-portfolio .nx-proj-big .nx-dev-case__media img,
#nx-dev-portfolio .nx-proj-big .nx-dev-case__media .nx-dev-case__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
#nx-dev-portfolio .nx-proj-big .nx-dev-case__body { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: var(--nx-media-h, auto); max-height: var(--nx-media-h, none);
    overflow-y: auto; overscroll-behavior: contain; justify-content: center; scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, .4) transparent; }
#nx-dev-portfolio .nx-proj-big .nx-desc.is-open { }
#nx-dev-portfolio .nx-proj-big.is-desc-open .nx-dev-case__body { justify-content: flex-start; }
@media (max-width: 991px) {
    #nx-dev-portfolio .nx-proj-big.nx-dev-case--feature { flex-direction: column; align-items: stretch; }
    #nx-dev-portfolio .nx-proj-big .nx-dev-case__media { flex: none; width: 100%; }
    #nx-dev-portfolio .nx-proj-big .nx-dev-case__body { height: auto; max-height: none; overflow: visible; }
}
/* [nexora] 2026-10-22 d: одинаковое появление больших и малых карточек — тот же reveal, что у всей страницы
   (nx-dev-studio.css: opacity .6s ease + translateY(18px) .6s ease, IntersectionObserver). Раньше наш transition
   (тени idle-режима) перекрывал его. Порядок: большая первой (0 мс), малые следом 120/200/280 мс. */
#nx-dev-portfolio .nx-proj .nx-dev-case.nx-dev-reveal { transition: opacity .6s ease, transform .6s ease, box-shadow .9s ease, border-color .9s ease; }
#nx-dev-portfolio .nx-proj-stage > .nx-proj-big.nx-dev-reveal { transition-delay: 0ms !important; }
#nx-dev-portfolio .nx-proj-grid > .nx-proj-small.nx-dev-reveal:nth-child(3n+1) { transition-delay: 120ms !important; }
#nx-dev-portfolio .nx-proj-grid > .nx-proj-small.nx-dev-reveal:nth-child(3n+2) { transition-delay: 200ms !important; }
#nx-dev-portfolio .nx-proj-grid > .nx-proj-small.nx-dev-reveal:nth-child(3n+3) { transition-delay: 280ms !important; }
#nx-dev-portfolio .nx-proj.is-idle .nx-dev-case.nx-dev-reveal.is-in { transition-delay: 0ms !important; }
@media (prefers-reduced-motion: reduce) {
    #nx-dev-portfolio .nx-proj .nx-dev-case.nx-dev-reveal { opacity: 1; transform: none; transition: none !important; }
}