/* =====================================================
   WORKS SECTION - BEAUTIFUL TEXT CARDS
   ===================================================== */

.works {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--color-bg), var(--purple-50), var(--color-bg));
}

/* Works Grid */
.works__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Work Card */
.work-card {
    position: relative;
    background: white;
    border-radius: 24px;
    padding: 40px 32px;
    border: 1px solid rgba(139, 92, 246, 0.1);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.08);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Gradient border on hover */
.work-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, var(--purple-500), var(--magenta-500), var(--cyan-400));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.work-card:hover::before {
    opacity: 1;
}

/* Glow effect */
.work-card::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.work-card:hover::after {
    opacity: 1;
}

.work-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
    border-color: transparent;
}

/* Number */
.work-card__number {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple-300);
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.work-card:hover .work-card__number {
    color: var(--purple-500);
}

/* Title */
.work-card__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.work-card:hover .work-card__title {
    background: linear-gradient(135deg, var(--purple-600), var(--magenta-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Description */
.work-card__desc {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin-bottom: 20px;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

/* Badge */
.work-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(217, 70, 239, 0.1));
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple-600);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.work-card:hover .work-card__badge {
    background: linear-gradient(135deg, var(--purple-500), var(--magenta-500));
    color: white;
}

/* Arrow */
.work-card__arrow {
    position: absolute;
    bottom: 32px;
    right: 32px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--purple-300);
    background: rgba(139, 92, 246, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 1;
}

.work-card:hover .work-card__arrow {
    background: linear-gradient(135deg, var(--purple-500), var(--magenta-500));
    color: white;
    transform: translateX(5px);
}

/* =====================================================
   ENHANCED WORKS GRID - MAGNETIC & INTERACTIVE
   ===================================================== */

.works {
    position: relative;
    overflow: visible;
}

/* Bento Grid */
.works__grid-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(240px, auto);
    gap: 24px;
    position: relative;
}

/* Card positioning */
.works__grid-bento .work-card:nth-child(1) { grid-column: span 6; grid-row: span 2; }
.works__grid-bento .work-card:nth-child(2) { grid-column: span 3; }
.works__grid-bento .work-card:nth-child(3) { grid-column: span 3; }
.works__grid-bento .work-card:nth-child(4) { grid-column: span 4; }
.works__grid-bento .work-card:nth-child(5) { grid-column: span 4; }
.works__grid-bento .work-card:nth-child(6) { grid-column: span 4; }

/* Enhanced Work Card */
.work-card {
    position: relative;
    background: white;
    border-radius: 28px;
    padding: 0;
    border: 1px solid rgba(139, 92, 246, 0.1);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 
        0 4px 20px rgba(139, 92, 246, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Animated gradient border */
.work-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, 
        var(--purple-500), 
        var(--magenta-500), 
        var(--cyan-400),
        var(--purple-500)
    );
    background-size: 300% 300%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: gradientRotate 6s ease infinite;
}

@keyframes gradientRotate {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.work-card:hover::before {
    opacity: 1;
}

/* Mesh gradient background */
.work-card__bg-icon {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 120%;
    opacity: 0.03;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.work-card__bg-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--purple-600);
}

.work-card:hover .work-card__bg-icon {
    opacity: 0.08;
    transform: scale(1.2) rotate(10deg);
}

/* Content wrapper */
.work-card__content {
    position: relative;
    z-index: 2;
    padding: 40px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Icon box with 3D effect */
.work-card__icon-box {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(217, 70, 239, 0.05));
    border-radius: 20px;
    border: 1px solid rgba(139, 92, 246, 0.1);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.work-card__icon-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--purple-500), var(--magenta-500));
    opacity: 0;
    transition: opacity 0.5s ease;
}

.work-card__icon-box svg {
    width: 40px;
    height: 40px;
    stroke: var(--purple-500);
    stroke-width: 1.5;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1;
}

.work-card:hover .work-card__icon-box {
    transform: scale(1.15) rotate(-8deg);
    box-shadow: 
        0 20px 40px rgba(139, 92, 246, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.work-card:hover .work-card__icon-box::before {
    opacity: 1;
}

.work-card:hover .work-card__icon-box svg {
    stroke: white;
    transform: scale(1.1);
}

/* Title */
.work-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    transition: all 0.4s ease;
    line-height: 1.2;
}

.work-card:hover .work-card__title {
    background: linear-gradient(135deg, var(--purple-600), var(--magenta-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateX(4px);
}

/* Description */
.work-card__desc {
    font-size: 0.95rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin: 0;
}

/* Arrow indicator */
.work-card__arrow {
    margin-top: auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--purple-500);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    align-self: flex-start;
}

.work-card:hover .work-card__arrow {
    background: linear-gradient(135deg, var(--purple-500), var(--magenta-500));
    color: white;
    transform: translateX(8px) scale(1.1);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

/* Large card specific styles */
.works__grid-bento .work-card:nth-child(1) .work-card__icon-box {
    width: 100px;
    height: 100px;
    border-radius: 24px;
}

.works__grid-bento .work-card:nth-child(1) .work-card__icon-box svg {
    width: 50px;
    height: 50px;
}

.works__grid-bento .work-card:nth-child(1) .work-card__title {
    font-size: 2rem;
}

/* Hover ripple effect */
.work-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.1), transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.work-card:hover::after {
    width: 500px;
    height: 500px;
}

/* Floating animation on hover */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.work-card:hover {
    transform: translateY(-12px);
    box-shadow: 
        0 30px 60px rgba(139, 92, 246, 0.25),
        0 0 0 1px rgba(139, 92, 246, 0.1);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .works__grid-bento {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .works__grid-bento .work-card:nth-child(1) { grid-column: span 6; grid-row: span 1; }
    .works__grid-bento .work-card:nth-child(2) { grid-column: span 3; }
    .works__grid-bento .work-card:nth-child(3) { grid-column: span 3; }
    .works__grid-bento .work-card:nth-child(4) { grid-column: span 2; }
    .works__grid-bento .work-card:nth-child(5) { grid-column: span 2; }
    .works__grid-bento .work-card:nth-child(6) { grid-column: span 2; }
}

@media (max-width: 768px) {
    .works__grid-bento {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        grid-auto-rows: minmax(180px, auto);
    }
    
    .works__grid-bento .work-card {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
    
    .works__grid-bento .work-card:nth-child(1) {
        grid-column: span 2 !important;
    }
    
    .work-card__content {
        padding: 28px 24px;
    }
    
    .work-card__icon-box {
        width: 64px;
        height: 64px;
    }
    
    .work-card__icon-box svg {
        width: 32px;
        height: 32px;
    }
    
    .work-card__title {
        font-size: 1.2rem;
    }
}

/* =====================================================
   WORKS GALLERY MODAL
   ===================================================== */

.works-gallery {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.works-gallery.is-open {
    opacity: 1;
    visibility: visible;
}

.works-gallery__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.works-gallery__container {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
}

.works-gallery.is-open .works-gallery__container {
    transform: translateY(0) scale(1);
}

.works-gallery__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

.works-gallery__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1025;
}

.works-gallery__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3e8ff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.works-gallery__close:hover {
    background: #a855f7;
}

.works-gallery__close:hover svg {
    stroke: white;
}

.works-gallery__close svg {
    width: 20px;
    height: 20px;
    stroke: #6b7280;
    stroke-width: 2;
}

.works-gallery__content {
    padding: 32px;
    max-height: calc(85vh - 100px);
    overflow-y: auto;
}

.works-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.works-gallery__item {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #f3e8ff, #fce7f3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #7c3aed;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.works-gallery__item:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}

.works-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
    .works__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .works__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .work-card {
        padding: 28px 24px;
    }
    
    .work-card__title {
        font-size: 1.25rem;
    }
    
    .work-card__number {
        top: 16px;
        right: 16px;
        font-size: 0.75rem;
    }
    
    .work-card__arrow {
        bottom: 20px;
        right: 20px;
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
    
    .works-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .works__grid {
        grid-template-columns: 1fr;
    }
    
    .works-gallery__grid {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   COSMIC PHOTO BACKGROUND — Immersive Stars & Nebula
   Light theme: soft purple constellations
   Dark theme: deep space with bright stars
   ===================================================== */

/* ===== LIGHT THEME — Мягкое фиолетовое свечение ===== */

.works-gallery__item {
    position: relative;
    background: linear-gradient(135deg, #f0e6ff, #e8dff5, #f5eeff);
    overflow: hidden;
}

/* Мягкие созвездия на светлом фоне */
.works-gallery__item::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Фиолетовые звёздочки-точки */
        radial-gradient(2px 2px at 8% 12%, rgba(139, 92, 246, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 18% 35%, rgba(168, 85, 247, 0.4), transparent),
        radial-gradient(2.5px 2.5px at 32% 22%, rgba(139, 92, 246, 0.6), transparent),
        radial-gradient(1px 1px at 42% 58%, rgba(192, 132, 252, 0.3), transparent),
        radial-gradient(2px 2px at 55% 15%, rgba(217, 70, 239, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 65% 42%, rgba(139, 92, 246, 0.35), transparent),
        radial-gradient(2px 2px at 78% 28%, rgba(168, 85, 247, 0.5), transparent),
        radial-gradient(1px 1px at 88% 62%, rgba(192, 132, 252, 0.3), transparent),
        radial-gradient(2px 2px at 25% 75%, rgba(139, 92, 246, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 48% 85%, rgba(217, 70, 239, 0.3), transparent),
        radial-gradient(1px 1px at 72% 78%, rgba(168, 85, 247, 0.35), transparent),
        radial-gradient(2px 2px at 92% 88%, rgba(139, 92, 246, 0.4), transparent),
        /* Мягкие туманности */
        radial-gradient(ellipse 120px 80px at 20% 30%, rgba(139, 92, 246, 0.08), transparent 70%),
        radial-gradient(ellipse 100px 120px at 80% 60%, rgba(217, 70, 239, 0.06), transparent 70%),
        radial-gradient(ellipse 150px 60px at 50% 80%, rgba(99, 102, 241, 0.05), transparent 70%);
    z-index: 0;
    pointer-events: none;
    animation: lightStarsTwinkle 5s ease-in-out infinite alternate;
}

@keyframes lightStarsTwinkle {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Мягкое свечение по краям */
.works-gallery__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 80% at center, transparent 40%, rgba(139, 92, 246, 0.04) 100%);
    z-index: 0;
    pointer-events: none;
}

.works-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.1));
}

/* ===== DARK THEME — Глубокий космос ===== */

[data-theme="dark"] .works-gallery__item {
    background: linear-gradient(135deg, #050510, #0a0520, #080416, #0c0828);
}

[data-theme="dark"] .works-gallery__item::before {
    background:
        /* Яркие белые звёзды */
        radial-gradient(2px 2px at 5% 10%, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(1px 1px at 12% 30%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 22% 18%, rgba(192, 132, 252, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 35% 55%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 42% 8%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 52% 42%, rgba(168, 85, 247, 0.85), transparent),
        radial-gradient(1px 1px at 58% 72%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(2.5px 2.5px at 68% 25%, rgba(217, 70, 239, 0.8), transparent),
        radial-gradient(1px 1px at 75% 58%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1.5px 1.5px at 82% 12%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 88% 45%, rgba(139, 92, 246, 0.75), transparent),
        radial-gradient(1px 1px at 92% 78%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 15% 65%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 28% 82%, rgba(168, 85, 247, 0.6), transparent),
        radial-gradient(1px 1px at 45% 92%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1.5px 1.5px at 65% 88%, rgba(192, 132, 252, 0.5), transparent),
        radial-gradient(1px 1px at 78% 95%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(3px 3px at 50% 50%, rgba(168, 85, 247, 0.3), transparent),
        /* Яркие туманности */
        radial-gradient(ellipse 150px 100px at 15% 25%, rgba(139, 92, 246, 0.2), transparent 70%),
        radial-gradient(ellipse 120px 150px at 85% 65%, rgba(217, 70, 239, 0.15), transparent 70%),
        radial-gradient(ellipse 180px 80px at 50% 85%, rgba(99, 102, 241, 0.12), transparent 70%),
        radial-gradient(ellipse 100px 100px at 70% 15%, rgba(168, 85, 247, 0.1), transparent 70%);
    animation: darkStarsTwinkle 4s ease-in-out infinite alternate;
}

@keyframes darkStarsTwinkle {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

[data-theme="dark"] .works-gallery__item::after {
    background:
        /* Мягкое свечение вокруг фото */
        radial-gradient(ellipse 60% 60% at center, rgba(139, 92, 246, 0.05), transparent 60%),
        /* Виньетка по краям */
        radial-gradient(ellipse 100% 100% at center, transparent 30%, rgba(5, 5, 16, 0.4) 100%);
}

[data-theme="dark"] .works-gallery__item img {
    filter: drop-shadow(0 0 25px rgba(139, 92, 246, 0.2))
            drop-shadow(0 0 50px rgba(168, 85, 247, 0.1));
}

/* ===== LIGHTBOX — Полноэкранный космос ===== */

/* Light theme lightbox */
.photo-lightbox__image-wrap {
    position: relative;
    background: linear-gradient(135deg, #f0e6ff, #e8dff5, #ede5fa, #f5eeff);
    overflow: hidden;
}

.photo-lightbox__image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2.5px 2.5px at 6% 14%, rgba(139, 92, 246, 0.45), transparent),
        radial-gradient(2px 2px at 15% 38%, rgba(168, 85, 247, 0.35), transparent),
        radial-gradient(3px 3px at 28% 22%, rgba(139, 92, 246, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 38% 62%, rgba(217, 70, 239, 0.3), transparent),
        radial-gradient(2px 2px at 50% 12%, rgba(192, 132, 252, 0.4), transparent),
        radial-gradient(2.5px 2.5px at 62% 48%, rgba(139, 92, 246, 0.35), transparent),
        radial-gradient(2px 2px at 75% 28%, rgba(168, 85, 247, 0.45), transparent),
        radial-gradient(1.5px 1.5px at 85% 58%, rgba(192, 132, 252, 0.3), transparent),
        radial-gradient(2px 2px at 92% 18%, rgba(139, 92, 246, 0.4), transparent),
        radial-gradient(2px 2px at 20% 78%, rgba(217, 70, 239, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 45% 88%, rgba(139, 92, 246, 0.35), transparent),
        radial-gradient(2px 2px at 68% 82%, rgba(168, 85, 247, 0.3), transparent),
        /* Линии созвездий */
        linear-gradient(45deg, transparent 48%, rgba(139, 92, 246, 0.03) 49%, rgba(139, 92, 246, 0.03) 51%, transparent 52%),
        /* Мягкие облака */
        radial-gradient(ellipse 200px 120px at 20% 35%, rgba(139, 92, 246, 0.07), transparent 70%),
        radial-gradient(ellipse 180px 200px at 80% 55%, rgba(217, 70, 239, 0.05), transparent 70%),
        radial-gradient(ellipse 250px 100px at 50% 85%, rgba(99, 102, 241, 0.04), transparent 70%);
    z-index: 0;
    pointer-events: none;
    animation: lightStarsTwinkle 5s ease-in-out infinite alternate;
}

.photo-lightbox__image {
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 24px rgba(139, 92, 246, 0.12));
}

/* Dark theme lightbox */
[data-theme="dark"] .photo-lightbox__image-wrap {
    background: linear-gradient(135deg, #030308, #070418, #050312, #0a0525, #060414);
}

[data-theme="dark"] .photo-lightbox__image-wrap::before {
    background:
        /* Слой 1: Яркие звёзды */
        radial-gradient(2.5px 2.5px at 3% 8%, white, transparent),
        radial-gradient(1.5px 1.5px at 10% 25%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 18% 15%, rgba(192, 132, 252, 0.95), transparent),
        radial-gradient(1px 1px at 25% 48%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(2px 2px at 32% 32%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.5px 1.5px at 40% 65%, rgba(168, 85, 247, 0.8), transparent),
        radial-gradient(2.5px 2.5px at 48% 10%, white, transparent),
        radial-gradient(1px 1px at 55% 52%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 62% 38%, rgba(217, 70, 239, 0.85), transparent),
        radial-gradient(1px 1px at 68% 72%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(2px 2px at 75% 18%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 82% 55%, rgba(192, 132, 252, 0.75), transparent),
        radial-gradient(2px 2px at 88% 30%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 93% 68%, rgba(168, 85, 247, 0.7), transparent),
        radial-gradient(2.5px 2.5px at 95% 12%, white, transparent),
        /* Слой 2: Мелкие далёкие звёзды */
        radial-gradient(1px 1px at 7% 42%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 15% 78%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 28% 62%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1px 1px at 38% 88%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 52% 82%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 72% 92%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 85% 82%, rgba(255, 255, 255, 0.35), transparent),
        /* Слой 3: Цветные туманности */
        radial-gradient(ellipse 250px 150px at 15% 30%, rgba(139, 92, 246, 0.22), transparent 70%),
        radial-gradient(ellipse 200px 250px at 85% 60%, rgba(217, 70, 239, 0.18), transparent 70%),
        radial-gradient(ellipse 300px 120px at 50% 90%, rgba(99, 102, 241, 0.15), transparent 70%),
        radial-gradient(ellipse 150px 150px at 65% 15%, rgba(168, 85, 247, 0.12), transparent 70%),
        radial-gradient(ellipse 180px 100px at 35% 70%, rgba(192, 132, 252, 0.08), transparent 70%);
    animation: darkStarsTwinkle 4s ease-in-out infinite alternate;
}

[data-theme="dark"] .photo-lightbox__image {
    filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.25))
            drop-shadow(0 0 60px rgba(168, 85, 247, 0.12));
}

/* ===== ADMIN — Portfolio photo cards ===== */
.portfolio-photo-card__img {
    object-fit: contain;
    background:
        radial-gradient(2px 2px at 15% 20%, rgba(139, 92, 246, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 40% 50%, rgba(168, 85, 247, 0.3), transparent),
        radial-gradient(2px 2px at 70% 30%, rgba(192, 132, 252, 0.35), transparent),
        radial-gradient(1px 1px at 85% 70%, rgba(139, 92, 246, 0.25), transparent),
        radial-gradient(ellipse 60% 50% at 30% 50%, rgba(139, 92, 246, 0.06), transparent 70%),
        linear-gradient(135deg, #f0e6ff, #e8dff5, #f5eeff);
}

[data-theme="dark"] .portfolio-photo-card__img {
    background:
        radial-gradient(2px 2px at 15% 20%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 40% 50%, rgba(168, 85, 247, 0.7), transparent),
        radial-gradient(2px 2px at 70% 30%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 85% 70%, rgba(192, 132, 252, 0.5), transparent),
        radial-gradient(ellipse 60% 50% at 30% 50%, rgba(139, 92, 246, 0.15), transparent 70%),
        linear-gradient(135deg, #050510, #0a0520, #080416);
}