@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── Design Tokens ─── */
:root {
  --bg: 248 250 252;
  --fg: 15 23 42;
  --card: 255 255 255;
  --card-border: 226 232 240;
  --primary: 59 130 246;
  --primary-hover: 37 99 235;
  --muted: 100 116 139;
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(226, 232, 240, 0.9);
  --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
}

.dark {
  --bg: 5 10 24;
  --fg: 241 245 249;
  --card: 15 23 42;
  --card-border: 51 65 85;
  --primary: 96 165 250;
  --primary-hover: 59 130 246;
  --muted: 163 180 198;
  --glass-bg: rgba(15, 23, 42, 0.82);
  --glass-border: rgba(71, 85, 105, 0.55);
  --glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.15);
}

html,
body {
  height: 100%;
}

body {
  color: rgb(var(--fg));
  background: rgb(var(--bg));
}

/* Checkboxes — rõ trong light/dark */
input[type='checkbox'] {
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  border-radius: 0.25rem;
  border: 1px solid rgb(203 213 225);
  background-color: rgb(255 255 255);
  accent-color: rgb(37 99 235);
  vertical-align: middle;
}

.dark input[type='checkbox'] {
  border-color: rgb(71 85 105);
  background-color: rgb(15 23 42);
  accent-color: rgb(96 165 250);
}

input[type='checkbox']:focus-visible {
  outline: 2px solid rgb(59 130 246);
  outline-offset: 2px;
}

.dark input[type='checkbox']:focus-visible {
  outline-color: rgb(96 165 250);
}

/*
  Theme transition strategy:
  - Only transition background-color + color + border-color (cheap, non-paint)
  - Remove box-shadow / opacity / fill / stroke from global scope (too expensive)
  - Duration 250ms = snappy but still visible
  - bg overlay pseudo-elements use GPU-composited opacity (see below)
*/
*,
*::before,
*::after {
  transition:
    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override: interactive clicks should feel instant, not sluggish */
button,
a,
input,
select,
textarea,
[role="button"] {
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    opacity 150ms ease;
}

/* ─── Backgrounds ─── */
/*
  Both .bg-light and .bg-dark share the same element (via dark: variant).
  To avoid non-interpolatable gradient jumps, we use two ::before / ::after
  overlay layers that crossfade via opacity — GPU composited, no paint lag.
*/
.bg-light,
.bg-dark {
  position: relative;
  background-color: rgb(var(--bg)); /* base flat color — transitions via global CSS */
}

/* Light gradient layer — fades OUT when going dark.
   position:fixed + will-change:opacity = pure GPU compositor, zero repaint. */
.bg-light::before,
.bg-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(59, 130, 246, 0.08), transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(139, 92, 246, 0.06), transparent 50%),
    radial-gradient(circle at 60% 50%, rgba(6, 182, 212, 0.04), transparent 60%),
    linear-gradient(to right, rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: auto, auto, auto, 40px 40px, 40px 40px;
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .bg-light::before,
.dark .bg-dark::before {
  opacity: 0;
}

/* Dark gradient layer — fades IN when going dark. */
.bg-light::after,
.bg-dark::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
  background-image:
    radial-gradient(circle at 25% 10%, rgba(59, 130, 246, 0.14), transparent 45%),
    radial-gradient(circle at 75% 85%, rgba(139, 92, 246, 0.10), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.06), transparent 55%),
    linear-gradient(to right, rgba(148, 163, 184, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
  background-size: auto, auto, auto, 40px 40px, 40px 40px;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .bg-light::after,
.dark .bg-dark::after {
  opacity: 1;
}

/* ─── Glass Card ─── */
.glass {
  background-color: var(--glass-bg); /* background-color (not shorthand) = participates in global transition */
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
}

/* Legacy .card → glass */
.card {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
}

/* ─── Card hover lift ─── */
.card-hover {
  transition: transform 200ms ease, box-shadow 200ms ease;
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.dark .card-hover:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ─── Buttons ─── */
.btn-primary {
  background: rgb(var(--primary));
  color: white;
  border-radius: 0.75rem;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary), 0.3);
}

.btn-primary:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn-secondary {
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg);
  border-radius: 0.75rem;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 180ms ease;
}

.btn-secondary:hover {
  background: rgba(var(--primary), 0.06);
}

/* ─── Input ─── */
.input {
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg);
  width: 100%;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  outline: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.input:focus {
  border-color: rgb(var(--primary));
  box-shadow: 0 0 0 3px rgba(var(--primary), 0.12);
}

.input::placeholder {
  color: rgb(var(--muted));
  opacity: 0.7;
}

/* Auth / forms: đảm bảo chữ trong ô nhập đọc rõ ở dark mode */
.dark .auth-form-card .input {
  color: rgb(248 250 252);
  background-color: rgba(15, 23, 42, 0.72);
  border-color: rgba(71, 85, 105, 0.65);
}

/* ─── Gradient text ─── */
.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Glow ─── */
.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15), 0 0 40px rgba(59, 130, 246, 0.05);
}

.dark .glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.25), 0 0 60px rgba(59, 130, 246, 0.08);
}

/* ─── Muted text ─── */
.muted {
  color: rgb(var(--muted));
}

/* ─── Badges ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.badge-info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.dark .badge-info {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

.badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.dark .badge-success {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.dark .badge-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.dark .badge-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
}

.badge-purple {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.dark .badge-purple {
  background: rgba(139, 92, 246, 0.18);
  color: #a78bfa;
}

/* ─── Scrollbar ─── */
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.2);
  border-radius: 9999px;
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.15);
}

/* ─══════════════════════════════════════════════════════════════════
   ★  Premium Theme Toggle Component
   ══════════════════════════════════════════════════════════════════ */

.theme-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 56px;
  height: 28px;
  border-radius: 9999px;
  overflow: hidden;
  transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-track.is-light {
  background: linear-gradient(135deg, #87CEEB 0%, #60A5FA 50%, #3B82F6 100%);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.theme-toggle-track.is-dark {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

.theme-toggle-btn:hover .theme-toggle-track {
  transform: scale(1.05);
}

.theme-toggle-btn:active .theme-toggle-track {
  transform: scale(0.95);
}

/* Particles container */
.theme-toggle-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Stars for dark mode */
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkleStar 1.5s ease-in-out infinite alternate;
}

.star-1 {
  top: 5px;
  left: 8px;
  animation-delay: 0ms;
}

.star-2 {
  top: 18px;
  left: 14px;
  animation-delay: 300ms;
}

.star-3 {
  top: 8px;
  left: 22px;
  animation-delay: 600ms;
}

.star-4 {
  top: 20px;
  left: 30px;
  animation-delay: 400ms;
}

.star-5 {
  top: 12px;
  left: 38px;
  animation-delay: 200ms;
}

@keyframes twinkleStar {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Clouds for light mode */
.cloud {
  position: absolute;
  width: 10px;
  height: 5px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 9999px;
  animation: driftCloud 4s ease-in-out infinite alternate;
}

.cloud-1 {
  top: 6px;
  left: 28px;
  animation-delay: 0ms;
}

.cloud-2 {
  top: 16px;
  left: 36px;
  width: 8px;
  height: 4px;
  animation-delay: 1s;
}

@keyframes driftCloud {
  0% {
    transform: translateX(0);
    opacity: 0.5;
  }

  100% {
    transform: translateX(4px);
    opacity: 0.8;
  }
}

/* Sliding knob */
.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle-knob.knob-light {
  left: 3px;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5),
    0 0 24px rgba(245, 158, 11, 0.2),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.theme-toggle-knob.knob-dark {
  left: 31px;
  background: linear-gradient(135deg, #C7D2FE, #E0E7FF);
  box-shadow: 0 0 12px rgba(199, 210, 254, 0.5),
    0 0 24px rgba(199, 210, 254, 0.15),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

/* Theme icons inside knob */
.theme-icon {
  position: absolute;
  width: 14px;
  height: 14px;
  transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-icon.icon-visible {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-icon.icon-hidden {
  opacity: 0;
  transform: rotate(180deg) scale(0);
}

.sun-icon {
  color: #92400E;
}

.sun-icon.icon-visible {
  animation: sunSpin 10s linear infinite;
}

@keyframes sunSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.moon-icon {
  color: #4338CA;
}

/* Knob hover glow */
.theme-toggle-btn:hover .knob-light {
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.7),
    0 0 32px rgba(245, 158, 11, 0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.theme-toggle-btn:hover .knob-dark {
  box-shadow: 0 0 16px rgba(199, 210, 254, 0.7),
    0 0 32px rgba(199, 210, 254, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

/* ─── Notifications ─── */
.noti-content {
  overflow-wrap: break-word;
  word-break: break-word;
}

.noti-content p {
  margin: 0;
}

.noti-content a {
  color: rgb(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.noti-content strong {
  font-weight: 700;
}

.noti-content .wm-mention {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgb(59 130 246);
  background: rgb(59 130 246 / 0.08);
  border: 1px solid rgb(59 130 246 / 0.25);
  border-radius: 8px;
  padding: 2px 8px 2px 6px;
  font-weight: 600;
  font-size: 0.8em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.noti-content .wm-mention::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Lucide arrow-up-right icon */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
}

.noti-content .wm-mention:hover {
  background: rgb(59 130 246 / 0.15);
  box-shadow: 0 1px 4px rgb(59 130 246 / 0.15);
  text-decoration: none;
}

/* ─── Tiptap Editor ─── */
.tiptap-editor:focus { outline: none; }
.tiptap-editor p { margin: 0 0 6px 0; }
.tiptap-editor p:last-child { margin-bottom: 0; }
.tiptap-editor h1 { font-size: 1.35rem; font-weight: 700; margin: 8px 0 4px; }
.tiptap-editor h2 { font-size: 1.15rem; font-weight: 700; margin: 8px 0 4px; }
.tiptap-editor h3 { font-size: 1rem; font-weight: 600; margin: 6px 0 3px; }
.tiptap-editor ul { list-style: disc; padding-left: 1.25rem; margin: 4px 0; }
.tiptap-editor ol { list-style: decimal; padding-left: 1.25rem; margin: 4px 0; }
.tiptap-editor li { margin: 2px 0; }
.tiptap-editor strong { font-weight: 700; }
.tiptap-editor em { font-style: italic; }
.tiptap-editor u { text-decoration: underline; }
.tiptap-editor s { text-decoration: line-through; }
.tiptap-editor code { background: rgb(148 163 184 / 0.15); border-radius: 4px; padding: 1px 4px; font-family: monospace; font-size: 0.85em; }
.tiptap-editor hr { border: none; border-top: 1px solid rgb(148 163 184 / 0.3); margin: 10px 0; }
.tiptap-link { color: rgb(59 130 246); text-decoration: underline; text-underline-offset: 2px; }
.tiptap-img { max-width: 100%; border-radius: 10px; margin: 8px 0; }
.tiptap-editor .wm-mention { display: inline-flex; align-items: center; color: rgb(59 130 246); background: rgb(59 130 246 / 0.08); border: 1px solid rgb(59 130 246 / 0.25); border-radius: 6px; padding: 0 6px; font-weight: 600; font-size: 0.85em; text-decoration: none; cursor: pointer; }
.tiptap-editor p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: rgb(148 163 184); pointer-events: none; float: left; height: 0; }

/* ─── Animations ─── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fadeUp 400ms ease both;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in {
  animation: slideIn 250ms ease-out;
}

@keyframes toast-in {
  from {
    transform: translateY(-16px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes spin-loader {
  to {
    transform: rotate(360deg);
  }
}

.animate-spinning {
  animation: spin-loader 0.8s linear infinite;
}

/* Container utility */
.container-page {
  margin: 0 auto;
  width: 100%;
  max-width: 72rem;
  padding: 0 1rem;
}

/* ─── Admin Drawer ─── */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.slide-drawer {
  animation: slideInRight 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Landing Page Animations ─── */

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Staggered children */
.reveal-stagger>* {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.visible>*:nth-child(1) {
  transition-delay: 0ms;
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.visible>*:nth-child(2) {
  transition-delay: 120ms;
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.visible>*:nth-child(3) {
  transition-delay: 240ms;
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.visible>*:nth-child(4) {
  transition-delay: 360ms;
  opacity: 1;
  transform: translateY(0);
}

/* Scale-in reveal */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Hero text slide-in from left */
@keyframes heroSlideIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-slide-in {
  animation: heroSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-slide-in-delay {
  animation-delay: 150ms;
}

.hero-slide-in-delay-2 {
  animation-delay: 300ms;
}

.hero-slide-in-delay-3 {
  animation-delay: 450ms;
}

/* Hero logo breathe */
@keyframes logoBreathe {

  0%,
  100% {
    filter: drop-shadow(0 0 24px rgba(59, 130, 246, 0.3));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.5));
    transform: scale(1.02);
  }
}

.logo-breathe {
  animation: logoBreathe 4s ease-in-out infinite;
}

/* Gradient shimmer for text */
@keyframes gradientShimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.gradient-shimmer {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShimmer 4s ease infinite;
}

/* Floating particle dots */
@keyframes floatParticle {

  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.4;
  }

  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.8;
  }

  50% {
    transform: translateY(-8px) translateX(-6px);
    opacity: 0.5;
  }

  75% {
    transform: translateY(-16px) translateX(4px);
    opacity: 0.7;
  }
}

.float-particle {
  animation: floatParticle 6s ease-in-out infinite;
}

.float-particle-delay-1 {
  animation-delay: 0.5s;
}

.float-particle-delay-2 {
  animation-delay: 1.2s;
}

.float-particle-delay-3 {
  animation-delay: 2s;
}

.float-particle-delay-4 {
  animation-delay: 2.8s;
}

.float-particle-delay-5 {
  animation-delay: 3.5s;
}

/* Glow ring animation */
@keyframes glowRing {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(59, 130, 246, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.glow-ring {
  animation: glowRing 2.5s ease-out infinite;
}

/* Subtle float for cards */
@keyframes subtleFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.hover-float:hover {
  animation: subtleFloat 2s ease-in-out infinite;
}

/* Counter roll up */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.count-up {
  animation: countUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Line draw animation for borders */
@keyframes lineDraw {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.line-draw::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 4px;
  animation: lineDraw 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Twinkle stars background */
@keyframes twinkle {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.8;
  }
}

.twinkle {
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.6) 50%, transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, 0.4) 50%, transparent),
    radial-gradient(1px 1px at 50% 10%, rgba(255, 255, 255, 0.5) 50%, transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(255, 255, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.5) 50%, transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255, 255, 255, 0.4) 50%, transparent),
    radial-gradient(1px 1px at 80% 15%, rgba(255, 255, 255, 0.6) 50%, transparent);
  animation: twinkle 3s ease-in-out infinite alternate;
}

/* Floaty background (alias used in landing) */
@keyframes floatyBg {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.floaty {
  background-size: 200% 200%;
  animation: floatyBg 15s ease-in-out infinite;
}