/* Liquid Glass Styles for Waitlist Landing Page */
:root {
  /* Warm glow color variable - richer sunset orange */
  --warm-glow: oklch(85% 0.14 55 / 0.55);
  --warm-glow-solid: oklch(85% 0.14 55);

  /* Glass colors */
  --glass-bg: oklch(100% 0 0 / 0.45);
  --glass-highlight: oklch(100% 0 0 / 0.75);
  --glass-text: oklch(100% 0 0);
  --glass-input-bg: oklch(100% 0 0 / 0.1);
  --glass-input-border: oklch(100% 0 0 / 0.2);
  --glass-input-focus: oklch(100% 0 0 / 0.3);
  --glass-shadow: 0 2px 8px oklch(0% 0 0 / 0.1);
  --glass-border-radius: 20px;
  --input-height: 56px;
  --input-border-radius: 14px;
  --input-font-size: 17px;
  --transition-smooth: all 0.3s ease;
  --transition-bounce: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Ocean theme colors - refined palette */
  --ocean-deep: oklch(38% 0.12 235);
  --ocean-medium: oklch(55% 0.14 230);
  --ocean-light: oklch(72% 0.11 228);
  --coral: oklch(72% 0.20 45);
  --coral-bright: oklch(78% 0.18 50);
  --foam: oklch(97% 0.005 230);
  --ocean-deep-shadow: oklch(28% 0.12 250 / 0.5);
}

/* ================================
   Float Animation - gentler movement
   ================================ */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float 7s ease-in-out infinite;
}

/* ================================
   Text Gradients
   ================================ */
.text-gradient-coral {
  background: linear-gradient(135deg, var(--coral-bright) 0%, var(--coral) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================
   Glass Input Wrapper
   ================================ */
.glass-input-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: var(--input-height);
  border-radius: var(--input-border-radius);
  overflow: hidden;
}

.glass-filter,
.glass-overlay,
.glass-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.glass-filter {
  z-index: 1;
  backdrop-filter: blur(4px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.15);
}

.glass-overlay {
  z-index: 2;
  background: var(--glass-bg);
}

.glass-specular {
  z-index: 3;
  box-shadow: inset -1px -0.5px 1px var(--warm-glow);
}

/* ================================
   Glass Input Field
   ================================ */
.glass-input {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  padding: 16px 16px 16px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--input-border-radius);
  color: oklch(25% 0.02 250);
  font-size: var(--input-font-size);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  transition: var(--transition-smooth);
  background-clip: padding-box;
}

/* Gradient border effect using pseudo-element */
.glass-input-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    oklch(100% 0 0 / 0.2) 0%,
    oklch(100% 0 0 / 0.3) 25%,
    oklch(84% 0.18 85 / 0.4) 50%,
    oklch(77% 0.2 60 / 0.5) 75%,
    oklch(64% 0.24 45 / 0.6) 100%
  );
  border-radius: var(--input-border-radius);
  z-index: 0;
  opacity: 0.8;
}

.glass-input:focus {
  outline: none;
  border-color: transparent;
}

.glass-input-wrapper:focus-within::before {
  opacity: 1;
  background: linear-gradient(135deg,
    oklch(100% 0 0 / 0.3) 0%,
    oklch(100% 0 0 / 0.4) 25%,
    oklch(84% 0.18 85 / 0.5) 50%,
    oklch(77% 0.2 60 / 0.6) 75%,
    oklch(64% 0.24 45 / 0.7) 100%
  );
}

.glass-input::placeholder {
  color: oklch(100% 0 0 / 0.8);
  transition: var(--transition-smooth);
}

.glass-input:focus::placeholder {
  opacity: 0.6;
}

/* ================================
   Email Icon (inside input)
   ================================ */
.email-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--glass-text);
  opacity: 0.9;
  pointer-events: none;
  transition: var(--transition-bounce);
  z-index: 5;
}

.glass-input:focus ~ .email-icon {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

/* ================================
   Role Selection Buttons (Gradient)
   ================================ */
.role-button {
  height: var(--input-height);
  cursor: pointer;
  position: relative;
  border-radius: var(--input-border-radius);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px oklch(50% 0.15 230 / 0.35),
              0 2px 8px oklch(67% 0.24 50 / 0.2);
  background: oklch(100% 0 0);
  border: none;
}

/* Base gradient layer - ocean to coral sunset */
.role-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    oklch(58% 0.14 228) 0%,
    oklch(55% 0.13 245) 40%,
    oklch(68% 0.18 50) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Hover gradient layer - brighter, more saturated */
.role-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    oklch(62% 0.16 228) 0%,
    oklch(58% 0.14 250) 40%,
    oklch(72% 0.20 48) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.role-button:hover {
  transform: scale(1.03) translateY(-3px);
  box-shadow: 0 10px 30px oklch(50% 0.15 230 / 0.4),
              0 4px 12px oklch(67% 0.24 50 / 0.25);
}

.role-button:hover::after {
  opacity: 1;
}

/* Active/pressed state */
.role-button:active {
  transform: scale(0.98) translateY(0);
  transition-duration: 0.1s;
}

/* Ensure text stays visible above gradient layers */
.role-button svg,
.role-button span {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px oklch(0% 0 0 / 0.15);
}

/* ================================
   Disabled State - Liquid Glass Style
   ================================ */
.role-button-disabled {
  cursor: not-allowed;
  box-shadow: none;
}

/* Override base gradient with glass effect when disabled */
.role-button-disabled::before {
  background: var(--glass-bg);
}

/* Glass filter layer for disabled state */
.role-button-disabled::after {
  opacity: 1;
  background: transparent;
  backdrop-filter: blur(4px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.15);
}

/* Specular highlight border for disabled buttons */
.role-button-disabled {
  background: transparent;
  box-shadow: inset -1px -0.5px 1px var(--warm-glow),
              inset 0 0 0 1px oklch(100% 0 0 / 0.18);
}

/* Subtle text when disabled */
.role-button-disabled span {
  opacity: 0.65;
}

.role-button-disabled svg {
  opacity: 0.5;
}

/* Remove hover effects when disabled */
.role-button-disabled:hover {
  transform: none;
  box-shadow: inset -1px -0.5px 1px var(--warm-glow),
              inset 0 0 0 1px oklch(100% 0 0 / 0.18);
}

.role-button-disabled:hover::after {
  background: transparent;
}

/* ================================
   Enabled State - Ready to submit
   ================================ */
.role-button:not(.role-button-disabled) span {
  opacity: 1;
}

.role-button:not(.role-button-disabled) svg {
  opacity: 0.9;
}

/* ================================
   Ocean Background
   ================================ */
.bg-ocean-deep {
  background-color: var(--ocean-deep);
}

/* ================================
   Text Utilities for Landing Page
   ================================ */
.text-foam {
  color: var(--foam);
}

.text-coral {
  color: var(--coral);
}

/* Text glow effect for warm colors (coral/orange) - refined */
.text-glow-warm {
  text-shadow: 0 0 20px oklch(80% 0.18 50 / 0.5),
               0 0 40px oklch(75% 0.16 52 / 0.35),
               0 0 70px oklch(70% 0.14 55 / 0.2);
}

/* Text glow effect for cold colors (ocean blue) */
.text-glow-cold {
  text-shadow: 0 0 30px oklch(76% 0.12 231 / 0.6),
               0 0 60px oklch(76% 0.12 231 / 0.6),
               0 0 90px oklch(76% 0.12 231 / 0.6);
}

/* Warm glow for inputs */
.shadow-ocean-input {
  box-shadow: 0 0 30px var(--warm-glow),
              0 0 60px var(--warm-glow);
}