/* Glass Effect System — Floating Magnifying Glass Lens */

/* =====================================================
   GLASS MAGNIFIER — круглая плавающая лупа для перетаскивания
   Проявляет нижнее изображение через прозрачный круг
===================================================== */

.glass-magnifier {
    position: absolute;
    width: 300px;   /* было 240px → +25% */
    height: 300px;
    border-radius: 50%;
    z-index: 4; /* Поверх всего, включая текст */
    cursor: grab;
    opacity: 1;
    
    /* Начальная позиция — правый верхний угол */
    right: 5%;
    top: 15%;
    left: auto;
    transform: none;
    
    /* Прозрачный фон с лёгким тоном */
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.02) 100%
    );
    
    /* Тонкая рамка лупы */
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.12),
        inset 0 0 0 3px rgba(255, 255, 255, 0.4),
        inset 0 0 0 4px rgba(0, 0, 0, 0.1);
    
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: box-shadow 0.3s ease;
}

/* При перетаскивании */
.glass-magnifier.dragging {
    cursor: grabbing;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.18),
        inset 0 0 0 3px rgba(255, 255, 255, 0.5),
        inset 0 0 0 4px rgba(0, 0, 0, 0.15);
}

/* Внутреннее кольцо лупы - более тонкое */
.glass-magnifier::before {
    content: '';
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

/* Солнечный блик на стекле лупы */
.glass-magnifier::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 35% 35%,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.35) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 75%
    );
    filter: blur(3px);
    pointer-events: none;
    opacity: 0.8;
}

/* Маска для reveal-mask на hero (underhader.png) */
.hero-reveal-mask {
    display: none;
}

/* Адаптивный размер на мобильных */
@media (max-width: 768px) {
    .glass-magnifier {
        width: 195px;   /* было 156px → +25% */
        height: 195px;
        right: 4%;
        top: 10%;
        left: auto;
        transform: none;
    }
    
    .hero-reveal-mask {
        background-size: cover;
        -webkit-mask-image: radial-gradient(
            circle 78px at var(--magnifier-x, 50%) var(--magnifier-y, 50%),
            black 0%,
            black 85%,
            rgba(0,0,0,0.5) 95%,
            transparent 100%
        );
        mask-image: radial-gradient(
            circle 78px at var(--magnifier-x, 50%) var(--magnifier-y, 50%),
            black 0%,
            black 85%,
            rgba(0,0,0,0.5) 95%,
            transparent 100%
        );
    }
}

/* =====================================================
   LEGACY — старые стили (оставляем для совместимости)
===================================================== */

.glass-lens {
    display: none;
}

.glass-surface {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: 16px;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.10),
        inset 0  1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.glass-surface::before {
    content: "";
    position: absolute;
    top: 0; left: 5%;
    width: 90%; height: 1px;
    background: rgba(255, 255, 255, 0.85);
    filter: blur(1px);
    pointer-events: none;
    z-index: 2;
}

.hero-image-placeholder.glass-surface {
    background: linear-gradient(135deg, #FBF9F6, #E8D7D3) !important;
    border: 1px solid rgba(201, 166, 107, 0.3) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.hero-image-placeholder.glass-surface::before,
.hero-image-placeholder.glass-surface::after {
    display: none;
}