/* ============================================================
   GLASS.CSS — Liquid glass morphism, Frutiger Aero 2006 style
   HEAVY gradients, real reflections, beveled edges, orbs
   ============================================================ */

/* ---- Base glass panel ---- */
.glass {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(230,245,255,0.30) 12%,
      rgba(180,220,255,0.14) 30%,
      rgba(80,160,255,0.10) 52%,
      rgba(0,80,200,0.22) 72%,
      rgba(0,40,140,0.36) 88%,
      rgba(0,20,90,0.48) 100%
    );
  backdrop-filter: blur(16px) saturate(220%) brightness(115%);
  -webkit-backdrop-filter: blur(16px) saturate(220%) brightness(115%);
  border: 1px solid rgba(255,255,255,0.72);
  border-bottom-color: rgba(100,180,255,0.38);
  border-right-color: rgba(100,180,255,0.28);
  box-shadow:
    0 0 0 1px rgba(120,200,255,0.35),
    0 8px 36px rgba(0,60,200,0.55),
    0 2px 8px rgba(0,0,0,0.30),
    0 3px 0 rgba(255,255,255,0.45) inset,
    0 1px 0 rgba(255,255,255,0.80) inset,
    0 -1px 0 rgba(0,20,80,0.18) inset,
    0 0 0 1px rgba(255,255,255,0.12) inset;
  position: relative;
  overflow: hidden;
}

/* Top shine band — the wet glass look */
.glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.72) 0%,
    rgba(255,255,255,0.50) 18%,
    rgba(255,255,255,0.20) 50%,
    rgba(255,255,255,0.04) 80%,
    rgba(255,255,255,0.00) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Bottom reflection line */
.glass::after {
  content: '';
  position: absolute;
  bottom: 0; left: 5%; right: 5%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(120,200,255,0.20) 15%,
    rgba(200,235,255,0.70) 40%,
    rgba(255,255,255,0.85) 50%,
    rgba(200,235,255,0.70) 60%,
    rgba(120,200,255,0.20) 85%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ---- Dark glass (windows, panels) ---- */
.glass-dark {
  background:
    linear-gradient(160deg,
      rgba(40,90,190,0.52) 0%,
      rgba(10,55,150,0.46) 18%,
      rgba(0,35,110,0.42) 38%,
      rgba(0,20,75,0.50) 58%,
      rgba(0,10,50,0.58) 80%,
      rgba(0,5,30,0.65) 100%
    );
  backdrop-filter: blur(16px) saturate(200%) brightness(112%);
  -webkit-backdrop-filter: blur(16px) saturate(200%) brightness(112%);
  border: 1px solid rgba(100,180,255,0.45);
  border-top-color: rgba(180,225,255,0.65);
  border-bottom-color: rgba(60,130,230,0.30);
  box-shadow:
    0 0 0 1px rgba(80,160,255,0.25),
    0 0 40px rgba(0,80,220,0.50),
    0 20px 60px rgba(0,20,80,0.72),
    0 3px 0 rgba(140,200,255,0.28) inset,
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 0 0 1px rgba(255,255,255,0.08) inset;
  position: relative;
  overflow: hidden;
}

.glass-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg,
    rgba(180,220,255,0.32) 0%,
    rgba(120,185,255,0.18) 25%,
    rgba(255,255,255,0.08) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ---- Green glass ---- */
.glass-green {
  background: linear-gradient(160deg,
    rgba(0,220,140,0.42) 0%,
    rgba(0,180,110,0.30) 35%,
    rgba(0,120,72,0.22) 58%,
    rgba(0,70,44,0.32) 80%,
    rgba(0,40,25,0.42) 100%
  );
  backdrop-filter: blur(14px) saturate(200%) brightness(112%);
  -webkit-backdrop-filter: blur(14px) saturate(200%) brightness(112%);
  border: 1px solid rgba(0,255,160,0.45);
  border-top-color: rgba(160,255,210,0.65);
  box-shadow:
    0 0 0 1px rgba(0,200,120,0.25),
    0 8px 32px rgba(0,100,60,0.50),
    0 2px 0 rgba(160,255,210,0.45) inset,
    0 1px 0 rgba(255,255,255,0.35) inset;
  position: relative; overflow: hidden;
}

/* ---- Glass button — the iconic Aqua/Aero gel capsule ---- */
.glass-btn {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.92) 0%,
      rgba(240,250,255,0.80) 14%,
      rgba(200,235,255,0.55) 28%,
      rgba(120,195,255,0.38) 48%,
      rgba(0,120,220,0.62) 62%,
      rgba(0,80,190,0.78) 80%,
      rgba(0,50,160,0.88) 100%
    );
  backdrop-filter: blur(18px) saturate(220%) brightness(115%);
  -webkit-backdrop-filter: blur(18px) saturate(220%) brightness(115%);
  border: 1px solid rgba(255,255,255,0.90);
  border-bottom-color: rgba(60,130,230,0.65);
  border-left-color: rgba(180,220,255,0.55);
  border-right-color: rgba(180,220,255,0.55);
  border-radius: 8px;
  color: white;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 18px;
  letter-spacing: 0.3px;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 0 8px rgba(0,40,120,0.70);
  box-shadow:
    0 0 0 1px rgba(100,180,255,0.40),
    0 6px 18px rgba(0,60,200,0.50),
    0 2px 4px rgba(0,0,0,0.30),
    0 2px 0 rgba(255,255,255,0.95) inset,
    0 1px 0 rgba(255,255,255,1.00) inset,
    0 -1px 0 rgba(0,30,100,0.25) inset,
    0 0 12px rgba(255,255,255,0.20) inset;
  transition: all 0.14s var(--ease-smooth);
  position: relative; overflow: hidden;
}

/* Top shine — makes it look like liquid-filled plastic */
.glass-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.60) 30%,
    rgba(255,255,255,0.20) 70%,
    rgba(255,255,255,0.00) 100%
  );
  pointer-events: none; border-radius: inherit; z-index: 1;
}

/* Mid-sheen band — the Vista horizontal stripe */
.glass-btn::after {
  content: '';
  position: absolute;
  top: 48%; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.06) 100%
  );
  pointer-events: none; z-index: 1;
}

.glass-btn:hover {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.96) 0%,
      rgba(220,245,255,0.88) 14%,
      rgba(160,225,255,0.65) 28%,
      rgba(60,196,255,0.50) 48%,
      rgba(0,160,240,0.72) 62%,
      rgba(0,110,220,0.86) 80%,
      rgba(0,70,200,0.94) 100%
    );
  border-color: rgba(255,255,255,0.95);
  border-bottom-color: rgba(0,160,255,0.75);
  box-shadow:
    0 0 0 1px rgba(64,196,255,0.65),
    0 0 22px rgba(0,160,240,0.75),
    0 0 44px rgba(0,120,220,0.35),
    0 6px 18px rgba(0,60,200,0.50),
    0 2px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(0,30,100,0.25) inset;
  transform: translateY(-1px);
  color: white;
}

.glass-btn:active {
  transform: translateY(1px);
  background:
    linear-gradient(180deg,
      rgba(0,60,180,0.85) 0%,
      rgba(0,100,220,0.70) 30%,
      rgba(60,160,255,0.50) 55%,
      rgba(200,235,255,0.65) 72%,
      rgba(255,255,255,0.88) 100%
    );
  box-shadow:
    0 0 0 1px rgba(64,196,232,0.50),
    0 2px 8px rgba(0,60,180,0.40),
    0 -1px 0 rgba(255,255,255,0.40) inset,
    0 2px 6px rgba(0,0,0,0.30) inset;
}

/* ---- Glass input ---- */
.glass-input {
  background: linear-gradient(180deg, rgba(0,8,38,0.72) 0%, rgba(0,16,58,0.58) 100%);
  backdrop-filter: blur(18px) saturate(200%);
  -webkit-backdrop-filter: blur(18px) saturate(200%);
  border: 1px solid rgba(80,170,255,0.42);
  border-top-color: rgba(0,15,50,0.65);
  border-radius: 6px;
  color: rgba(210,240,255,0.95);
  font-family: var(--font-main);
  font-size: 12px;
  padding: 6px 12px;
  outline: none;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.40) inset,
    0 0 0 1px rgba(0,20,70,0.35) inset;
  transition: all 0.18s;
}

.glass-input:focus {
  border-color: rgba(64,196,232,0.88);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.35) inset,
    0 0 0 3px rgba(64,196,232,0.25),
    0 0 20px rgba(64,196,232,0.35);
  background: linear-gradient(180deg, rgba(0,12,50,0.80) 0%, rgba(0,22,68,0.65) 100%);
}

.glass-input::placeholder { color: rgba(120,190,255,0.40); }

/* ---- Aero orb (glossy sphere) ---- */
.aero-orb {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,1.0) 0%,
      rgba(255,255,255,0.80) 8%,
      rgba(180,230,255,0.90) 20%,
      var(--blue-light) 36%,
      var(--blue-sky)  55%,
      var(--blue-mid)  72%,
      var(--blue-dark) 88%,
      var(--blue-deep) 100%
    );
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.30),
    0 0 22px rgba(64,196,232,0.85),
    0 0 55px rgba(0,150,214,0.50),
    0 0 90px rgba(0,100,200,0.25),
    inset 0 -5px 10px rgba(0,0,0,0.35),
    inset 0 2px 4px rgba(255,255,255,0.60);
  position: relative;
}

/* Specular highlight */
.aero-orb::after {
  content: '';
  position: absolute;
  top: 7%; left: 18%;
  width: 44%; height: 38%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.0) 100%);
  border-radius: 50%;
  filter: blur(2px);
}

/* ---- Green aero orb ---- */
.aero-orb-green {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,0.98) 0%,
      rgba(200,255,230,0.90) 10%,
      var(--green-light) 22%,
      var(--green-bright) 42%,
      var(--green-mid) 62%,
      var(--green-dark) 82%,
      var(--green-deep) 100%
    );
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.25),
    0 0 22px rgba(0,200,128,0.88),
    0 0 55px rgba(0,160,100,0.50),
    inset 0 -5px 10px rgba(0,0,0,0.30),
    inset 0 2px 4px rgba(255,255,255,0.55);
  position: relative;
}

.aero-orb-green::after {
  content: '';
  position: absolute;
  top: 7%; left: 18%;
  width: 44%; height: 38%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.92) 0%, transparent 100%);
  border-radius: 50%;
  filter: blur(2px);
}

/* ---- Desktop icon reflection ---- */
.icon-reflection {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%) scaleY(-0.4);
  opacity: 0.25;
  filter: blur(1.5px);
  transform-origin: top center;
  pointer-events: none;
  width: 48px; height: 48px;
  font-size: 40px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Separator ---- */
.glass-sep {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(120,185,255,0.22) 15%,
    rgba(64,196,232,0.50) 50%,
    rgba(120,185,255,0.22) 85%,
    transparent 100%
  );
  margin: 6px 0;
}

/* ---- Glow text ---- */
.glow-blue  { text-shadow: 0 0 10px rgba(64,196,232,0.90), 0 0 22px rgba(0,150,214,0.55), 0 1px 2px rgba(0,0,0,0.5); }
.glow-green { text-shadow: 0 0 10px rgba(0,200,128,0.90), 0 0 22px rgba(0,160,100,0.55), 0 1px 2px rgba(0,0,0,0.5); }

/* ---- Glass panel ---- */
.glass-panel {
  background: linear-gradient(170deg,
    rgba(255,255,255,0.26) 0%,
    rgba(200,230,255,0.16) 20%,
    rgba(140,200,255,0.10) 45%,
    rgba(0,80,180,0.18) 70%,
    rgba(0,40,120,0.28) 100%
  );
  backdrop-filter: blur(50px) saturate(260%) brightness(118%);
  -webkit-backdrop-filter: blur(50px) saturate(260%) brightness(118%);
  border: 1px solid rgba(255,255,255,0.55);
  border-top-color: rgba(255,255,255,0.80);
  border-bottom-color: rgba(80,160,255,0.28);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(100,180,255,0.25),
    0 12px 40px rgba(0,50,180,0.45),
    0 2px 0 rgba(255,255,255,0.65) inset,
    0 1px 0 rgba(255,255,255,0.90) inset;
  padding: 16px;
  position: relative; overflow: hidden;
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.40) 0%,
    rgba(255,255,255,0.18) 40%,
    transparent 100%
  );
  pointer-events: none; z-index: 1; border-radius: inherit;
}

/* ---- Inset bevel edge ---- */
.bevel {
  box-shadow:
    1px 1px 0 rgba(255,255,255,0.55) inset,
    -1px -1px 0 rgba(0,0,0,0.18) inset,
    0 6px 24px rgba(0,40,120,0.40);
}

/* ---- Wet/glossy surface ---- */
.wet-surface { position: relative; overflow: hidden; }
.wet-surface::after {
  content: '';
  position: absolute;
  top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  transform: skewX(-15deg);
  pointer-events: none;
  animation: shimmer-pass 3.5s ease-in-out infinite;
}