/* ── Shake animation ──────────────────────────────────────────── */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-5px); }
  75%       { transform: translateX(5px); }
}

.shake-error { animation: shake 0.2s ease-in-out 0s 3; }

/* ── Shared rainbow spin property & keyframe ──────────────────── */

@property --hbd-rainbow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes hbdRainbowSpin {
  to { --hbd-rainbow-angle: 360deg; }
}

@keyframes hbdPartyGlow {
  from { opacity: 0.65; filter: brightness(1); }
  to   { opacity: 0.9;  filter: brightness(1.35); }
}

/* ── TSMC wafer card ──────────────────────────────────────────── */

.quote-card--tsmc {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: inset 0 0 0 5px rgba(100, 100, 100, 0.5), 0 4px 20px rgba(100, 100, 100, 0.15) !important;
  border-radius: 12px;
}

.quote-card--tsmc::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 11px;
  z-index: 1;
  background-image:
    linear-gradient(#141923, #141923),
    linear-gradient(#141923, #141923),
    linear-gradient(#141923, #141923),
    linear-gradient(rgba(241, 196, 15, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 196, 15, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 40% 50%,
      rgba(255, 0, 128, 0.2) 0%,
      rgba(153, 102, 255, 0.2) 35%,
      rgba(54, 162, 235, 0.18) 50%,
      rgba(75, 192, 192, 0.18) 75%,
      rgba(255, 206, 86, 0.12) 100%
    ),
    radial-gradient(circle at 20% 25%, #3a4756 0%, #161c2400 70%, #0d111700 100%);
  background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 100% 100%, 100% 100%;
  background-position: 75% 30%, 65% 65%, 50% 50%, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat;
  box-shadow: inset 0 0 15px rgba(241, 196, 15, 0.05);
}

.quote-card--tsmc > * {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* ── NVDA neon card ───────────────────────────────────────────── */

.quote-card--nvda {
  box-shadow: inset 0 0 0 2px rgba(118, 185, 0, 0.6), 0 4px 20px rgba(118, 185, 0, 0.15) !important;
  background: linear-gradient(135deg, rgba(118, 185, 0, 0.3) 0%, rgba(18, 24, 18, 0.95) 100%) !important;
  position: relative;
}

.quote-card--nvda::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 1.5rem;
  background: conic-gradient(from var(--hbd-rainbow-angle), #ff6b81, #f01df4, #00f0ff, #00ff66, #ffea00, #ff6b81);
  filter: blur(35px);
  opacity: 0.5;
  animation: hbdRainbowSpin 6s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* ── Google search card ───────────────────────────────────────── */

.quote-card--google {
  background-color: #303134 !important;
  border: 1px solid #3c4043 !important;
  border-radius: 16px !important;
  position: relative;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.quote-card--google:hover {
  background-color: #3c4043 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.quote-card--google::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg,
    #4285f4 0%,  #4285f4 25%,
    #ea4335 25%, #ea4335 50%,
    #fbbc05 50%, #fbbc05 75%,
    #34a853 75%, #34a853 100%
  );
  z-index: 1;
}

.quote-card__search-wrapper {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 0.35s ease-in-out,
    opacity 0.25s ease-out,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin 0.3s ease;
  margin: 0;
  pointer-events: none;
}

.quote-card--google.is-easter-egg .quote-card__search-wrapper {
  max-height: 60px;
  opacity: 1;
  transform: translateY(0);
  margin: 1rem 0;
  pointer-events: auto;
}

.quote-card__search-bar {
  display: flex;
  align-items: center;
  background-color: #202124 !important;
  border: 1px solid #5f6368;
  border-radius: 24px;
  padding: 0 16px;
  height: 44px;
  gap: 12px;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.quote-card__search-bar:focus-within {
  background-color: #303134 !important;
  border-color: transparent;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28), 0 1px 1px rgba(0, 0, 0, 0.24);
}

.quote-card__search-bar input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #e8eaed !important;
  font-size: 0.95rem;
  padding: 0;
}

.quote-card__search-bar input::placeholder { color: #9aa0a6; }

.g-icon-search,
.g-icon-mic {
  flex-shrink: 0;
  cursor: pointer;
}

.quote-card--google h3 {
  font-family: 'Google Sans', 'Product Sans', system-ui, sans-serif !important;
  color: #e8eaed !important;
  font-weight: 500;
}

.quote-card--google p { color: #9aa0a6 !important; font-size: 0.85rem; }

.quote-card--google .quote-card__metrics strong {
  font-family: 'Google Sans', system-ui, sans-serif !important;
  color: #ffffff !important;
}

/* ── Birthday card ────────────────────────────────────────────── */

.quote-card--hbd {
  background: linear-gradient(135deg, #1a1525 0%, #0d1118 100%) !important;
  position: relative;
  border: 2px solid transparent !important;
  border-radius: 1rem !important;
  background-image:
    linear-gradient(135deg, #1a1525 0%, #0d1118 100%),
    conic-gradient(from var(--hbd-rainbow-angle), #ff6b81, #f01df4, #00f0ff, #00ff66, #ffea00, #ff6b81) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  animation: hbdRainbowSpin 4s linear infinite;
  box-shadow: none !important;
}

.quote-card--hbd::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 1.5rem;
  background-image:
    radial-gradient(circle at 50% 25%, #ff6b81 0%, #ff6b81 3px, transparent 4px),
    radial-gradient(circle at 78% 20%, #feca57 0%, #feca57 2px, transparent 3px),
    radial-gradient(circle at 35% 80%, #1dd1a1 0%, #1dd1a1 3px, transparent 4px),
    radial-gradient(circle at 78% 75%, #48dbfb 0%, #48dbfb 4px, transparent 5px),
    radial-gradient(circle at 55% 15%, #ff9ff3 0%, #ff9ff3 2px, transparent 3px),
    radial-gradient(circle at 70% 65%, #feca57 0%, #feca57 3px, transparent 4px),
    radial-gradient(circle at 62% 70%, #ff6b81 0%, #ff6b81 2px, transparent 3px);
  background-size: 100% 100%;
  opacity: 0.65;
  z-index: 1;
  pointer-events: none;
  animation: hbdPartyGlow 2s infinite alternate ease-in-out;
}

.quote-card--hbd::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(72, 219, 251, 0.25) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.quote-card--hbd > * {
  position: relative;
  z-index: 2;
}

.quote-card--hbd h3 {
  background: linear-gradient(90deg, #ff9ff3, #48dbfb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}