/* ============================================================
   dock.css — Dock Bar, Icons, Animations, Tooltips
   macOS Desktop Website
   ============================================================ */

/* ── Dock Bar ───────────────────────────────────────────────── */
#macos-dock {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;

  height: var(--dock-height);
  background: var(--dock-bg);
  backdrop-filter: var(--dock-blur);
  -webkit-backdrop-filter: var(--dock-blur);
  border: 1px solid var(--dock-border);
  border-radius: 16px;
}

/* ── Dock Icon Wrapper ──────────────────────────────────────── */
.dock-icon-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Dock Icon Button ───────────────────────────────────────── */
.dock-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  padding: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;

  /* Ensure touch target size */
  min-width: 44px;
  min-height: 44px;
}

/* During magnification the JS updates transforms on every mousemove frame —
   transition must be off so icons track the cursor instantly (no spring lag). */
#macos-dock.dock-magnifying .dock-icon {
  transition: none;
}

/* Smooth snap-back when cursor leaves the dock */
#macos-dock:not(.dock-magnifying) .dock-icon {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dock-icon {
  will-change: transform;
}

/* Reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .dock-icon:hover { transform: scale(1.15) translateY(-3px); }
  #macos-dock.dock-magnifying .dock-icon { transition: none; }
}

.dock-icon svg,
.dock-icon img {
  width: 48px;
  height: 48px;
  pointer-events: none;
  border-radius: 10px;
  object-fit: contain;
}

/* Compensate for icons with extra internal padding */
.dock-icon[data-app="finder"] img,
.dock-icon[data-app="settings"] img {
  width: 59px;
  height: 59px;
  margin: -5.5px;
}

/* ── Open Indicator Dot ─────────────────────────────────────── */
.dock-icon-wrapper .dock-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dock-dot);
  margin-top: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dock-icon-wrapper.is-open .dock-dot {
  opacity: 1;
}

/* ── Bounce Animation ───────────────────────────────────────── */
@keyframes dock-bounce {
  0%   { transform: scale(1.3) translateY(0); }
  30%  { transform: scale(1.3) translateY(-20px); }
  50%  { transform: scale(1.3) translateY(0); }
  70%  { transform: scale(1.3) translateY(-10px); }
  100% { transform: scale(1.3) translateY(0); }
}

.dock-icon.bouncing {
  animation: dock-bounce 0.5s ease;
}

/* ── Tooltip ────────────────────────────────────────────────── */
.dock-tooltip {
  position: absolute;
  /* Sit above the wrapper top. The icon lifts ~13px when hovered
     (scale 1.3 adds ~7px above + translateY(-6px)), so 8px gap
     visually reads as the right distance from the enlarged icon. */
  bottom: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dock-tooltip-bg);
  color: var(--dock-tooltip-text, #fff);
  border: 1px solid var(--dock-tooltip-border, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  font-family: var(--font-system);
  font-size: 14px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  /* Delay prevents flash when mousing through the dock */
  transition: opacity 0.12s ease 0.15s;
  z-index: 1100;
}

/* Triangle */
.dock-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dock-tooltip-bg);
}

.dock-icon-wrapper:hover .dock-tooltip {
  opacity: 1;
  transition: opacity 0.12s ease 0.15s;
}

/* Hide tooltip immediately on mouse-out (no delay on exit) */
.dock-icon-wrapper:not(:hover) .dock-tooltip {
  transition: opacity 0.08s ease 0s;
}

/* ── Dock Reflection Glow ───────────────────────────────────── */
/* A soft light pool below the dock that suggests a reflective surface */
#macos-dock::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 15%;
  right: 15%;
  height: 10px;
  background: var(--dock-glow);
  border-radius: 50%;
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}

/* ── Trash Separator ────────────────────────────────────────── */
.dock-separator {
  width: 1px;
  height: 32px;
  background: var(--dock-separator);
  margin: 0 4px;
  flex-shrink: 0;
  align-self: center;
}

/* ── Drag States ─────────────────────────────────────────────── */
.dock-icon-wrapper[draggable] {
  cursor: grab;
}

.dock-icon-wrapper.dock-dragging {
  opacity: 0.35;
}

/* Puff-out when dragged off the dock */
@keyframes dock-puff {
  0%   { transform: scale(1);   opacity: 1; }
  40%  { transform: scale(1.3); opacity: 0.6; }
  100% { transform: scale(0);   opacity: 0; }
}

.dock-icon-wrapper.dock-removing {
  animation: dock-puff 0.28s ease forwards;
  pointer-events: none;
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dock-icon {
    transition: none;
  }
  .dock-icon.bouncing {
    animation: none;
  }
}

/* ── Trash drag-over highlight ──────────────────────────────── */
.dock-icon-wrapper.trash-dragover .dock-icon {
  filter: drop-shadow(0 0 8px rgba(255, 60, 40, 0.7));
  transform: scale(1.15) translateY(-6px);
  transition: transform 0.12s ease, filter 0.12s ease !important;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #macos-dock {
    gap: 4px;
    padding: 6px 10px;
  }

  .dock-icon {
    width: 44px;
    height: 44px;
  }

  .dock-icon svg,
  .dock-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
  }
}