/*
 * Optimized Glass Style - Inspired by Apple Human Interface Guidelines
 */
.glass-container-apple {
    position: relative;
    overflow: hidden; /* Key: Ensure pseudo-elements don't overflow the container */
    border-radius: 24px; /* Adopt rounder iOS-style rounded corners */
    padding: 20px;
    margin-bottom: 20px;
    
    /* 1. Background Blur - Core Glass Texture */
    background: rgba(255, 255, 255, 0.15); /* Reduce opacity to make the blur effect more prominent */
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);

    /* 2. Exquisite Borders and Shadows */
    /* Use inset box-shadow to simulate a highlight border, softer than border */
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.2), /* 1px internal highlight border */
        0 8px 32px rgba(0, 0, 0, 0.2); /* Softer and more natural external shadow */
}

/* 3. Dynamic Halo Effect - Simulate Ambient Light */
.glass-container-apple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    
    /* Create a soft, blurred radial gradient as the light source */
    background: radial-gradient(circle at 25% 25%, rgba(100, 150, 255, 0.2), transparent 40%);
    
    /* Animation: Make the halo move slowly and smoothly */
    animation: aurora-glow 20s ease-in-out infinite;
    transform-origin: center center;
}

/* 4. Material Noise - Enhance Realism (Optional but Highly Effective) */
.glass-container-apple::after {
    content: '';
    position: absolute;
    inset: 0;
    
    /* Use SVG filter or tiled image to create noise texture */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.75" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.05"/></svg>');
    
    pointer-events: none; /* Ensure the noise layer doesn't interfere with mouse events */
}


@keyframes aurora-glow {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    25% {
        transform: translate(0%, -50%) rotate(90deg) scale(0.9);
    }
    50% {
        transform: translate(0%, 0%) rotate(180deg) scale(1.1);
    }
    75% {
        transform: translate(-50%, 0%) rotate(270deg) scale(0.95);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}