/* ==========================================================================
   The Creative Garage — Luxury Editorial Hover & Micro-Interaction Engine
   - 3D Interactive Card Parallax Tilt & Specular Cursor Sheen
   - Kinetic Pill Button Shimmer & Magnetic Spring Snapping
   - Dynamic Custom Cursor (Fluid Ring, Center Dot, Contextual Text Pill)
   - Directional Hairline Link Underlines
   - Silky Smooth Scale & Contrast Transitions
   ========================================================================== */

/* ==========================================================================
   1. Dynamic Custom Cursor Styles (Desktop Pointer Only)
   ========================================================================== */

@media (pointer: fine) {
  body {
    cursor: default;
  }

  a, button, input, select, textarea, summary, [role="button"], .filter-btn, .project-tile {
    cursor: pointer;
  }

  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--color-ink-black, #000000);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(-50%, -50%, 0);
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
    will-change: transform;
  }

  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(0, 0, 0, 0.35);
    background: transparent;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate3d(-50%, -50%, 0);
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                background-color 0.25s ease,
                opacity 0.25s ease;
    will-change: transform;
  }

  /* Cursor over interactive clickable elements */
  body.cursor-hover-active .cursor-dot {
    width: 4px;
    height: 4px;
    background-color: var(--color-signal-yellow, #ffd001);
  }

  body.cursor-hover-active .cursor-ring {
    width: 52px;
    height: 52px;
    border-color: var(--color-ink-black, #000000);
    background-color: rgba(255, 208, 1, 0.08);
  }

  /* Contextual Pill Badge Cursor (Over Project Cards & Media) */
  .cursor-badge {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    transform: translate3d(-50%, -50%, 0) scale(0.6);
    opacity: 0;
    padding: 8px 18px;
    background: var(--color-ink-black, #000000);
    color: var(--color-bone-white, #fffef7);
    border: 1px solid var(--color-signal-yellow, #ffd001);
    border-radius: 1440px;
    font-family: var(--font-switzer, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  body.cursor-badge-active .cursor-badge {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  body.cursor-badge-active .cursor-dot,
  body.cursor-badge-active .cursor-ring {
    opacity: 0;
  }
}

@media (pointer: coarse), (hover: none) {
  .cursor-dot,
  .cursor-ring,
  .cursor-badge {
    display: none !important;
  }
}

/* ==========================================================================
   2. Specular Sheen & 3D Interactive Card Parallax
   ========================================================================== */

.project-tile,
.service-card,
.feature-card,
.pricing-card,
.article-card,
.studio-frame,
.card {
  position: relative;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Dynamic Radial Cursor Sheen Overlay */
.project-tile::after,
.service-card::after,
.pricing-card::after,
.feature-card::after,
.article-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 208, 1, 0.09),
    rgba(255, 255, 255, 0.04) 40%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 3;
}

.project-tile:hover::after,
.service-card:hover::after,
.pricing-card:hover::after,
.feature-card:hover::after,
.article-card:hover::after {
  opacity: 1;
}

/* Clean High-End Border Light-Up on Hover */
.project-tile:hover,
.service-card:hover,
.pricing-card:hover,
.feature-card:hover,
.article-card:hover {
  border-color: var(--color-ink-black, #000000) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.07) !important;
}

/* Image Zoom & Vignette in Work Cards */
.project-tile-media,
.project-tile-image-box,
.project-tile figure,
.card-media {
  overflow: hidden !important;
  position: relative;
}

.project-tile-media img,
.project-tile-image-box img,
.project-tile img,
.card-media img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.project-tile:hover img,
.card-media:hover img {
  transform: scale(1.045) !important;
}

/* ==========================================================================
   3. Kinetic Pill Button Shimmer & Elastic Hover
   ========================================================================== */

.btn,
.nav-cta,
.submit-btn,
.filter-btn,
.pill,
.back-top {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Ambient Shimmer Sweep Effect */
.btn-primary::before,
.nav-cta::before,
.submit-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.24) 45%,
    rgba(255, 208, 1, 0.45) 50%,
    rgba(255, 255, 255, 0.24) 55%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
}

.btn-primary:hover::before,
.nav-cta:hover::before,
.submit-btn:hover::before {
  left: 140%;
}

.btn-primary:hover,
.nav-cta:hover,
.submit-btn:hover {
  transform: translateY(-2px) scale(1.015) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

.btn-secondary:hover {
  transform: translateY(-2px) !important;
  border-color: var(--color-ink-black, #000000) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.filter-btn:hover {
  transform: translateY(-1.5px) !important;
  border-color: var(--color-ink-black, #000000) !important;
  color: var(--color-ink-black, #000000) !important;
}

/* ==========================================================================
   4. Directional Editorial Hairline Underline for Links
   ========================================================================== */

.nav-links a,
.footer-links a,
.editorial-link,
.card-link,
.text-link {
  position: relative;
  transition: color 0.25s ease;
}

.nav-links a::after,
.footer-links a::after,
.editorial-link::after,
.card-link::after,
.text-link::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover::after,
.footer-links a:hover::after,
.editorial-link:hover::after,
.card-link:hover::after,
.text-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ==========================================================================
   5. Interactive Micro-Badges & Tags
   ========================================================================== */

.tag,
.project-tile-tag,
.meta-badge {
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease !important;
}

.project-tile:hover .project-tile-tag,
.project-tile:hover .tag {
  transform: translateY(-2px);
  background-color: var(--color-signal-yellow, #ffd001) !important;
  color: var(--color-ink-black, #000000) !important;
  border-color: var(--color-signal-yellow, #ffd001) !important;
}

/* WhatsApp Floating Badge Hover Flourish */
.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 16px 40px rgba(31, 157, 85, 0.45) !important;
}

.back-top:hover {
  transform: translateY(-4px) scale(1.05) !important;
  border-color: var(--color-ink-black, #000000) !important;
  background-color: var(--color-bone-white, #fffef7) !important;
}