/* ═══════════════════════════════════════════════════════════════
   Vana Interior — Global typography / base / custom cursor
═══════════════════════════════════════════════════════════════ */

/* ── Custom cursor (storefront only) ──────────────────────────── */
/* Hide default cursor only on non-interactive elements */
html, body {
  cursor: none !important;
}

/* Restore correct cursors on interactive elements */
a, button, select, input[type="submit"], input[type="button"],
input[type="checkbox"], input[type="radio"], label,
[role="button"], [onclick], .filter-tab, .proj-filter-btn,
.category-card, .portfolio-item, .proj-card,
.nav-item, .sidebar-nav li, .cart-close-btn,
.icon-btn, .mobile-menu-btn, .demo-row {
  cursor: none !important;
}

/* Restore text cursor on actual text inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"],
textarea {
  cursor: text !important;
}

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

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--green);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.6;
  will-change: transform;
}

/* Dot grows + ring expands on hover over clickable things */
.cursor-dot.hovering {
  width: 12px;
  height: 12px;
  background: var(--gold);
}

.cursor-ring.hovering {
  width: 52px;
  height: 52px;
  opacity: 1;
  border-color: var(--gold);
}

/* Dot shrinks inside text inputs */
.cursor-dot.on-input {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--green);
}
.cursor-ring.on-input {
  opacity: 0;
}

/* Hide on touch / coarse pointer devices */
@media (hover: none), (pointer: coarse) {
  html, body, a, button, input, textarea, label,
  select, [role="button"], [onclick] { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ── Scroll-reveal base state for new sections ────────────────── */
.service-item,
.portfolio-item,
.stat-counter,
.testimonial-card {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.7s var(--reveal-delay, 0s) ease,
    transform 0.7s var(--reveal-delay, 0s) ease;
}
.service-item.revealed,
.portfolio-item.revealed,
.stat-counter.revealed,
.testimonial-card.revealed {
  opacity: 1;
  transform: translateY(0);
}