/* ============================================================
   Liquid Glass Effects — GrabClip Landing
   Pure dark — NO blue tint. Only brand accent colors.
   ============================================================ */

/* --- Base Glass Frost --- */
.glass-frost {
    background: rgba(12, 12, 12, 0.75);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* --- Glass Card --- */
.glass-card {
    background: rgba(14, 14, 14, 0.70);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.02) inset;
    position: relative;
    overflow: hidden;
}

/* Glass card shine on hover */
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.02) 0%,
        transparent 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

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

/* --- Glass Elevated --- */
.glass-elevated {
    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* --- Liquid Refraction — brand accent only --- */
.glass-liquid {
    background: linear-gradient(
        135deg,
        rgba(255, 61, 26, 0.03) 0%,
        rgba(12, 12, 12, 0.75) 30%,
        rgba(255, 229, 0, 0.02) 70%,
        rgba(12, 12, 12, 0.75) 100%
    );
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.04),
        inset 0 -2px 8px rgba(0, 0, 0, 0.15);
}

/* --- Shine Sweep on hover --- */
.glass-shine-sweep {
    position: relative;
    overflow: hidden;
}

.glass-shine-sweep::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 55%,
        transparent 100%
    );
    transform: skewX(-25deg);
    transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 2;
}

.glass-shine-sweep:hover::after {
    left: 150%;
}

/* --- Glass Glow Border --- */
.glass-glow {
    position: relative;
}

.glass-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 61, 26, 0.2) 0%,
        transparent 40%,
        transparent 60%,
        rgba(255, 61, 26, 0.1) 100%
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.glass-glow:hover::before {
    opacity: 1;
}

/* --- Liquid Blob Morphing --- */
@keyframes liquid-morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50% { border-radius: 50% 60% 30% 60% / 30% 50% 70% 50%; }
    75% { border-radius: 60% 30% 60% 40% / 70% 40% 50% 60%; }
}

.liquid-blob {
    animation: liquid-morph 8s ease-in-out infinite;
}

/* --- Glass Accent Tint --- */
.glass-accent {
    background: rgba(255, 61, 26, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 61, 26, 0.12);
}

/* --- Glass Signal Tint --- */
.glass-signal {
    background: rgba(255, 229, 0, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 229, 0, 0.1);
}

/* --- Frosted Divider --- */
.glass-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 20%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.06) 80%,
        transparent 100%
    );
    border: none;
    margin: 40px 0;
}