/* ============================================
   Glass Refraction - IAT FUSION
   Premium glassmorphism with iridescent borders,
   refractive highlights, chromatic aberration,
   and animated internal liquid-light reflections.
   ============================================ */

.glass-refract:not(.float-card) {
    position: relative;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.03) 45%,
            rgba(250, 204, 21, 0.04) 100%);
    backdrop-filter: blur(22px) saturate(1.8) brightness(1.05);
    -webkit-backdrop-filter: blur(22px) saturate(1.8) brightness(1.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(250, 204, 21, 0.10);
    overflow: hidden;
    isolation: isolate;
    transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}

/* Iridescent outer border via conic-gradient mask */
.glass-refract::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 180deg,
        rgba(250, 204, 21, .55),
        rgba(30, 64, 175, .45),
        rgba(127, 29, 29, .50),
        rgba(255, 255, 255, .55),
        rgba(250, 204, 21, .55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .55;
    animation: glassSpin 12s linear infinite;
    z-index: 1;
}

/* Refractive top highlight band */
.glass-refract::after {
    content: '';
    position: absolute;
    top: 0; left: -10%;
    width: 120%; height: 60%;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.05) 40%,
        transparent 70%);
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
}

@keyframes glassSpin {
    to { transform: rotate(360deg); }
}

.glass-refract:not(.float-card):hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 40px 100px -20px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(250, 204, 21, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

/* Chromatic-aberration edge accent on hover */
.glass-refract:hover::before {
    opacity: .9;
    filter: blur(.4px) drop-shadow(1px 0 0 rgba(255, 0, 80, .35))
                       drop-shadow(-1px 0 0 rgba(0, 200, 255, .35));
}

/* ---- Apply to existing components ---- */
.float-card.glass-refract {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.02));
}

.feature-card.glass-refract {
    border-radius: 22px;
}

/* keep child content above pseudo layers */
.glass-refract > * { position: relative; z-index: 2; }

/* ============================================
   LIQUID GLASS PANELS
   Premium frosted panels with animated internal
   caustic-light reflections that drift and pulse
   like light refracting through water.
   ============================================ */
.liquid-glass {
    position: relative;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(250, 204, 21, 0.03) 100%);
    backdrop-filter: blur(28px) saturate(2.0) brightness(1.08);
    -webkit-backdrop-filter: blur(28px) saturate(2.0) brightness(1.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 32px 80px -18px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(250, 204, 21, 0.08);
    transition: transform .55s cubic-bezier(.16,1,.3,1),
                box-shadow .55s ease,
                border-color .55s ease;
}

/* Animated caustic light - the main "liquid" effect */
.liquid-glass .liquid-caustics {
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(ellipse at 20% 30%,
            rgba(250, 204, 21, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%,
            rgba(59, 130, 246, 0.10) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 80%,
            rgba(239, 68, 68, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%,
            rgba(255, 255, 255, 0.08) 0%, transparent 40%);
    filter: blur(40px) saturate(1.6);
    opacity: 0.75;
    z-index: 0;
    pointer-events: none;
    animation: liquidDrift 12s ease-in-out infinite alternate;
}

@keyframes liquidDrift {
    0%   { transform: translate(0, 0) scale(1.0) rotate(0deg); }
    33%  { transform: translate(5%, -4%) scale(1.08) rotate(2deg); }
    66%  { transform: translate(-4%, 5%) scale(1.04) rotate(-1deg); }
    100% { transform: translate(3%, 2%) scale(1.1) rotate(1.5deg); }
}

/* Animated refraction highlight that sweeps across the panel */
.liquid-glass .liquid-sheen {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 255, 255, 0.06) 60deg,
        transparent 120deg,
        rgba(250, 204, 21, 0.04) 200deg,
        transparent 260deg,
        rgba(59, 130, 246, 0.04) 320deg,
        transparent 360deg);
    animation: liquidSheenSpin 16s linear infinite;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

@keyframes liquidSheenSpin {
    to { transform: rotate(360deg); }
}

/* Iridescent border ring */
.liquid-glass .liquid-border {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 220deg,
        rgba(250, 204, 21, .40),
        rgba(30, 64, 175, .35),
        rgba(255, 255, 255, .35),
        rgba(127, 29, 29, .30),
        rgba(250, 204, 21, .40));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .45;
    animation: glassSpin 14s linear infinite;
    z-index: 3;
}

/* Content layer */
.liquid-glass > *:not(.liquid-caustics):not(.liquid-sheen):not(.liquid-border) {
    position: relative;
    z-index: 4;
}

/* Hover: brighten the caustics and lift */
.liquid-glass:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow:
        0 40px 100px -20px rgba(0, 0, 0, 0.60),
        0 0 50px rgba(250, 204, 21, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.28);
}

.liquid-glass:hover .liquid-caustics {
    opacity: 1;
    filter: blur(35px) saturate(2.0);
}

.liquid-glass:hover .liquid-border {
    opacity: .75;
    filter: blur(.3px) drop-shadow(1px 0 0 rgba(255, 0, 80, .25))
                       drop-shadow(-1px 0 0 rgba(0, 200, 255, .25));
}

/* Utility: apply liquid glass to feature cards */
.feature-card.liquid-glass {
    border-radius: 24px;
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
}

@media (prefers-reduced-motion: reduce) {
    .liquid-caustics, .liquid-sheen, .liquid-border { animation: none !important; }
}