/* ── Glass utilities — Phase 2 (light rollback) ──────────────────────────
   Originally translucent frosted surfaces. Rolled back to flat Phase 1
   white cards for the light-theme rollback. The class names are kept so
   the existing Phase 2 templates render correctly without rewrites.
   ──────────────────────────────────────────────────────────────────────── */

.glass,
.glass-strong {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  color: var(--dark-text);
}

.glass-strong { border-radius: 20px; }

/* Interactive card — hover lift + Phase 1 hover shadow */
.glass-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  color: var(--dark-text);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease-spring),
              border-color var(--dur-med) var(--ease-smooth),
              box-shadow var(--dur-med) var(--ease-smooth);
  will-change: transform;
}

.glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 176, 240, 0.35);
  box-shadow: var(--shadow-hover);
}

.glass-card.is-locked {
  opacity: 0.6;
  cursor: not-allowed;
  filter: saturate(0.5);
}

.glass-card.is-locked:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

/* Floating toolbar pill */
.glass-toolbar {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--dark-text);
  box-shadow: var(--shadow-card);
}

/* Status chip — Draft / Ready / Live */
.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--dark-text);
}
.glass-chip.is-draft       { color: #B08A2E; background: #FFF7E6; border-color: #F2D77A; }
.glass-chip.is-ready       { color: #1F8E73; background: #E8F8F2; border-color: #9CDFC9; }
.glass-chip.is-live        { color: #C03953; background: #FFEFF2; border-color: #F4A8B6; }
.glass-chip.is-production  { color: #166534; background: #DCFCE7; border-color: #86EFAC; }
.glass-chip.is-closed      { color: #4B5563; background: #E5E7EB; border-color: #D1D5DB; }
.glass-chip.is-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF6B8A;
  box-shadow: 0 0 8px rgba(255,107,138,0.6);
  animation: pulse-dot 1.4s var(--ease-smooth) infinite;
}

/* Primary CTA — solid Phase 1 blue */
.btn-glass {
  background: var(--primary);
  color: #FFFFFF;
  border: 1px solid var(--primary);
  border-radius: 10px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-med) var(--ease-smooth),
              background var(--dur-fast);
  box-shadow: 0 4px 14px rgba(0, 176, 240, 0.22);
}
.btn-glass:hover {
  transform: translateY(-2px);
  background: var(--dark-blue);
  border-color: var(--dark-blue);
  box-shadow: 0 8px 22px rgba(3, 92, 150, 0.28);
}
.btn-glass:active { transform: translateY(0); }
.btn-glass:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Ghost button — white background, primary outline */
.btn-glass-ghost {
  background: #FFFFFF;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 10px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-smooth),
              color var(--dur-fast);
}
.btn-glass-ghost:hover {
  background: var(--bg-light);
  color: var(--dark-blue);
  border-color: var(--dark-blue);
}

/* Keyframes */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.4); }
}

/* Staggered fade-up entrance */
.stagger-in > * {
  opacity: 0;
  transform: translateY(16px);
  animation: stagger-up var(--dur-slow) var(--ease-spring) forwards;
}
.stagger-in > *:nth-child(1) { animation-delay:  40ms; }
.stagger-in > *:nth-child(2) { animation-delay: 140ms; }
.stagger-in > *:nth-child(3) { animation-delay: 240ms; }
.stagger-in > *:nth-child(4) { animation-delay: 340ms; }
.stagger-in > *:nth-child(5) { animation-delay: 440ms; }
.stagger-in > *:nth-child(6) { animation-delay: 540ms; }

@keyframes stagger-up {
  to { opacity: 1; transform: translateY(0); }
}