:root {
  --lg-bg-color: rgba(255, 255, 255, 0.18);
  --lg-highlight: rgba(255, 255, 255, 0.75);
  --lg-text: #ffffff;
  --lg-grey: rgba(255,255,255,0.65);
}

/* ===== BACKGROUND ===== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* no scrollbars */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, sans-serif;
  color: var(--lg-text);

  background: linear-gradient(
    120deg,
    #5aa2c6,
    #5f61c0,
    #39bdbd,
    #1786c9,
    #15257a
  );
  background-size: 400% 400%;
  animation: gradient-move 25s ease infinite;
}

/* Smooth gradient movement */
@keyframes gradient-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== LAYOUT ===== */
.container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 90%;         /* scale nicely on small screens */
  max-width: 22rem;
  align-items: center;
}

/* ===== TITLE ===== */
.title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}

/* ===== GLASS CONTAINER ===== */
.glass-container {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent;
  border-radius: 2rem;
  overflow: hidden;
  color: var(--lg-text);
  box-shadow:
    0 6px 6px rgba(0,0,0,0.25),
    0 0 24px rgba(0,0,0,0.15);
  transition:
    transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.4),
    box-shadow 0.25s ease;
  width: 100%;
}

.glass-container:hover {
  transform: scale(1.03);
}

.glass-container:active {
  transform: scale(1.08);
}

/* ===== GLASS LAYERS ===== */
.glass-filter,
.glass-overlay,
.glass-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.glass-filter {
  z-index: 0;
  backdrop-filter: blur(6px);
  filter: saturate(120%) brightness(1.15);
}

.glass-overlay {
  z-index: 1;
  background: var(--lg-bg-color);
}

.glass-specular {
  z-index: 2;
  box-shadow:
    inset 1px 1px 0 var(--lg-highlight),
    inset 0 0 6px var(--lg-highlight);
}

/* ===== CONTENT ===== */
.glass-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 14px 28px;
  font-size: 1.05rem;
}

/* ===== INPUT ===== */
.glass-input input {
  width: 100%;
  font-size: 1.1rem;
  background: transparent;
  border: none;
  outline: none;
  color: var(--lg-text);
}

.glass-input input::placeholder {
  color: var(--lg-grey);
}

/* ===== BUTTON ===== */
.glass-button {
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
}

.glass-button .glass-content {
  text-align: center;
}

/* ===== CARD ===== */
.glass-card .glass-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.glass-card strong {
  opacity: 0.85;
}

/* ===== MOBILE TAP SCALE ===== */
@media (hover: none) and (pointer: coarse) {
  .glass-container {
    transition: transform 0.15s ease; /* quick, smooth scale */
  }

  .glass-container:active {
    transform: scale(1.05); /* grow slightly on tap */
  }
}