/* ==========================================================================
   OnchainTV · efectos "wow" (2026-10-14)
   2) tarjetas que reaccionan al ratón
   3) saludo de bienvenida            4) tinte de color de la portada en cada formación
   Sin animaciones en bucle: todo ocurre una vez o al interactuar. Con "reducir movimiento" no se anima.
   ========================================================================== */

/* ---------- 2) tarjetas: inclinación 3D y reflejo que sigue al cursor ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tile .thumb { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .2s, box-shadow .2s; will-change: transform; }
  .tile.oc-tilt .thumb { transition: transform .08s linear, border-color .2s, box-shadow .2s; }
  .tile .thumb::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), rgba(157, 184, 242, .08) 35%, transparent 60%); mix-blend-mode: soft-light; }
  .tile.oc-tilt .thumb::after { opacity: 1; }
  .tile.is-soon .thumb { transform: none; }
}

/* ---------- 3) saludo (dentro del texto de la portada, encima de la etiqueta) ---------- */
.oc-hello { margin: 0 0 14px; font: 500 15px/1.3 var(--body, Inter, sans-serif); color: #C5CDE0; letter-spacing: -.005em;
  opacity: 0; transform: translateY(6px); animation: ocHello .8s .25s cubic-bezier(.22, 1, .36, 1) forwards; }
.oc-hello.still { animation: none; opacity: 1; transform: none; }
.oc-hello b { color: #fff; font-weight: 600; }
@keyframes ocHello { to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .oc-hello { font-size: 14px; margin-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .oc-hello { animation: none; opacity: 1; transform: none; } }

/* ---------- 4) tinte de la portada en la formación (estilo Spotify) ---------- */
#v-curso { position: relative; }
#v-curso::before { content: ""; position: absolute; left: 0; right: 0; top: -64px; height: 760px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .9s ease;
  background: radial-gradient(70% 90% at 72% 10%, rgb(var(--oc-tint, 81 123 217) / .38), transparent 70%), linear-gradient(180deg, rgb(var(--oc-tint, 81 123 217) / .18), transparent 85%); }
#v-curso.oc-tinted::before { opacity: 1; }
#v-curso > * { position: relative; z-index: 1; }