/* ═══════════════════════════════════════════════
   OCEAN PRODUCTION — ANIMATIONS & MICRO-INTERACTIONS
═══════════════════════════════════════════════ */

/* ── PAGE ENTER ANIMATION ─────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main > *,
.emp-main > * {
  animation: pageIn .35s cubic-bezier(.22,1,.36,1) both;
}

/* ── CARD STAGGER ─────────────────────── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.stat-card        { animation: cardIn .4s cubic-bezier(.22,1,.36,1) both; }
.stat-card:nth-child(1) { animation-delay: .03s; }
.stat-card:nth-child(2) { animation-delay: .07s; }
.stat-card:nth-child(3) { animation-delay: .11s; }
.stat-card:nth-child(4) { animation-delay: .15s; }

.restaurant-card  { animation: cardIn .4s cubic-bezier(.22,1,.36,1) both; }
.task-card        { animation: cardIn .35s cubic-bezier(.22,1,.36,1) both; }
.emp-task-card    { animation: cardIn .35s cubic-bezier(.22,1,.36,1) both; }

.restaurants-grid .restaurant-card:nth-child(1) { animation-delay: .02s; }
.restaurants-grid .restaurant-card:nth-child(2) { animation-delay: .05s; }
.restaurants-grid .restaurant-card:nth-child(3) { animation-delay: .08s; }
.restaurants-grid .restaurant-card:nth-child(4) { animation-delay: .11s; }
.restaurants-grid .restaurant-card:nth-child(5) { animation-delay: .14s; }
.restaurants-grid .restaurant-card:nth-child(6) { animation-delay: .17s; }

/* ── CARD INTERACTIONS ────────────────── */
.restaurant-card,
.task-card,
.emp-task-card {
  transition: transform .22s cubic-bezier(.22,1,.36,1),
              box-shadow .22s ease,
              border-color .15s ease;
}
.restaurant-card:active,
.task-card:active,
.emp-task-card:active {
  transform: scale(.97) !important;
}

/* ── LIST ITEM INTERACTIONS ───────────── */
.list-item {
  transition: background .12s ease, transform .15s ease;
}
.list-item:active {
  transform: scale(.985);
  background: #F1F5F9 !important;
}

/* ── BUTTON ANIMATIONS ────────────────── */
.btn, .auth-btn, .google-btn, .dpill, .task-status-btn, .etc-btn, .sb-item, .sb-out {
  transition: all .18s cubic-bezier(.22,1,.36,1);
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .auth-btn:active, .dpill:active, .etc-btn:active {
  transform: scale(.95) !important;
}

/* ── MODAL ANIMATION (enhanced) ──────── */
.modal-bg {
  transition: opacity .25s ease;
}
.modal {
  transition: all .35s cubic-bezier(.22,1,.36,1);
}

/* ── TOAST ANIMATION ──────────────────── */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(30px) scale(.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.toast.show {
  animation: toastIn .4s cubic-bezier(.22,1,.36,1) both;
}

/* ── SIDEBAR ANIMATION ────────────────── */
.sidebar {
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.sb-overlay {
  transition: opacity .3s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ── BADGE PULSE ──────────────────────── */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.badge.red { animation: pulse 2s ease-in-out infinite; }

/* ── EMPLOYEE STAT TAP ────────────────── */
.emp-stat {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.emp-stat:active {
  transform: scale(.93);
}

/* ── LOADING WAVE ─────────────────────── */
@keyframes loadFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(-3deg); }
  75%      { transform: translateY(-4px) rotate(3deg); }
}
.load-wave { animation: loadFloat 2s ease-in-out infinite; }

/* ── SKELETON LOADING ─────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--r-sm);
}

/* ── FAB (Floating Action Button) ─────── */
.fab {
  position: fixed;
  bottom: 80px;
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #FFF;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(37,99,235,.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
  transition: all .2s cubic-bezier(.22,1,.36,1);
  -webkit-tap-highlight-color: transparent;
}
.fab:active { transform: scale(.9); }

/* ── SCROLLBAR STYLING ────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── SMOOTH SCROLL ────────────────────── */
html { scroll-behavior: smooth; }

/* ── FOCUS STYLES (accessibility) ─────── */
.form-input:focus,
.auth-input:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ── SELECTION COLOR ──────────────────── */
::selection {
  background: rgba(37,99,235,.2);
  color: var(--text);
}