/* ═══════════════════════════════════════════════════════════════════════════
   Residencia del Sol — Capa de motion luxury
   Tokens + vocabulario de gestos. Se carga junto a los demás tokens y se
   maneja con motion-luxury.js (el driver a nivel documento).

   Dos curvas y nada más: una entrada corta y una curva larga de "settle" para
   las piezas grandes. Cero rebote: el spring alegre no es lujo.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --lx-in:cubic-bezier(.22,.61,.36,1);      /* entrada */
  --lx-settle:cubic-bezier(.16,1,.3,1);     /* settle largo (expo-out) */
  --lx-rev:760ms;                            /* reveal estándar */
  --lx-rev-lg:850ms;                         /* reveal de piezas > 420px */
  --lx-hover:290ms;                          /* hover */
  --lx-micro:160ms;                          /* micro (press, chevrons) */
  --lx-photo:700ms;                          /* respiración de foto */
  --lx-step:100ms;                           /* stagger entre hermanos */
  --lx-kb:22s;                               /* ken burns */
  --lx-plx:38px;                             /* amplitud de parallax (0.85) */
  --lz-expo:cubic-bezier(.16,1,.3,1);        /* alias heredado */
}

/* ── Reveal ────────────────────────────────────────────────────────────────
   Fade + 24px de subida, una sola vez, con delay escalonado por posición.
   El contenido es visible por defecto: sólo se esconde lo que el driver ya
   armó, así una falla del observer cuesta la animación, nunca el contenido. */
[data-rv]{transition:opacity var(--lx-rev) var(--lx-in),transform var(--lx-rev) var(--lx-settle);transition-delay:var(--rv-d,0ms)}
[data-rv].lz-armed{opacity:0;transform:translate3d(0,24px,0);will-change:opacity,transform}
[data-rv].lz-armed.is-in{opacity:1;transform:none}
[data-rv][data-rv-lg]{transition-duration:var(--lx-rev-lg)}

/* ── Momento fuerte 1: el título del hero sube desde su propia máscara ──── */
.lx-hero-h{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lx-hero-h > span{display:block;animation:lx-rise 900ms var(--lx-settle) 120ms both}
@keyframes lx-rise{from{transform:translate3d(0,108%,0)}to{transform:none}}

/* ── Ken burns + parallax ──────────────────────────────────────────────────
   Sólo en fondos de bandas oscuras. Nunca en texto. La var --plx la escribe
   el driver; el ken burns la lleva adentro para que ambos convivan en un solo
   transform. La escala base 1.12 da el margen que el parallax necesita. */
.lz-kb{animation:lx-kb var(--lx-kb) var(--lx-settle) infinite alternate}
@keyframes lx-kb{from{transform:scale(1.12) translate3d(0,var(--plx,0px),0)}to{transform:scale(1.2) translate3d(-1%,calc(var(--plx,0px) - 1%),0)}}
.lz-plx{transform:translate3d(0,var(--plx,0px),0)}

/* ── Momento fuerte 2: la franja de credenciales se abre desde el centro ── */
.lz-tick{animation:lx-band 820ms var(--lx-settle) 200ms both}
@keyframes lx-band{from{opacity:0;clip-path:inset(0 46% 0 46%)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* ── Hover de tarjeta ──────────────────────────────────────────────────────
   La pieza se levanta 4px sobre una sombra en capa y la hairline vira a oro;
   la foto interna respira a 1.04 pero en 700ms, mucho más lento que el
   contenedor. Movimiento corto arriba, movimiento largo adentro: nunca un
   salto. .lx-flat conserva el gesto sin sombra (fondos claros). */
.lx-card{position:relative;transition:transform var(--lx-hover) var(--lx-settle),box-shadow var(--lx-hover) var(--lx-in),border-color var(--lx-hover) var(--lx-in),background-color var(--lx-hover) var(--lx-in)}
.lx-card img,.lx-card span[role=img]{transition:transform var(--lx-photo) var(--lx-settle)}

/* ── Aro magnético ─────────────────────────────────────────────────────────
   El borde se ilumina en oro justo donde está el cursor, sobre 1.5px de
   anillo enmascarado. Sin drop shadow. En reposo el pill no tiene borde: el
   borde ES el aro. data-ring lo devuelve donde el borde es parte del dibujo
   del botón (variantes gold / outline). */
.lx-mag{position:relative;isolation:isolate}
/* Anula el lift propio de un componente del DS: deja sólo barrido y aro. */
.lx-still,.lx-still:hover{transform:none !important}
/* Sin sombras en ningún lado: la estructura se dibuja con hairlines y con luz.
   El anillo de foco queda intacto — es accesibilidad, no decoración. */
*:not(:focus-visible){box-shadow:none !important}
.lx-btn{position:relative;overflow:hidden;isolation:isolate}
/* El driver pone data-lx-flush en <html> salvo que la página lo desactive. */
[data-lx-flush] .lx-btn{border-color:transparent !important}
[data-lx-flush] .lx-btn[data-ring]{border-color:var(--accent-gold) !important}
/* Sobre relleno dorado el aro baja un tono para leerse. */
.lx-btn[style*="action-primary"],.lx-btn[style*="action-gold-bg"]{--lx-ring:var(--gold-700)}

@media (hover:hover) and (pointer:fine){
  .lx-card:hover{transform:translate3d(0,-4px,0);border-color:var(--line-gold)}
  .lx-card:hover img,.lx-card:hover span[role=img]{transform:scale(1.04)}

  .lx-mag::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:inherit;background:radial-gradient(circle 260px at var(--gx,50%) var(--gy,50%),var(--lx-ring,var(--accent-gold)),rgba(211,190,134,0) 74%);opacity:0;transition:opacity var(--lx-hover) var(--lx-in);pointer-events:none;-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask-composite:exclude}
  .lx-mag:hover::before{opacity:1}

  /* Barrido shiny: el gesto glassy de los bloques con ícono. */
  .lz-shine{position:relative;overflow:hidden;isolation:isolate}
  .lz-shine::after{content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(105deg,transparent 0%,rgba(211,190,134,.22) 50%,transparent 100%);transform:skewX(-16deg);opacity:0;pointer-events:none;z-index:2}
  .lz-shine:hover::after{animation:lz-sweep 1100ms var(--lx-settle) forwards}

  /* Botones: aro magnético, sin sombra y sin escala grande (1.5% y 1px de aire). */
  .lx-btn::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:inherit;background:radial-gradient(circle 150px at var(--gx,50%) var(--gy,50%),var(--lx-ring,var(--accent-gold)),rgba(211,190,134,0) 72%);opacity:0;transition:opacity var(--lx-hover) var(--lx-in);pointer-events:none;-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask-composite:exclude}
  .lx-btn:hover{transform:translate3d(0,-1px,0) scale(1.015) !important;box-shadow:none !important}
  .lx-btn:hover::before{opacity:1}
  .lx-btn:active{transform:scale(.99) !important}
}
@keyframes lz-sweep{from{left:-60%;opacity:1}to{left:130%;opacity:0}}

/* ── Momento fuerte 3: el lattice de rombos ────────────────────────────────
   Textura de fondo del módulo que se disuelve hacia abajo — no un corte entre
   secciones. Se traza de centro a bordes, una vez. Requiere que la sección
   sea position:relative;overflow:hidden. */
.lz-lattice{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(45deg,var(--accent-gold) 0 1px,transparent 1px 17px),repeating-linear-gradient(-45deg,var(--accent-gold) 0 1px,transparent 1px 17px);opacity:.2;-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 26%,transparent 52%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 26%,transparent 52%)}
.lz-lattice.lz-armed{opacity:0;clip-path:inset(0 50% 0 50%);transition:opacity var(--lx-rev) var(--lx-in),clip-path 1100ms var(--lx-settle)}
.lz-lattice.lz-armed.is-in{opacity:.2;clip-path:inset(0 0 0 0)}

/* En pantallas chicas el reveal necesita más recorrido para leerse: viaje más
   largo, un punto de escala y un settle más largo. Mismo easing, sin rebote. */
@media (max-width:900px){
  [data-rv]{transition-duration:900ms}
  [data-rv][data-rv-lg]{transition-duration:1000ms}
  [data-rv].lz-armed{transform:translate3d(0,40px,0) scale(.986)}
}

@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1 !important;transform:none !important}
  .lz-kb,.lz-tick,.lx-hero-h > span{animation:none}
  .lz-plx{transform:none}
  .lx-card:hover,.lx-btn:hover{transform:none !important}
  .lz-shine:hover::after{animation:none}
  .lz-lattice.lz-armed{opacity:.2;clip-path:none}
}