/* interactions.css - Interaction-Ready Hooks & Micro-interactions for Neeladri Portfolio V2 */

/* --- INTERACTION-READY COLLAGE HOOKS --- */
[data-interaction="drag"] {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

[data-interaction="drag"]:active {
  cursor: grabbing;
}

/* Hover Tilt & Paper Lift via CSS Variables */
.layer-polaroid-mountain:hover {
  --hover-rotation: 4deg;
  --hover-y: -3px;
}

.layer-polaroid-mountain:hover .polaroid-frame {
  box-shadow: 4px 14px 28px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.09);
}

.layer-polaroid-vr:hover {
  --hover-rotation: -3deg;
  --hover-y: -3px;
}

.layer-polaroid-vr:hover .polaroid-frame {
  box-shadow: 4px 14px 28px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.09);
}

.layer-sticky-note:hover {
  --hover-rotation: 5deg;
  --hover-y: -2px;
}

.layer-sticky-note:hover .sticky-note-card {
  box-shadow: 4px 16px 30px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1);
}

.layer-crown,
.layer-portrait {
  pointer-events: auto;
}

.layer-crown:hover,
.layer-portrait:hover ~ .layer-crown {
  --hover-rotation: 2deg;
  --hover-y: -2px;
}

.layer-annotation-overthink:hover {
  --hover-rotation: -2deg;
  --hover-y: -2px;
}

/* Dragging active states */
.is-dragging {
  z-index: 99 !important;
  cursor: grabbing !important;
  transition: none !important;
}

.is-dragging .polaroid-frame,
.is-dragging .sticky-note-card {
  box-shadow: 8px 24px 40px rgba(0, 0, 0, 0.26), 0 6px 14px rgba(0, 0, 0, 0.12) !important;
  transition: none !important;
}

/* Card Visual Hover Transitions */
.project-card {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.project-card:hover .btn-card-arrow svg {
  transform: translateX(4px);
}

.btn-primary:hover .btn-arrow {
  transform: translateX(4px);
}

/* Accessible reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .collage-piece {
    --parallax-x: 0px !important;
    --parallax-y: 0px !important;

    --drag-x: 0px !important;
    --drag-y: 0px !important;
    --drag-tilt: 0deg !important;

    --hover-x: 0px !important;
    --hover-y: 0px !important;
    --hover-rotation: 0deg !important;
    --hover-scale: 1 !important;

    transition: none !important;
  }

  .polaroid-frame,
  .sticky-note-card,
  .project-card {
    transition: none !important;
  }

  .project-card:hover {
    transform: none !important;
  }
}