/**
 * Widget Visual Effects - Standalone CSS
 *
 * Entity card-style visual effects for widgets:
 * - Glowing drop zones with multi-layer effects
 * - Marching ants shimmer animation
 * - Sparkle particles on snap
 * - Spring bounce landing animation
 * - Drag ghost with rotation
 *
 * Include this file to add visual polish to any widget system.
 * Works independently of the widget-drag-drop.js module.
 */

/* ============================================
   DESIGN TOKENS - Widget Effects
   ============================================ */
:root {
  /* Default accent color (can be overridden per-widget) */
  --widget-accent-rgb: 56, 189, 248;  /* Cyan */

  /* Effect intensities */
  --glow-intensity: 0.4;
  --shimmer-speed: 2s;
  --sparkle-count: 8;

  /* Animation timing */
  --snap-duration: 0.4s;
  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================
   DRAGGABLE WIDGETS
   ============================================ */
.widget-draggable,
[draggable="true"] {
  cursor: grab;
  user-select: none;
}

.widget-draggable:active,
[draggable="true"]:active {
  cursor: grabbing;
}

/* Widget being dragged (source element) */
.widget-dragging,
.widget.dragging {
  opacity: 0.4;
  transform: scale(0.98);
  transition: opacity 0.15s ease, transform 0.15s ease;
}


/* ============================================
   DRAG GHOST
   ============================================ */
.widget-drag-ghost,
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  transform: rotate(-3deg) scale(1.02);
  opacity: 0.95;
  border: 2px dashed var(--widget-accent, rgba(var(--widget-accent-rgb), 0.9));
  border-radius: 12px;
  box-shadow:
    0 0 20px rgba(var(--widget-accent-rgb), var(--glow-intensity)),
    0 20px 40px rgba(0, 0, 0, 0.3);
  animation: ghostGlow 1.5s ease-in-out infinite;
}

@keyframes ghostGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(var(--widget-accent-rgb), 0.4),
      0 20px 40px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 30px rgba(var(--widget-accent-rgb), 0.6),
      0 20px 40px rgba(0, 0, 0, 0.3);
  }
}


/* ============================================
   SNAP ZONES
   ============================================ */
.snap-zone,
.drop-zone,
[data-snap-zone] {
  position: relative;
  border: 3px dashed rgba(var(--widget-accent-rgb), 0.2);
  border-radius: 24px;
  transition: all 0.3s ease;
}

/* Snap zone active (during drag) */
.snap-zone.active,
.drop-zone.active,
.snapzones.dragging .snap-zone {
  border-color: rgba(var(--widget-accent-rgb), 0.4);
}

/* Snap zone highlighted (drag over) */
.snap-zone.highlight,
.snap-zone.hovered,
.drop-zone.highlight,
.drop-zone.active.hovered {
  border-color: rgba(var(--widget-accent-rgb), 0.9);
  border-style: solid;
  background: linear-gradient(
    135deg,
    rgba(var(--widget-accent-rgb), 0.08) 0%,
    rgba(var(--widget-accent-rgb), 0.15) 50%,
    rgba(var(--widget-accent-rgb), 0.08) 100%
  );
  box-shadow:
    0 0 0 8px rgba(var(--widget-accent-rgb), 0.1),
    0 0 60px rgba(var(--widget-accent-rgb), var(--glow-intensity)),
    0 0 120px rgba(var(--widget-accent-rgb), 0.2),
    inset 0 0 80px rgba(var(--widget-accent-rgb), 0.1);
  animation: dropZoneReady 0.5s ease forwards;
}

@keyframes dropZoneReady {
  0% { transform: scale(0.98); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}


/* ============================================
   MARCHING ANTS SHIMMER
   ============================================ */
.snap-zone::before,
.drop-zone::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 28px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--widget-accent-rgb), 0.3) 25%,
    transparent 50%,
    rgba(var(--widget-accent-rgb), 0.3) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer var(--shimmer-speed) linear infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.snap-zone.highlight::before,
.snap-zone.hovered::before,
.drop-zone.highlight::before,
.drop-zone.active.hovered::before {
  opacity: 1;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ============================================
   RADIAL BREATHING GLOW
   ============================================ */
.snap-zone::after,
.drop-zone::after {
  content: '';
  position: absolute;
  inset: 10%;
  background: radial-gradient(ellipse at center,
    rgba(var(--widget-accent-rgb), 0.15) 0%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  animation: breathe 2.5s ease-in-out infinite;
  transition: opacity 0.3s ease;
}

.snap-zone.highlight::after,
.snap-zone.hovered::after,
.drop-zone.highlight::after,
.drop-zone.active.hovered::after {
  opacity: 1;
}

@keyframes breathe {
  0%, 100% { transform: scale(0.9); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.6; }
}


/* ============================================
   SNAP LANDING ANIMATION
   ============================================ */
.just-snapped,
.widget.just-dropped {
  animation: snapLanding var(--snap-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes snapLanding {
  0% { transform: scale(1.05); opacity: 0.8; }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); opacity: 1; }
}


/* ============================================
   SPARKLE PARTICLES
   ============================================ */
.snap-sparkle,
.sparkle-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001;
  will-change: transform, opacity;
  animation: sparkleOut 0.6s ease-out forwards;
}

@keyframes sparkleOut {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
  }
}


/* ============================================
   STATE TRANSITIONS
   ============================================ */
.widget {
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

/* Expand animations */
.widget-transition-expand-up {
  animation: expandUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes expandUp {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

.widget-transition-expand-full {
  animation: expandFull 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes expandFull {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* Collapse animations */
.widget-transition-collapse-down {
  animation: collapseDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes collapseDown {
  0% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.widget-transition-collapse-partial {
  animation: collapsePartial 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes collapsePartial {
  0% { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

.widget-transition-collapse-full {
  animation: collapseFull 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes collapseFull {
  0% { transform: scale(1.1); opacity: 0.8; }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}


/* ============================================
   WIDGET REMOVAL
   ============================================ */
.widget-removing,
.widget.removing {
  animation: widgetRemove 0.2s ease forwards;
  pointer-events: none;
}

@keyframes widgetRemove {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}


/* ============================================
   SELECTION STATE
   ============================================ */
.widget-selected,
.widget.selected {
  box-shadow:
    0 0 0 2px var(--widget-accent, rgba(var(--widget-accent-rgb), 1)),
    0 4px 20px rgba(0, 0, 0, 0.15);
}

.widget-focused,
.widget:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--widget-accent, rgba(var(--widget-accent-rgb), 1)),
    0 0 0 4px rgba(var(--widget-accent-rgb), 0.2);
}


/* ============================================
   WIDGET STATE CLASSES
   ============================================ */
.widget-state-card,
.widget[data-state="card"] {
  /* Card state - minimal identifier */
}

.widget-state-mini,
.widget[data-state="mini"] {
  /* Mini state - summary view */
}

.widget-state-expanded,
.widget[data-state="expanded"] {
  /* Expanded state - full functionality */
  border-radius: 0 !important;
}


/* ============================================
   ACCENT COLOR VARIANTS
   ============================================ */

/* Calendar - Orange */
.widget[data-widget-type="calendar"],
[data-tab="calendar"] ~ .snap-zone {
  --widget-accent-rgb: 255, 105, 0;
}

/* Clients - Blue */
.widget[data-widget-type="clients"],
.widget[data-widget-type="entity-browser"],
[data-tab="clients"] ~ .snap-zone {
  --widget-accent-rgb: 28, 107, 186;
}

/* Resources - Purple */
.widget[data-widget-type="resources"],
[data-tab="resources"] ~ .snap-zone {
  --widget-accent-rgb: 155, 81, 224;
}

/* Map - Green */
.widget[data-widget-type="map"],
[data-tab="map"] ~ .snap-zone {
  --widget-accent-rgb: 0, 208, 132;
}

/* Entity types */
.widget[data-entity-type="company"] { --widget-accent-rgb: 245, 158, 11; }
.widget[data-entity-type="site"] { --widget-accent-rgb: 16, 185, 129; }
.widget[data-entity-type="tank"] { --widget-accent-rgb: 59, 130, 246; }
.widget[data-entity-type="job"] { --widget-accent-rgb: 139, 92, 246; }
.widget[data-entity-type="result"] { --widget-accent-rgb: 236, 72, 153; }


/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Disable transitions during rapid state changes */
.no-transition,
.widget.no-transition {
  transition: none !important;
}

/* Force hardware acceleration */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Prevent text selection during drag */
.dragging-active,
.dragging-active * {
  user-select: none !important;
}