/* ============================================
   AMBARELLA — Global Effects & Animations CSS
   ============================================ */

/* Konfetti */
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Ripple */
@keyframes rippleAnim {
  to { width: 300px; height: 300px; opacity: 0; }
}

/* Toast Notifications */
.toast-notification {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 99998;
  opacity: 0;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.toast-notification.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; }
.toast-error { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.toast-info { background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.3); color: #93c5fd; }
.toast-warning { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.3); color: #fcd34d; }
.toast-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.toast-success .toast-icon { background: rgba(16,185,129,.2); }
.toast-error .toast-icon { background: rgba(239,68,68,.2); }

/* Skeleton Loading */
.skeleton-loading {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.03) !important;
  color: transparent !important;
  border-color: transparent !important;
}
.skeleton-loading * { visibility: hidden; }
.skeleton-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,.04) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Hover lift for all interactive elements */
.stat-card, .panel, .mod-card, .course-card, .job-card, 
.mentor-card, .news-card, .task-card, .product-card,
.habit-card, .feature-card, .feat-card, .quick-link,
.eco-stat, .testi-card, .news-card-home, .job-card-h {
  transition: all .4s cubic-bezier(.4,0,.2,1) !important;
}

/* Gradient border animation on focus */
input:focus, textarea:focus, select:focus {
  border-color: rgba(59,130,246,.5) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.1), 0 0 20px rgba(59,130,246,.05) !important;
}

/* Smooth link underline */
.nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: width .3s ease;
}
.nav a:hover::after { width: 100%; }
.nav a.active::after { width: 16px; left: 50%; transform: translateX(-50%); }

/* Image/card hover zoom */
.zoom-hover { transition: transform .4s ease; }
.zoom-hover:hover { transform: scale(1.02); }

/* Pulse animation for live indicators */
.pulse-live {
  animation: pulseLive 2s ease-in-out infinite;
}
@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
  50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}

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

/* Stagger children animation */
.stagger-children > * {
  opacity: 0;
  transform: translateY(15px);
  animation: staggerIn .5s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: .05s; }
.stagger-children > *:nth-child(2) { animation-delay: .1s; }
.stagger-children > *:nth-child(3) { animation-delay: .15s; }
.stagger-children > *:nth-child(4) { animation-delay: .2s; }
.stagger-children > *:nth-child(5) { animation-delay: .25s; }
.stagger-children > *:nth-child(6) { animation-delay: .3s; }
.stagger-children > *:nth-child(7) { animation-delay: .35s; }
.stagger-children > *:nth-child(8) { animation-delay: .4s; }
@keyframes staggerIn { to { opacity: 1; transform: translateY(0); } }

/* Floating action button pulse */
.ai-fab { animation: fabPulse 3s ease-in-out infinite; }
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,99,235,.4); }
  50% { box-shadow: 0 4px 30px rgba(37,99,235,.6), 0 0 60px rgba(37,99,235,.1); }
}

/* Mobile bottom nav active glow */
.mobile-bottom-nav a.active svg {
  filter: drop-shadow(0 0 6px rgba(96,165,250,.5));
}

/* Smooth page section dividers */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,.3) 50%, transparent 100%);
  margin: 0 auto;
  max-width: 400px;
}

/* Light mode overrides */
.light-mode { --surface: rgba(0,0,0,.02); --border: rgba(0,0,0,.08); --muted: #64748b; }
.light-mode .header { background: rgba(255,255,255,.9); border-bottom-color: rgba(0,0,0,.06); }
.light-mode .nav a { color: #475569; }
.light-mode .nav a:hover, .light-mode .nav a.active { color: #0f172a; }
.light-mode .logo { color: #0f172a; }
.light-mode .footer { background: #f1f5f9; border-top-color: rgba(0,0,0,.06); color: #64748b; }
.light-mode .btn-outline { border-color: rgba(0,0,0,.1); color: #475569; background: rgba(0,0,0,.02); }
.light-mode .mobile-bottom-nav { background: rgba(255,255,255,.95); border-top-color: rgba(0,0,0,.06); }
.light-mode .mobile-bottom-nav a { color: #64748b; }
.light-mode .mobile-bottom-nav a.active { color: #2563eb; }
.light-mode .ai-chat-box { background: rgba(255,255,255,.98); border-color: rgba(0,0,0,.1); }
.light-mode .ai-msg-bot { background: #f1f5f9; border-color: rgba(0,0,0,.06); color: #334155; }
.light-mode .alert-success { background: rgba(22,163,74,.06); color: #16a34a; border-color: rgba(22,163,74,.15); }

/* === SCROLLBAR for Light Mode === */
.light-mode ::-webkit-scrollbar-track{background:rgba(241,245,249,.8)}
.light-mode ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2563eb,#6366f1)}

/* === TOOLTIP === */
[data-tooltip]{position:relative}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);padding:6px 12px;background:#1e293b;color:#e2e8f0;font-size:12px;font-weight:500;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s;border:1px solid rgba(255,255,255,.06);box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:999}
[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* === BADGE PULSE (for notification count) === */
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:99px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 2px 8px rgba(239,68,68,.4);animation:badgeBounce .5s ease}
@keyframes badgeBounce{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* === TYPING INDICATOR (for AI chat) === */
.typing-indicator{display:flex;align-items:center;gap:4px;padding:8px 14px}
.typing-indicator span{width:6px;height:6px;border-radius:50%;background:#64748b;animation:typingDot 1.4s infinite}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

/* === CARD SHINE EFFECT === */
.shine-card{position:relative;overflow:hidden}
.shine-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.03) 50%,transparent 60%);transform:rotate(0deg);transition:transform .5s}
.shine-card:hover::after{transform:rotate(180deg)}

/* === FOCUS RING (accessibility) === */
*:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}

/* === ANIMATED GRADIENT BORDER === */
.gradient-border{position:relative;border-radius:var(--radius)}
.gradient-border::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899,#3b82f6);background-size:300% 300%;animation:gradientBorderMove 4s ease infinite;z-index:-1;opacity:0;transition:opacity .3s}
.gradient-border:hover::before{opacity:1}
@keyframes gradientBorderMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* === ONLINE DOT === */
.online-dot{width:8px;height:8px;border-radius:50%;background:#10b981;display:inline-block;margin-right:6px;box-shadow:0 0 8px rgba(16,185,129,.6);animation:onlinePulse 2s infinite}
@keyframes onlinePulse{0%,100%{box-shadow:0 0 4px rgba(16,185,129,.4)}50%{box-shadow:0 0 12px rgba(16,185,129,.8)}}

/* === LOADING DOTS === */
.loading-dots{display:inline-flex;gap:4px}
.loading-dots span{width:6px;height:6px;border-radius:50%;background:#3b82f6;animation:loadingDot .8s ease-in-out infinite alternate}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes loadingDot{from{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}

/* === GLASS CARD === */
.glass-card{background:rgba(255,255,255,.03);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.2)}

/* === CHIP/TAG INTERACTIVE === */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid var(--border);background:var(--surface);color:#94a3b8;cursor:pointer;transition:all .2s;user-select:none}
.chip:hover{border-color:rgba(59,130,246,.3);color:#93c5fd;background:rgba(59,130,246,.05)}
.chip.active{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3);color:#93c5fd}
.chip .chip-close{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:10px;transition:background .2s}
.chip .chip-close:hover{background:rgba(239,68,68,.3);color:#fca5a5}

/* === NUMBER INPUT SPINNER === */
input[type="number"]{-moz-appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* === SELECTION COLOR === */
::selection{background:rgba(59,130,246,.3);color:#fff}
::-moz-selection{background:rgba(59,130,246,.3);color:#fff}

/* === SMOOTH IMAGE LOADING === */
img{opacity:0;transition:opacity .3s ease}
img[src]{opacity:1}
img.loaded{opacity:1}

/* === TEXTAREA AUTO-RESIZE HINT === */
textarea{transition:height .2s ease}

/* === LINK HOVER UNDERLINE EFFECT === */
.link-animated{position:relative;display:inline}
.link-animated::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--primary);transition:width .3s ease}
.link-animated:hover::after{width:100%}