/* =================================================================== */
/* glassy.css v2.0 — "iOS 26" Sophisticated Liquid Glass Engine        */
/* By Gemini — Now with animated Caustic Flow                          */
/* =================================================================== */

/*
 * This stylesheet defines a multi-layered, dimensional glass effect.
 * It combines gradients, multiple box shadows, and pseudo-elements
 * to create a sense of depth, curvature, and a reactive liquid sheen.
 *
 * NEW in v2.0: An animated "caustic wave" pseudo-element (::after)
 * that appears on hover, creating a subtle, watery flow of light
 * within the glass, without compromising the classy aesthetic.
 */

.glass {
  /* --- Core Glass Foundation --- */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.6);

  /* --- Multi-Layer Shadow for Realistic Depth --- */
  box-shadow:
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.75),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.1);

  /* --- 3D & Animation Properties --- */
  position: relative; /* Crucial for pseudo-elements */
  transform-style: preserve-3d;
transition: transform 0.4s ease-out,
              box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden; /* This is now ESSENTIAL to clip the flowing wave */
  z-index: 1; /* Establish a stacking context */
}


/* --- [INTERACTIVE SHEEN] ::before pseudo-element --- */
/* This creates the top-down glare effect on hover. */
.glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at 30% 0%,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0;
  transform: scale(1.1) translateY(-10%);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  z-index: 2; /* Sits above the caustic wave but below content */
}

/* --- [NEW] The Watery, Caustic Flow Effect ::after --- */
/* This is a large, blurred, rotating gradient that is clipped by the parent. */
.glass::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; /* Positioned to allow full rotation without edges showing */
    width: 200%;
    height: 200%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0; /* Sits behind the content */

    /* The "wave" is a linear gradient using our theme colors */
    background: linear-gradient(
        110deg,
        transparent 40%,
        rgba(10, 132, 255, 0.1) 48%,  /* Subtle Gemini Blue */
        rgba(94, 92, 230, 0.15) 52%, /* Subtle Gemini Purple */
        transparent 60%
    );

    /* Animation properties */
    animation: flowWave 20s linear infinite;

    /* These are key to the "classy" feel */
    filter: blur(40px); /* Heavily blurred for a soft, diffuse look */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.8s ease-in-out; /* Slow, graceful fade in/out */
}

/* --- The Animation Keyframes for the Wave --- */
@keyframes flowWave {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* --- HOVER STATE: Combining all effects --- */
.glass:hover {
  box-shadow:
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.75),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

/* Reveal the sheen on hover */
.glass:hover::before {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Reveal the watery flow on hover */
.glass:hover::after {
  opacity: 1;
}