/**
 * Custom cursor + trail + glow — News landing (Haravan).
 * Chỉ áp dụng khi html có class news-custom-cursor (desktop / pointer fine).
 */

html.news-custom-cursor {
  cursor: none;
}

.news-custom-cursor #cursor-dot {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.15s, height 0.15s, background 0.2s, opacity 0.2s;
  mix-blend-mode: difference;
}

.news-custom-cursor #cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s,
    border-radius 0.3s;
  backdrop-filter: invert(0.05);
}

.news-custom-cursor #cursor-ring.hovered {
  width: 56px;
  height: 56px;
  border-color: var(--news-cursor-c4, #00f5d4);
  background: rgba(0, 245, 212, 0.06);
}

.news-custom-cursor #cursor-ring.hovered-btn {
  width: 70px;
  height: 70px;
  border-color: var(--news-cursor-c1, #ff3cac);
  background: rgba(255, 60, 172, 0.08);
  border-radius: 16px;
}

.news-custom-cursor #cursor-ring.hovered-text {
  width: 4px;
  height: 28px;
  border-radius: 2px;
  background: var(--news-cursor-c5, #fee440);
  border: none;
}

.news-custom-cursor .trail-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9990;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s;
}

.news-custom-cursor .glow-orb {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.14;
  transition: transform 1s ease, opacity 0.5s;
  z-index: 0;
}

.news-custom-cursor #orb1 {
  width: 400px;
  height: 400px;
  background: #ff3cac;
  top: -100px;
  right: -100px;
}

.news-custom-cursor #orb2 {
  width: 500px;
  height: 500px;
  background: #2b86c5;
  bottom: -150px;
  left: -150px;
}

.news-custom-cursor #orb3 {
  width: 300px;
  height: 300px;
  background: #00f5d4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.news-custom-cursor .ripple {
  position: fixed;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9997;
  animation: news-cursor-ripple-out 0.6s ease-out forwards;
}

@keyframes news-cursor-ripple-out {
  to {
    width: 120px;
    height: 120px;
    opacity: 0;
  }
}

/* Spotlight nhẹ trên khối nội dung (theo --mx / --my từ JS) */
.news-custom-cursor article {
  position: relative;
}

.news-custom-cursor article::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.06) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  z-index: 0;
}

.news-custom-cursor article:hover::before {
  opacity: 1;
}

/* Touch / coarse pointer: tắt hoàn toàn */
@media (hover: none), (pointer: coarse) {
  html.news-custom-cursor {
    cursor: auto !important;
  }

  .news-custom-cursor #cursor-dot,
  .news-custom-cursor #cursor-ring,
  .news-custom-cursor .trail-dot,
  .news-custom-cursor .glow-orb,
  .news-custom-cursor #news-cursor-orbs {
    display: none !important;
  }
}