/*
   lens_surface.css | Enhanced Liquid Glass Effect (Four-Layer Model)

   Inspired by the official解析:
   1. 高光层 (Highlight Layer): 勾勒轮廓 (Outlines contour)
   2. 模糊层 (Blur Layer): 负责可视性和阅性 (Visibility and readability)
   3. 阴影层 (Shadow Layer): 提供距离和景深感 (Distance and depth)
   4. 透视层 (Perspective Layer): 凸透镜设计, 底下内容透过的反射效果 (Convex lens design, reflection of underlying content)
*/

:root {
    /* Define transition curves if not already globally available or for specific use */
    --lens-ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
    /* --lens-liquid-motion: cubic-bezier(0.16, 1, 0.3, 1); */ /* Example, can be used for more dynamic effects */
}

.lens-surface {
    position: relative;
    z-index: 1; /* Ensure it's above other static content if necessary */
    border-radius: var(--radius-xl); /* Consistent rounded corners, adjust as needed or use inherit */
    padding: 16px; /* Inner spacing, adjust based on content */

    /* Layer 2: Blur Layer */
    background: rgba(50, 50, 50, 0.25); /* Darker, more translucent base - adjust opacity for desired effect */
    backdrop-filter: blur(8px) saturate(1.1); /* Crisper blur, slight saturation boost */
    -webkit-backdrop-filter: blur(8px) saturate(1.1);

    /* Layer 1: Highlight Layer (Contour part) */
    border: 1px solid rgba(255, 255, 255, 0.12); /* Subtler border */

    /* Layer 3: Shadow Layer & Layer 1: Highlight Layer (Inner Contour) */
    box-shadow:
        /* Inner highlights for contour */
        inset 0px 1px 2px rgba(255, 255, 255, 0.1), /* Softer top inner highlight */
        inset 0px -1px 2px rgba(255, 255, 255, 0.05), /* Softer bottom inner highlight */
        /* Main outer shadow for depth */
        0 30px 60px -15px rgba(0, 0, 0, 0.3), /* Softer, more spread out shadow */
        0 0 0 0.5px rgba(255, 255, 255, 0.08); /* Very subtle outer border highlight */

    /* Layer 4: Perspective Layer (Foundation) */
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg); /* Initial state for potential 3D interactions */
    
    /* Use existing project transitions or the one defined above */
    transition: transform 0.5s var(--lens-ease-apple),
                box-shadow 0.5s var(--lens-ease-apple),
                background 0.5s var(--lens-ease-apple);
}

/* Layer 1: Highlight Layer (Central Sheen / Volumetric Glow) */


/* Layer 1: Highlight Layer (Edge Highlights / Rim) */
.lens-surface::after {
    content: "";
    position: absolute;
    inset: -1px; /* Slightly outside to create a rim effect */
    border-radius: inherit;
    pointer-events: none;
    
    /* Combined highlights for a more defined edge */
    box-shadow:
        inset 0 1.5px 3px rgba(255, 255, 255, 0.6),  /* Stronger top highlight */
        inset 0 -1px 2px rgba(0, 0, 0, 0.15);     /* Subtle bottom rim shadow */
    
    /* mix-blend-mode: screen; /* Screen can make highlights pop, adjust as needed */
    opacity: 0.8;
    z-index: 3; /* Above the sheen */
    transform: translateZ(10px); /* Even further above for a distinct rim */
    transition: opacity 0.5s var(--lens-ease-apple), transform 0.5s var(--lens-ease-apple);
}