/* ============================================================
   ORVIAN — PREMIUM FX · v3 (Lote 1 + Lote 2)
   Paleta sitio: #d4b572 / #f6e4b2 / #7a5926

   LOTE 1: Scrollbar dorada, Selección dorada, Cursor halo
   LOTE 2: Tilt + spotlight en cards, Magnetic CTAs, Char reveal en H1s
   ============================================================ */

:root {
  --orv-fx-gold: #d4b572;
  --orv-fx-gold-light: #f6e4b2;
  --orv-fx-gold-deep: #7a5926;
  --orv-fx-bg: #0A0A0A;
}

/* ============================================================
   LOTE 1
   ============================================================ */

html {
  scrollbar-color: var(--orv-fx-gold) var(--orv-fx-bg);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--orv-fx-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--orv-fx-gold-deep) 0%,
    var(--orv-fx-gold) 50%,
    var(--orv-fx-gold-light) 100%);
  border-radius: 10px;
  border: 2px solid var(--orv-fx-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    var(--orv-fx-gold) 0%,
    var(--orv-fx-gold-light) 50%,
    var(--orv-fx-gold) 100%);
  box-shadow: 0 0 8px rgba(212, 181, 114, 0.4);
}
::-webkit-scrollbar-corner { background: var(--orv-fx-bg); }

::selection { background-color: var(--orv-fx-gold); color: var(--orv-fx-bg); text-shadow: none; }
::-moz-selection { background-color: var(--orv-fx-gold); color: var(--orv-fx-bg); text-shadow: none; }

.orvian-cursor {
  position: fixed; top: 0; left: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  pointer-events: none; z-index: 9999;
  background: radial-gradient(circle,
    rgba(212, 181, 114, 0.50) 0%,
    rgba(212, 181, 114, 0) 70%);
  opacity: 0;
  mix-blend-mode: screen;
  transition:
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    background 0.3s ease;
}
.orvian-cursor.is-active { opacity: 1; }
.orvian-cursor.is-hover {
  width: 76px; height: 76px;
  background: radial-gradient(circle,
    rgba(246, 228, 178, 0.55) 0%,
    rgba(246, 228, 178, 0) 70%);
}

/* ============================================================
   LOTE 2 — TILT + SPOTLIGHT en cards
   ============================================================ */

.product-card,
.feature-card {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  position: relative;
}

.product-card::before,
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mx, -200px) var(--my, -200px),
    rgba(246, 228, 178, 0.14),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.product-card:hover::before,
.feature-card:hover::before { opacity: 1; }

/* Mantener contenido por encima del spotlight */
.product-card > *,
.feature-card > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   LOTE 2 — MAGNETIC CTAs
   ============================================================ */

.btn-primary { will-change: transform; }

/* ============================================================
   LOTE 2 — CHAR REVEAL en H1s (.display-headline)
   ============================================================ */

.display-headline.orv-char-ready { opacity: 0; }
.display-headline.orv-char-revealed { opacity: 1; }

.display-headline .orv-word {
  display: inline-block;
  white-space: nowrap;
}

.display-headline .orv-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(8px);
  animation: orvCharReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes orvCharReveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

@media (any-hover: none) {
  .orvian-cursor { display: none !important; }
  .product-card, .feature-card { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .orvian-cursor { display: none !important; }
  .product-card, .feature-card {
    transform: none !important;
    transition: none !important;
  }
  .product-card::before, .feature-card::before { display: none; }
  .btn-primary { transform: none !important; }
  .display-headline .orv-char {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}