/* Glass effect variables */
:root {
  --shadow-offset: 0;
  --shadow-blur: 20px;
  --shadow-spread: -5px;
  --shadow-color: rgba(255, 255, 255, 0.7);
  --tint-color: 255, 255, 255;
  --tint-opacity: 0.3;
  --frost-blur: 4px;
  --noise-frequency: 0.008;
  --distortion-strength: 77;
  --outer-shadow-blur: 24px;
}


.glass {
  position: relative;
  padding: 40px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0px 6px var(--outer-shadow-blur) rgba(0, 0, 0, 0.2)
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 28px;
  box-shadow: inset var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
  background-color: rgba(var(--tint-color), var(--tint-opacity));
}

.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 28px;
  backdrop-filter: blur(var(--frost-blur));
  filter: url(#glass-distortion);
  isolation: isolate;
  -webkit-backdrop-filter: blur(var(--frost-blur));
  -webkit-filter: url("#glass-distortion");
}

/* Enhanced text styling with typewriter effect */
.glass h1,
.glass h2 {
  position: relative;
  z-index: 1;
  min-height: 1.2em; /* Prevent layout shift during typing */
}