/* ═══════════════════════════════════════════════
   DabbaMap Animations — micro-interactions, scroll
   reveals, transitions, and motion design
═══════════════════════════════════════════════ */

/* ── Page load ── */
body { transition: opacity 0.35s ease, transform 0.35s ease; }

/* ── Navbar slide down on load ── */
.navbar {
  animation: navSlideDown 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.navbar { transition: transform 0.3s ease, border-color 0.2s, box-shadow 0.2s; }
.navbar.nav-hidden { transform: translateY(-100%); }

/* ── Buttons: lift, press, ripple ── */
.btn {
  position: relative; overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(44,24,16,0.15); }
.btn:active { transform: translateY(1px) scale(0.98); box-shadow: none; }

/* Ripple */
.btn-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  width: 10px; height: 10px;
  transform: scale(0); opacity: 1;
  animation: rippleOut 0.55s linear forwards;
  pointer-events: none;
}
@keyframes rippleOut {
  to { transform: scale(30); opacity: 0; }
}

/* ── Nav links underline ── */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* ── Form inputs: focus glow ── */
.form-input, .form-textarea, .form-select, .search-bar input {
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(200,119,26,0.13);
  transform: translateY(-1px);
}

/* ── Checkbox pills ── */
.checkbox-pill {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease;
}
.checkbox-pill:hover  { transform: scale(1.07); }
.checkbox-pill:active { transform: scale(0.94); }
.checkbox-pill.active {
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(200,119,26,0.25);
}

/* ── Cards: hover lift + warm glow ── */
.dabba-card {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.28s ease;
}
.dabba-card:hover {
  transform: translateY(-7px) scale(1.01);
  box-shadow: 0 20px 56px rgba(44,24,16,0.14), 0 4px 16px rgba(200,119,26,0.08);
}

.sidebar-card, .list-form-card {
  transition: box-shadow 0.25s ease;
}
.sidebar-card:hover { box-shadow: 0 12px 40px rgba(44,24,16,0.12); }

/* ── Scroll reveal base ── */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.65s ease,
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal]:not([data-reveal="left"]):not([data-reveal="right"]):not([data-reveal="scale"]) {
  transform: translateY(36px);
}
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal="none"]  { transform: none; }

[data-reveal].in-view {
  opacity: 1;
  transform: none !important;
}

/* Stagger children on reveal */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-stagger].in-view > * { opacity: 1; transform: none; }
[data-stagger].in-view > *:nth-child(1)  { transition-delay: 0.00s; }
[data-stagger].in-view > *:nth-child(2)  { transition-delay: 0.07s; }
[data-stagger].in-view > *:nth-child(3)  { transition-delay: 0.14s; }
[data-stagger].in-view > *:nth-child(4)  { transition-delay: 0.21s; }
[data-stagger].in-view > *:nth-child(5)  { transition-delay: 0.28s; }
[data-stagger].in-view > *:nth-child(6)  { transition-delay: 0.35s; }
[data-stagger].in-view > *:nth-child(7)  { transition-delay: 0.42s; }
[data-stagger].in-view > *:nth-child(8)  { transition-delay: 0.49s; }

/* ── Count-up numbers ── */
[data-count] {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* ── Step form: slide animation ── */
.step-panel.active {
  animation: stepSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes stepSlideIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}
.step-panel.exiting {
  animation: stepSlideOut 0.25s ease forwards;
}
@keyframes stepSlideOut {
  to { opacity: 0; transform: translateX(-28px); }
}

/* ── Step dot animations ── */
.step-dot { transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.step-dot.current { transform: scale(1.15); }
.step-dot.complete { transform: scale(1); }
.step-line { transition: background 0.5s ease; }

/* ── Toast animation ── */
.toast {
  animation: toastUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes toastUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Profile avatar pulse ── */
.profile-avatar-pulse {
  animation: avatarPulseIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes avatarPulseIn {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Floating elements ── */
.anim-float {
  animation: floatBob 4s ease-in-out infinite;
}
@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ── Pulse dot (status indicator) ── */
.status-dot {
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* ── Map stats pill entrance ── */
.map-stats-pill {
  animation: pillPop 0.5s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pillPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Footer links hover ── */
.footer-col ul li a {
  transition: color 0.15s ease, padding-left 0.2s ease;
}
.footer-col ul li a:hover { padding-left: 4px; }

/* ── Hero text reveal ── */
.hero-reveal {
  animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-reveal:nth-child(2) { animation-delay: 0.1s; }
.hero-reveal:nth-child(3) { animation-delay: 0.18s; }
.hero-reveal:nth-child(4) { animation-delay: 0.26s; }
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ── About page: number count ── */
.ab-stat-n, .num-big {
  transition: color 0.3s ease;
}

/* ── How-step visual hover ── */
.how-visual {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.how-step:hover .how-visual {
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 12px 32px rgba(44,24,16,0.12);
}

/* ── Privacy flow arrows — static ── */
.priv-arrow { opacity: 0.5; }

/* ── Safety icon hover ── */
.safety-icon-card {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.safety-icon-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 12px 32px rgba(200,119,26,0.15);
}
.safety-icon-big {
  display: block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.safety-icon-card:hover .safety-icon-big { transform: scale(1.2) rotate(-5deg); }

/* ── Priv feat hover ── */
.priv-feat {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.priv-feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(44,24,16,0.1);
}

/* ── Dashboard stat cards ── */
.stat-card {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(44,24,16,0.1); }

/* ── Who panels hover ── */
.who-illustration {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.who-panel:hover .who-illustration { transform: scale(1.08) rotate(3deg); }

/* ── Logo bounce on hover ── */
.nav-logo .logo-icon {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-logo:hover .logo-icon { transform: rotate(-12deg) scale(1.15); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}