/* ============================================================================
   CARAMBA · Capa de efectos (scroll reveal, nav shrink, parallax, hover)
   ============================================================================ */

/* ---------- 1. Aparición al hacer scroll ----------
   La variante "fade" anima SOLO opacidad (segura para elementos que ya usan
   transform de Tailwind, ej. -translate-y-1/2). Las direccionales añaden y
   luego quitan su propio transform.                                          */
[data-reveal]{
    opacity:0;
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),
               transform .7s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
}
[data-reveal="up"]    { transform:translateY(28px); }
[data-reveal="left"]  { transform:translateX(-32px); }
[data-reveal="right"] { transform:translateX(32px); }
[data-reveal="zoom"]  { transform:scale(.92); }
/* "fade" y [data-reveal] sin valor: no tocan transform */

[data-reveal].is-visible{ opacity:1; }
[data-reveal="up"].is-visible,
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="zoom"].is-visible{ transform:none; }

/* ---------- 2. Barra de navegación que se encoge al bajar ---------- */
nav{ transition:background-color .35s ease, padding .35s ease, box-shadow .35s ease; }
nav.nav-scrolled{
    background:rgba(0,0,0,.92) !important;
    padding-top:.25rem !important;
    padding-bottom:.25rem !important;
    box-shadow:0 6px 24px rgba(0,0,0,.45);
}
nav .nav-logo{ transition:height .35s ease; }
nav.nav-scrolled .nav-logo{ height:2.75rem; }          /* ~44px al hacer scroll */
@media (min-width:1024px){ nav.nav-scrolled .nav-logo{ height:3.25rem; } }

/* ---------- 3. Parallax (lo mueve efectos.js) ---------- */
[data-parallax]{ will-change:transform; }

/* ---------- 4. Micro-interacciones ---------- */
/* Card de vidrio oscuro (mantiene el look oscuro; se ilumina en dorado al hover) */
.glass-card{
    background:rgba(28,25,23,.45);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    backdrop-filter:blur(14px) saturate(140%);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
    transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.glass-card:hover{
    transform:translateY(-8px);
    border-color:rgba(245,197,24,.5);
    box-shadow:0 24px 55px rgba(0,0,0,.6), 0 0 30px rgba(245,197,24,.16), inset 0 1px 0 rgba(255,255,255,.18);
}

.fx-lift{ transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.fx-lift:hover{ transform:translateY(-8px); box-shadow:0 22px 40px -12px rgba(0,0,0,.6); }

/* Botón con brillo que cruza al pasar el mouse */
.fx-shine{ position:relative; overflow:hidden; }
.fx-shine::after{
    content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg); transition:left .6s ease;
}
.fx-shine:hover::after{ left:130%; }

/* Subrayado dorado animado para enlaces de texto */
.fx-underline{ position:relative; }
.fx-underline::after{
    content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0;
    background:#f5c518; transition:width .3s ease;
}
.fx-underline:hover::after{ width:100%; }

/* ---------- 5. Respeto a quien prefiere menos movimiento ---------- */
@media (prefers-reduced-motion: reduce){
    [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
    .fx-lift, .fx-shine::after, nav, nav .nav-logo{ transition:none !important; }
    [data-parallax]{ transform:none !important; }
}