/* CSS Nativo + Animaciones — HIDRYC landing (saneada R65I) */

:root {
  --color-background: #0c0e12;
  --color-surface: #111417;
  --color-surface-high: #1c2025;
  --color-primary: #81ecff;
  --color-primary-container: #00e3fd;
  --color-secondary: #7e98ff;
  --color-on-background: #f8f9fe;
}

body {
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
}

/* Base UI Components */
.glass-panel {
  background-color: rgba(17, 20, 23, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(70, 72, 76, 0.15);
}

.glass-card {
  background-color: rgba(17, 20, 23, 0.8);
  transition: all 0.3s ease;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.glass-card:hover {
  background-color: rgba(28, 32, 37, 0.95);
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(129, 236, 255, 0.05);
}

.neon-border {
  border-bottom: 1px solid rgba(129, 236, 255, 0.2);
  transition: all 0.3s ease;
}

.neon-border:focus-within {
  border-bottom: 1px solid rgba(129, 236, 255, 1);
  box-shadow: 0px 4px 20px rgba(129, 236, 255, 0.15);
}

/* Animations Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Top status dot */
.pulse-dot {
    animation: staticPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes staticPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .2; box-shadow: 0 0 10px var(--color-primary); }
}