/* ==========================================================================
   INTERACTIONS STYLESHEET // ADARSH PORTFOLIO
   Hardware-accelerated, Minimal, Smooth, Responsive, Creative
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM CURSOR SYSTEM
   -------------------------------------------------------------------------- */

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: #FFFFFF;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
  will-change: transform, opacity;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              background-color 0.3s ease,
              opacity 0.25s ease;
  will-change: transform, width, height;
}

.cursor-text {
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  user-select: none;
}

/* Cursor Interactive States */
/* Hover Navigation Links: subtly enlarges */
body.cursor-hover-nav .cursor-ring {
  width: 48px;
  height: 48px;
  border-color: rgba(255, 75, 38, 0.6);
  background-color: rgba(255, 255, 255, 0.04);
}

body.cursor-hover-nav .cursor-dot {
  background-color: var(--accent, #FF4B26);
  transform: translate(-50%, -50%) scale(1.3);
}

/* Hover CTA: VIEW ↗ / START ↗ */
body.cursor-hover-cta .cursor-ring {
  width: 78px;
  height: 78px;
  background-color: var(--accent, #FF4B26);
  border-color: transparent;
  box-shadow: 0 10px 25px rgba(255, 75, 38, 0.35);
}

body.cursor-hover-cta .cursor-dot {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

body.cursor-hover-cta .cursor-text {
  opacity: 1;
  transform: scale(1);
  color: #FFFFFF;
}

/* Hover Project: OPEN CASE ↗ */
body.cursor-hover-project .cursor-ring {
  width: 96px;
  height: 96px;
  background-color: rgba(255, 75, 38, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

body.cursor-hover-project .cursor-dot {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

body.cursor-hover-project .cursor-text {
  opacity: 1;
  transform: scale(1);
  color: #FFFFFF;
}

/* Hover Image: EXPLORE */
body.cursor-hover-image .cursor-ring {
  width: 82px;
  height: 82px;
  background-color: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

body.cursor-hover-image .cursor-dot {
  opacity: 0;
}

body.cursor-hover-image .cursor-text {
  opacity: 1;
  transform: scale(1);
  color: #090A0D;
  font-weight: 800;
}

/* Magnetic active drag */
.is-magnetized {
  transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Mobile & Touch Device Cursor Disable */
@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-ring,
  .case-preview-card {
    display: none !important;
  }
  * {
    cursor: auto !important;
  }
}

/* Hide default cursor on desktop when custom cursor is active */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none;
  }
  a, button, input, textarea, select, [role="button"], .project-card, .case-item, .service-card, .process-stage {
    cursor: none !important;
  }
}

/* --------------------------------------------------------------------------
   2. MAGNETIC BUTTONS (GPU Hardware accelerated)
   -------------------------------------------------------------------------- */

[data-magnetic] {
  display: inline-flex;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   3. HERO PORTRAIT PARALLAX & 4. FLOATING SKILL LABELS
   -------------------------------------------------------------------------- */

.hero-portrait-stage {
  will-change: transform;
}

.hero-portrait-img {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.skill-tag {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s ease, color 0.2s ease;
}

.hero-bg-graphic {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --------------------------------------------------------------------------
   6. IMAGE DISTORTION / 3D TILT EFFECT
   -------------------------------------------------------------------------- */

.tilt-surface {
  transform-style: preserve-3d;
  perspective: 1200px;
  will-change: transform;
}

.tilt-inner {
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   7. TEXT HOVER WITH ANIMATED ARROW & LEFT-TO-RIGHT UNDERLINE
   -------------------------------------------------------------------------- */

.text-hover-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--text-primary);
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.text-hover-link .hover-arrow {
  display: inline-block;
  opacity: 0;
  transform: translate(-4px, 2px);
  transition: opacity 0.25s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.25s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              color 0.25s ease;
  color: var(--accent, #FF4B26);
}

.text-hover-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent, #FF4B26);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-hover-link:hover {
  color: var(--accent, #FF4B26);
  letter-spacing: 0.04em;
}

.text-hover-link:hover .hover-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.text-hover-link:hover::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   11. SCROLL-BASED REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal="fade-up"] {
  transform: translateY(36px) scale(0.98);
}

[data-reveal="slide-up"] {
  transform: translateY(50px);
}

[data-reveal="scale-up"] {
  transform: scale(0.96);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger Groups */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0ms);
}

[data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --------------------------------------------------------------------------
   13. ACCENT COLOR INTERACTION
   -------------------------------------------------------------------------- */

.interactive-accent {
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.interactive-accent:hover {
  color: var(--accent, #FF4B26) !important;
}

/* --------------------------------------------------------------------------
   PERFORMANCE & ACCESSIBILITY: PREFERS REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }

  .cursor-dot,
  .cursor-ring,
  .case-preview-card {
    display: none !important;
  }

  body {
    cursor: auto !important;
  }

  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.2s ease !important;
  }

  .hero-portrait-img,
  .skill-tag,
  .hero-bg-graphic,
  [data-magnetic] {
    transform: none !important;
    transition: none !important;
  }
}