/* ═══════════════════════════════════════════════════════════════
   FUNDIWANGU DESIGN SYSTEM - components.css
   Unified component library for all portals
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Transitions ─────────────────────────────────────────── */
@keyframes pageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulse-soft { 0%,100% { opacity:1; } 50% { opacity:.6; } }
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes countUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes toast-in { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes toast-out { from { transform:translateY(0); opacity:1; } to { transform:translateY(100%); opacity:0; } }

.fw-page-content { animation: pageIn 0.4s ease-out; animation-fill-mode: none; }
.fw-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.fw-slide-up { animation: slideUp 0.4s ease-out forwards; }
.fw-slide-right { animation: slideInRight 0.35s ease-out forwards; }
.fw-scale-in { animation: scaleIn 0.3s ease-out forwards; }

/* Staggered children animation */
.fw-stagger > * { opacity:0; animation: slideUp 0.4s ease-out forwards; }
.fw-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.fw-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.fw-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.fw-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.fw-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.fw-stagger > *:nth-child(6) { animation-delay: 0.3s; }
.fw-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.fw-stagger > *:nth-child(8) { animation-delay: 0.4s; }

/* ── Cards ────────────────────────────────────────────────────── */
.fw-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.fw-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}
.fw-card-static {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
.fw-card-flat {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.fw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 12px; font-weight: 600; font-size: 14px;
  transition: all 0.2s ease; cursor: pointer; border: none; outline: none;
  text-decoration: none; white-space: nowrap;
}
.fw-btn:active { transform: scale(0.96); }

.fw-btn-primary {
  background: #0369A1; color: #fff;
  box-shadow: 0 2px 8px rgba(3,105,161,0.25);
}
.fw-btn-primary:hover { background: #025C8F; box-shadow: 0 4px 16px rgba(3,105,161,0.35); }

.fw-btn-secondary {
  background: #f0f9ff; color: #0369A1; border: 1px solid rgba(3,105,161,0.15);
}
.fw-btn-secondary:hover { background: #e0f2fe; border-color: rgba(3,105,161,0.3); }

.fw-btn-ghost {
  background: transparent; color: #374151; border: 1px solid #e5e7eb;
}
.fw-btn-ghost:hover { background: #f9fafb; border-color: #d1d5db; }

.fw-btn-danger {
  background: #fee2e2; color: #dc2626; border: 1px solid rgba(220,38,38,0.15);
}
.fw-btn-danger:hover { background: #fecaca; }

.fw-btn-success {
  background: #10b981; color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,0.25);
}
.fw-btn-success:hover { background: #059669; }

.fw-btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 10px; }
.fw-btn-lg { padding: 14px 28px; font-size: 16px; border-radius: 14px; }
.fw-btn-icon { padding: 8px; width: 36px; height: 36px; border-radius: 10px; }

/* ── Badges ───────────────────────────────────────────────────── */
.fw-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
  line-height: 1.4;
}
.fw-badge-primary { background: #f0f9ff; color: #0369A1; }
.fw-badge-success { background: #ecfdf5; color: #059669; }
.fw-badge-warning { background: #fffbeb; color: #d97706; }
.fw-badge-danger { background: #fef2f2; color: #dc2626; }
.fw-badge-info { background: #eff6ff; color: #2563eb; }
.fw-badge-neutral { background: #f3f4f6; color: #6b7280; }

/* ── Stat Cards ───────────────────────────────────────────────── */
.fw-stat-card {
  background: #fff; border-radius: 16px; padding: 20px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex; flex-direction: column; gap: 8px;
}
.fw-stat-card .fw-stat-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.fw-stat-card .fw-stat-value {
  font-size: 24px; font-weight: 800; color: #111827; line-height: 1.2;
  animation: countUp 0.5s ease-out;
}
.fw-stat-card .fw-stat-label { font-size: 13px; color: #6b7280; font-weight: 500; }

/* ── Section Headers ──────────────────────────────────────────── */
.fw-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 12px;
}
.fw-section-title {
  font-size: 18px; font-weight: 700; color: #111827;
  display: flex; align-items: center; gap: 8px;
}
.fw-section-title::before {
  content: ''; width: 4px; height: 20px; border-radius: 4px;
  background: linear-gradient(180deg, #0369A1, #38bdf8);
}
.fw-section-link {
  font-size: 13px; font-weight: 600; color: #0369A1;
  text-decoration: none; display: flex; align-items: center; gap: 4px;
  transition: gap 0.2s ease;
}
.fw-section-link:hover { gap: 8px; }

/* ── Skeleton Loading ─────────────────────────────────────────── */
.fw-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}
.fw-skeleton-circle { border-radius: 50%; }
.fw-skeleton-text { height: 14px; margin-bottom: 8px; }
.fw-skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.fw-skeleton-card { height: 120px; border-radius: 16px; }

/* ── Toast System ─────────────────────────────────────────────── */
#fw-toast-container {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 10000; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.fw-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 12px;
  background: #1f2937; color: #fff; font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  animation: toast-in 0.3s ease-out;
  max-width: 400px;
}
.fw-toast.removing { animation: toast-out 0.25s ease-in forwards; }
.fw-toast-success { background: #059669; }
.fw-toast-error { background: #dc2626; }
.fw-toast-info { background: #0369A1; }

/* ── Empty States ─────────────────────────────────────────────── */
.fw-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 24px; text-align: center;
}
.fw-empty-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: #f3f4f6; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.fw-empty-icon svg { width: 36px; height: 36px; color: #9ca3af; }
.fw-empty-title { font-size: 16px; font-weight: 700; color: #374151; margin-bottom: 4px; }
.fw-empty-desc { font-size: 14px; color: #6b7280; max-width: 300px; }

/* ── Tabs ─────────────────────────────────────────────────────── */
.fw-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: #f3f4f6; border-radius: 14px; overflow-x: auto;
}
.fw-tab {
  padding: 8px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: #6b7280; cursor: pointer; white-space: nowrap;
  transition: all 0.2s ease; border: none; background: transparent;
  text-decoration: none;
}
.fw-tab:hover { color: #374151; background: rgba(255,255,255,0.5); }
.fw-tab.active, .fw-tab-active {
  background: #fff; color: #0369A1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Quick Actions ────────────────────────────────────────────── */
.fw-quick-action {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px; border-radius: 14px; text-decoration: none;
  transition: all 0.2s ease; background: #fff; border: 1px solid #f3f4f6;
}
.fw-quick-action:hover { background: #f0f9ff; border-color: rgba(3,105,161,0.15); transform: translateY(-2px); }
.fw-quick-action-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.fw-quick-action-label { font-size: 12px; font-weight: 600; color: #374151; text-align: center; }

/* ── Progress Bar ─────────────────────────────────────────────── */
.fw-progress { height: 8px; background: #f3f4f6; border-radius: 8px; overflow: hidden; }
.fw-progress-bar {
  height: 100%; border-radius: 8px; transition: width 0.6s ease;
  background: linear-gradient(90deg, #0369A1, #38bdf8);
}

/* ── Avatar ───────────────────────────────────────────────────── */
.fw-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.fw-avatar-sm { width: 32px; height: 32px; }
.fw-avatar-lg { width: 56px; height: 56px; }
.fw-avatar-xl { width: 80px; height: 80px; }

/* Online indicator */
.fw-online-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #10b981; border: 2px solid #fff;
  position: absolute; bottom: 0; right: 0;
}
.fw-offline-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #d1d5db; border: 2px solid #fff;
  position: absolute; bottom: 0; right: 0;
}

/* ── Hero Section (Light) ─────────────────────────────────────── */
.fw-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 50%, #e0f2fe 100%);
  padding: 32px 24px; border-radius: 0 0 24px 24px;
  position: relative; overflow: hidden;
}
.fw-hero::before {
  content: ''; position: absolute; top: -50%; right: -20%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(3,105,161,0.06) 0%, transparent 70%);
}

/* ── List Items ───────────────────────────────────────────────── */
.fw-list-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: 12px; transition: background 0.15s ease; cursor: pointer;
}
.fw-list-item:hover { background: #f9fafb; }
.fw-list-item-unread { background: #f0f9ff; }
.fw-list-item-unread:hover { background: #e0f2fe; }

/* ── Filter Chips ─────────────────────────────────────────────── */
.fw-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; }
.fw-chips::-webkit-scrollbar { display: none; }
.fw-chip {
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
  white-space: nowrap; cursor: pointer; border: 1px solid #e5e7eb;
  background: #fff; color: #374151; transition: all 0.2s ease;
  text-decoration: none;
}
.fw-chip:hover { border-color: #0369A1; color: #0369A1; }
.fw-chip.active { background: #0369A1; color: #fff; border-color: #0369A1; }

/* ── Notification Dot ─────────────────────────────────────────── */
.fw-notif-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #0369A1;
  flex-shrink: 0;
}

/* ── Hover Lift Utility ───────────────────────────────────────── */
.fw-hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.fw-hover-lift:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

/* ── Card Hover Effect ────────────────────────────────────────── */
.fw-card-hover {
  transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.3s ease;
}
.fw-card-hover:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.04);
}

/* ── Avatar Ring (Instagram Stories style) ────────────────────── */
@keyframes ring-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fw-avatar-ring {
  position: relative;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0369A1, #38bdf8, #a78bfa, #0369A1);
  background-size: 300% 300%;
  animation: ring-rotate 4s linear infinite;
}
.fw-avatar-ring img, .fw-avatar-ring > span {
  border-radius: 50%;
  border: 2px solid #fff;
}
.fw-avatar-ring-static {
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0369A1, #38bdf8);
}
.fw-avatar-ring-static img, .fw-avatar-ring-static > span {
  border-radius: 50%;
  border: 2px solid #fff;
}

/* ── Online Indicator (pulse) ─────────────────────────────────── */
@keyframes online-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 50% { box-shadow: 0 0 0 4px rgba(16,185,129,0); } }
.fw-avatar-online::after {
  content: ''; position: absolute; bottom: 1px; right: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #10b981; border: 2px solid #fff;
  animation: online-pulse 2s infinite;
}

/* ── Image Blur-Up Loading ────────────────────────────────────── */
.fw-img-blur-up {
  filter: blur(20px); transform: scale(1.05);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.fw-img-blur-up.loaded { filter: blur(0); transform: scale(1); }
.fw-img-zoom {
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.fw-img-zoom:hover { transform: scale(1.08); }

/* ── Button Press Effect ──────────────────────────────────────── */
.fw-btn-press { transition: transform 0.1s ease, box-shadow 0.1s ease; }
.fw-btn-press:active { transform: scale(0.93); box-shadow: none !important; }

/* ── Gradient Border (inputs) ─────────────────────────────────── */
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.fw-gradient-border {
  position: relative;
  border: 2px solid transparent;
  border-radius: 14px;
  background-clip: padding-box;
  transition: border-color 0.3s;
}
.fw-gradient-border:focus-within {
  border-color: transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #0369A1, #38bdf8, #a78bfa, #0369A1);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ── Modal Glass ──────────────────────────────────────────────── */
.fw-modal-glass {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 10px 20px rgba(0,0,0,0.05);
}
.fw-overlay-glass {
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Badge Pulse ──────────────────────────────────────────────── */
@keyframes badge-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.fw-badge-pulse { animation: badge-pulse 2s ease-in-out infinite; }

/* ── Tab Underline Variant (Instagram) ────────────────────────── */
.fw-tabs-underline {
  display: flex; gap: 0; border-bottom: 1px solid #e5e7eb;
  overflow-x: auto; position: relative;
}
.fw-tabs-underline::-webkit-scrollbar { display: none; }
.fw-tab-underline {
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  color: #6b7280; cursor: pointer; white-space: nowrap;
  transition: color 0.2s ease; border: none; background: transparent;
  text-decoration: none; position: relative;
}
.fw-tab-underline::after {
  content: ''; position: absolute; bottom: -1px; left: 50%; width: 0; height: 2px;
  background: #0369A1; border-radius: 2px;
  transition: width 0.3s ease, left 0.3s ease;
}
.fw-tab-underline:hover { color: #374151; }
.fw-tab-underline.active {
  color: #0369A1; font-weight: 700;
}
.fw-tab-underline.active::after { width: 100%; left: 0; }

/* ── Card Enter Animation ─────────────────────────────────────── */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.fw-card-enter {
  opacity: 0;
  animation: cardEnter 0.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.fw-card-enter:nth-child(1) { animation-delay: 0.05s; }
.fw-card-enter:nth-child(2) { animation-delay: 0.1s; }
.fw-card-enter:nth-child(3) { animation-delay: 0.15s; }
.fw-card-enter:nth-child(4) { animation-delay: 0.2s; }
.fw-card-enter:nth-child(5) { animation-delay: 0.25s; }
.fw-card-enter:nth-child(6) { animation-delay: 0.3s; }
.fw-card-enter:nth-child(7) { animation-delay: 0.35s; }
.fw-card-enter:nth-child(8) { animation-delay: 0.4s; }
.fw-card-enter:nth-child(9) { animation-delay: 0.45s; }
.fw-card-enter:nth-child(10) { animation-delay: 0.5s; }
.fw-card-enter:nth-child(11) { animation-delay: 0.55s; }
.fw-card-enter:nth-child(12) { animation-delay: 0.6s; }

/* ── Reaction Pop (Like button) ───────────────────────────────── */
@keyframes reaction-pop { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } }
.fw-reaction-pop { animation: reaction-pop 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }

/* ── Smooth Image ─────────────────────────────────────────────── */
.fw-smooth-img {
  border-radius: 14px; overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.fw-smooth-img:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* ── Shine Effect (button sweep) ──────────────────────────────── */
@keyframes shine-sweep { 0% { left: -75%; } 100% { left: 125%; } }
.fw-shine {
  position: relative; overflow: hidden;
}
.fw-shine::after {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
}
.fw-shine:hover::after { animation: shine-sweep 0.6s ease; }

/* ── Gradient Text ────────────────────────────────────────────── */
.fw-gradient-text {
  background: linear-gradient(135deg, #0369A1, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 3D Tilt (Quick Actions) ──────────────────────────────────── */
.fw-tilt {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}
.fw-tilt:hover {
  transform: perspective(800px) rotateX(3deg) rotateY(-3deg) translateY(-4px);
}

/* ── Status Indicator Line ────────────────────────────────────── */
.fw-status-border {
  border-left: 4px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.fw-status-border:hover { background: #f9fafb; }

/* ── Count-Up Number ──────────────────────────────────────────── */
@keyframes count-pop { from { opacity: 0; transform: scale(0.5) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.fw-count-up { animation: count-pop 0.6s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }

/* ── Floating Label Input ─────────────────────────────────────── */
.fw-input-float {
  position: relative;
}
.fw-input-float input, .fw-input-float textarea {
  width: 100%; padding: 14px 16px; border: 1.5px solid #e5e7eb;
  border-radius: 12px; font-size: 14px; color: #1e293b;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}
.fw-input-float input:focus, .fw-input-float textarea:focus {
  border-color: #0369A1; outline: none;
  box-shadow: 0 0 0 3px rgba(3,105,161,0.1);
}

/* ── Skeleton V2 (better shimmer) ─────────────────────────────── */
.fw-skeleton-v2 {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 20%, #f1f5f9 40%, #f1f5f9 100%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}

/* ── Glass Card ───────────────────────────────────────────────── */
.fw-glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

/* ── Masonry Grid ─────────────────────────────────────────────── */
.fw-masonry {
  columns: 3; column-gap: 16px;
}
.fw-masonry > * {
  break-inside: avoid; margin-bottom: 16px;
}
@media (max-width: 1024px) { .fw-masonry { columns: 2; } }
@media (max-width: 640px) { .fw-masonry { columns: 1; } }

/* ── Stacked Avatars (group) ──────────────────────────────────── */
.fw-avatar-stack {
  display: flex;
}
.fw-avatar-stack > * {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff; margin-left: -8px;
  object-fit: cover;
}
.fw-avatar-stack > *:first-child { margin-left: 0; }

/* ── Ripple Effect ────────────────────────────────────────────── */
@keyframes ripple-out { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(4); opacity: 0; } }
.fw-ripple {
  position: relative; overflow: hidden;
}
.fw-ripple::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(3,105,161,0.2);
  transform: translate(-50%,-50%) scale(0);
  opacity: 0; pointer-events: none;
}
.fw-ripple:active::before { animation: ripple-out 0.5s ease-out; }

/* ── 3D Perspective System ────────────────────────────────────── */
.fw-perspective { perspective: 1200px; perspective-origin: center; }
.fw-3d-space { transform-style: preserve-3d; }

/* Mouse-tracked tilt card (JS-driven via --rx, --ry custom properties) */
.fw-tilt-card {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
.fw-tilt-card:hover {
  box-shadow: 0 20px 60px rgba(3,105,161,0.15), 0 8px 20px rgba(0,0,0,0.1);
}

/* 3D Flip Card */
.fw-flip-card { perspective: 800px; }
.fw-flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
.fw-flip-card:hover .fw-flip-inner,
.fw-flip-card.flipped .fw-flip-inner { transform: rotateY(180deg); }
.fw-flip-front, .fw-flip-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute; inset: 0;
  border-radius: inherit;
}
.fw-flip-back { transform: rotateY(180deg); }

/* Depth layers (Z-axis parallax) */
.fw-depth-bg { transform: translateZ(-50px) scale(1.05); }
.fw-depth-mid { transform: translateZ(0px); }
.fw-depth-front { transform: translateZ(30px); }
.fw-depth-pop { transform: translateZ(60px) scale(0.95); }

/* Interactive press/spring response */
.fw-press { transition: transform 0.1s cubic-bezier(.25,.46,.45,.94); }
.fw-press:active { transform: scale(0.92) translateZ(-10px); }

/* 3D hover lift */
.fw-3d-lift {
  transition: transform 0.3s cubic-bezier(.25,.46,.45,.94), box-shadow 0.3s ease;
  transform-style: preserve-3d;
}
.fw-3d-lift:hover {
  transform: translateY(-8px) translateZ(20px) rotateX(2deg);
  box-shadow: 0 25px 50px rgba(0,0,0,0.12), 0 0 0 1px rgba(3,105,161,0.05);
}

/* 3D entrance animations */
@keyframes enter3D {
  from { opacity: 0; transform: perspective(800px) rotateX(-8deg) translateY(30px) translateZ(-40px); }
  to { opacity: 1; transform: perspective(800px) rotateX(0) translateY(0) translateZ(0); }
}
@keyframes flipIn {
  from { opacity: 0; transform: perspective(800px) rotateY(-90deg); }
  to { opacity: 1; transform: perspective(800px) rotateY(0); }
}
@keyframes depthPop {
  from { opacity: 0; transform: translateZ(-30px) scale(0.9); }
  to { opacity: 1; transform: translateZ(0) scale(1); }
}
@keyframes float3D {
  0%, 100% { transform: translateY(0) translateZ(0) rotateX(0); }
  50% { transform: translateY(-6px) translateZ(10px) rotateX(1deg); }
}
.fw-enter-3d { animation: enter3D 0.6s cubic-bezier(.25,.46,.45,.94) forwards; opacity: 0; }
.fw-flip-in { animation: flipIn 0.5s cubic-bezier(.25,.46,.45,.94) forwards; opacity: 0; }
.fw-depth-pop-anim { animation: depthPop 0.4s cubic-bezier(.25,.46,.45,.94) forwards; opacity: 0; }
.fw-float-3d { animation: float3D 3s ease-in-out infinite; }

/* 3D stagger entrance */
.fw-3d-stagger > * { opacity: 0; animation: enter3D 0.5s cubic-bezier(.25,.46,.45,.94) forwards; }
.fw-3d-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.fw-3d-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.fw-3d-stagger > *:nth-child(3) { animation-delay: 0.19s; }
.fw-3d-stagger > *:nth-child(4) { animation-delay: 0.26s; }
.fw-3d-stagger > *:nth-child(5) { animation-delay: 0.33s; }
.fw-3d-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.fw-3d-stagger > *:nth-child(7) { animation-delay: 0.47s; }
.fw-3d-stagger > *:nth-child(8) { animation-delay: 0.54s; }

/* 3D Avatar (floating in Z-space) */
.fw-avatar-3d {
  transform: translateZ(40px);
  transition: transform 0.3s ease;
}
.fw-avatar-3d:hover { transform: translateZ(60px) scale(1.05); }

/* 3D Parallax cover */
.fw-cover-3d {
  transform: translateZ(-30px) scale(1.06);
  transition: transform 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM NAV & LAYOUT SYSTEM (2026)
   ═══════════════════════════════════════════════════════════════ */

/* ── Premium Keyframes ─────────────────────────────────────────── */
@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes badgeBounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  80%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(3,105,161,0.3); }
  50%      { box-shadow: 0 0 16px 4px rgba(3,105,161,0.15); }
}
@keyframes slideInStagger {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes floatUp {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pillSlide {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes scrollTopIn {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Glass Nav Surface ─────────────────────────────────────────── */
.fw-glass-nav {
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8);
  border-bottom: 1px solid var(--glass-border-dim);
  box-shadow: var(--shadow-nav);
  transition: box-shadow var(--motion-smooth) var(--ease-smooth),
              background var(--motion-smooth) var(--ease-smooth);
}
.fw-glass-nav.scrolled {
  box-shadow: var(--shadow-nav-scroll);
  background: var(--glass-bg-heavy);
}
.fw-glass-nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gradient-nav-border);
  opacity: 0;
  transition: opacity var(--motion-smooth) var(--ease-smooth);
}
.fw-glass-nav.scrolled::after { opacity: 1; }

/* ── Premium Dropdown ──────────────────────────────────────────── */
.fw-dropdown-premium {
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border: 1px solid var(--glass-border-dim);
  box-shadow: var(--shadow-dropdown);
  border-radius: 16px;
  animation: navSlideDown var(--motion-expand) var(--ease-bounce);
  overflow: hidden;
}
.fw-dropdown-premium .dd-item {
  position: relative;
  transition: background var(--motion-micro) var(--ease-smooth),
              transform var(--motion-micro) var(--ease-smooth);
}
.fw-dropdown-premium .dd-item:hover {
  background: rgba(3,105,161,.05);
  transform: translateX(3px);
}
.fw-dropdown-premium .dd-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0;
  background: #0369A1;
  border-radius: 0 4px 4px 0;
  transition: height var(--motion-micro) var(--ease-smooth);
}
.fw-dropdown-premium .dd-item:hover::before { height: 60%; }

/* ── Nav Active Pill ───────────────────────────────────────────── */
.fw-nav-pill-active {
  position: relative;
}
.fw-nav-pill-active::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 8px; right: 8px;
  height: 3px;
  background: linear-gradient(90deg, #0369A1, #38bdf8);
  border-radius: 3px;
  animation: pillSlide var(--motion-smooth) var(--ease-bounce);
  transform-origin: center;
}

/* ── Premium Badge ─────────────────────────────────────────────── */
.fw-badge-animated {
  animation: badgeBounce 0.4s var(--ease-bounce);
  box-shadow: var(--shadow-badge);
}

/* ── Glass Bottom Nav ──────────────────────────────────────────── */
.fw-glass-bottom {
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8);
  box-shadow: var(--shadow-bottom-nav);
  border-top: 1px solid var(--glass-border-dim);
}
.fw-bottom-tab {
  transition: transform var(--motion-micro) var(--ease-smooth),
              color var(--motion-micro) var(--ease-smooth);
}
.fw-bottom-tab:active { transform: scale(0.88); }
.fw-bottom-tab.active { color: #0369A1; }

/* ── Create Fab (Bottom Nav) ───────────────────────────────────── */
.fw-create-fab {
  position: relative;
  background: linear-gradient(135deg, #0369A1 0%, #38bdf8 100%);
  box-shadow: 0 4px 20px rgba(3,105,161,.35), 0 2px 8px rgba(0,0,0,.1);
  transition: transform var(--motion-micro) var(--ease-bounce),
              box-shadow var(--motion-micro) var(--ease-smooth);
}
.fw-create-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(3,105,161,.45), 0 4px 12px rgba(0,0,0,.12);
}
.fw-create-fab:active { transform: scale(0.92); }
.fw-create-fab::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(3,105,161,.3), rgba(56,189,248,.2));
  opacity: 0;
  animation: glowPulse 2.5s ease-in-out infinite;
  border-radius: 50%;
  z-index: -1;
}

/* ── Drawer Stagger ────────────────────────────────────────────── */
.fw-drawer-stagger > * {
  opacity: 0;
  animation: slideInStagger 0.3s var(--ease-snap) forwards;
}
.fw-drawer-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.fw-drawer-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.fw-drawer-stagger > *:nth-child(3) { animation-delay: 0.11s; }
.fw-drawer-stagger > *:nth-child(4) { animation-delay: 0.14s; }
.fw-drawer-stagger > *:nth-child(5) { animation-delay: 0.17s; }
.fw-drawer-stagger > *:nth-child(6) { animation-delay: 0.20s; }
.fw-drawer-stagger > *:nth-child(7) { animation-delay: 0.23s; }
.fw-drawer-stagger > *:nth-child(8) { animation-delay: 0.26s; }
.fw-drawer-stagger > *:nth-child(9) { animation-delay: 0.29s; }
.fw-drawer-stagger > *:nth-child(10) { animation-delay: 0.32s; }

/* ── Scroll To Top ─────────────────────────────────────────────── */
.fw-scroll-top {
  position: fixed;
  bottom: 80px; right: 20px;
  width: 44px; height: 44px;
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border-dim);
  border-radius: 50%;
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(20px) scale(0.8);
  transition: opacity var(--motion-smooth) var(--ease-smooth),
              transform var(--motion-smooth) var(--ease-bounce);
  z-index: 50;
}
.fw-scroll-top.visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.fw-scroll-top:hover { transform: translateY(-2px) scale(1.05); }
.fw-scroll-top:active { transform: scale(0.92); }

/* ── Premium Page Enter ────────────────────────────────────────── */
.fw-page-enter {
  animation: floatUp 0.45s var(--ease-snap) both;
}

/* ── Footer Premium ────────────────────────────────────────────── */
.fw-footer-link {
  position: relative;
  transition: color 0.2s ease;
}
.fw-footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: #38bdf8;
  border-radius: 2px;
  transition: width 0.25s var(--ease-smooth);
}
.fw-footer-link:hover::after { width: 100%; }
.fw-footer-link:hover { color: #fff; }

/* Footer social icon SVG color on hover */
.fw-footer-social:hover svg { color: #fff; }

/* ── Icon Button (nav actions) ─────────────────────────────────── */
.fw-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  transition: background var(--motion-micro) var(--ease-smooth),
              transform var(--motion-micro) var(--ease-smooth);
  position: relative;
  flex-shrink: 0;
}
.fw-icon-btn:hover { background: rgba(3,105,161,.06); }
.fw-icon-btn:active { transform: scale(0.9); }
.fw-icon-btn svg { width: 20px; height: 20px; }

/* ── Search Input Premium ──────────────────────────────────────── */
.fw-search-premium {
  transition: width var(--motion-expand) var(--ease-smooth),
              box-shadow var(--motion-micro) var(--ease-smooth),
              border-color var(--motion-micro) var(--ease-smooth),
              background var(--motion-micro) var(--ease-smooth);
}
.fw-search-premium:focus {
  box-shadow: 0 0 0 4px rgba(3,105,161,.08);
  border-color: rgba(3,105,161,.3);
  background: #fff;
}

/* ── Responsive Helpers ───────────────────────────────────────── */
@media (max-width: 768px) {
  .fw-hero { padding: 20px 16px; border-radius: 0 0 16px 16px; }
  .fw-stat-card { padding: 14px; }
  .fw-stat-card .fw-stat-value { font-size: 20px; }
  .fw-section-title { font-size: 16px; }
  .fw-btn { padding: 8px 16px; font-size: 13px; }
  .fw-card-hover:hover { transform: translateY(-2px) scale(1.01); }
  .fw-tilt:hover { transform: none; }
  /* Disable heavy 3D on mobile for performance */
  .fw-tilt-card { transform: none !important; }
  .fw-tilt-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
  .fw-3d-lift:hover { transform: translateY(-4px); }
  .fw-flip-card:hover .fw-flip-inner { transform: none; }
}

/* ── Reduced Motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fw-glass-nav::after,
  .fw-nav-pill-active::after,
  .fw-create-fab::before { animation: none; }
  .fw-drawer-stagger > * { animation: none; opacity: 1; }
  .fw-badge-animated { animation: none; }
  .fw-page-enter { animation: none; }
  .fw-scroll-top { transition: opacity 0.01ms; }
}