/* motion.css — capa global de movimiento de pedasioceanproperties.com.
   Tokens de DESIGN.md (motion:). Lento, escaso, sin rebote: una marea, no un muelle.

   Opt-in por atributos: data-reveal, data-reveal="fade", data-reveal-group,
   data-reveal-delay, data-hero, data-hover="lift" | "press". Lo unico que no es
   opt-in es la entrada escalonada del menu, sobre los atributos que ya pone header.css.

   Todo lo que oculta exige html.op-motion, que solo pone el snippet del header cuando
   hay IntersectionObserver y no se pide reducir movimiento; y ademas vive dentro de
   @media (prefers-reduced-motion:no-preference). Sin JavaScript, con «reducir
   movimiento» o si motion.js no llega, nada se oculta y nada se mueve. */
:root{--op-ease:cubic-bezier(.16,1,.3,1);--op-hover:300ms;--op-ui:460ms;--op-reveal:1100ms;
  --op-hero:1800ms;--op-dist:18px;--op-scale:1.06;--op-paso:90ms;--op-pulso:140ms}

@media (prefers-reduced-motion:no-preference){
  /* HOVER. Va ANTES del reveal: a igual especificidad (0,2,1) gana lo que se declara
     despues, y durante los 1100 ms del reveal debe mandar el reveal. */
  html.op-motion [data-hover]{transition:transform var(--op-hover) var(--op-ease),color var(--op-hover) ease,
    opacity var(--op-hover) ease,background-color var(--op-hover) ease,border-color var(--op-hover) ease}
  html.op-motion [data-hover="lift"]:hover,html.op-motion [data-hover="lift"]:focus-visible{transform:translateY(-2px)}
  html.op-motion [data-hover="lift"]:active{transform:translateY(-2px) scale(.98)}  /* estado pulsado, DESIGN § Componentes */
  html.op-motion [data-hover="press"]:active{transform:scale(.98)}   /* boton primario, DESIGN § Componentes */
  /* El pulso (hundirse a .98) va a 140 ms, no a los 300 del hover: es el mismo
     --oph-pulso / --t-pulso de header.css y villas.css, centralizado aqui. Solo el
     transform se acorta; color, opacidad, fondo y borde siguen a 300. Mientras
     un elemento aun revela (data-reveal puesto) no se toca su transicion. */
  html.op-motion [data-hover]:not([data-reveal]):active{
    transition-duration:var(--op-pulso),var(--op-hover),var(--op-hover),var(--op-hover),var(--op-hover)}

  /* REVEAL. Oculto solo con html.op-motion; sin JS nunca se oculta nada. motion.js retira
     el atributo al terminar, asi que el elemento recupera su CSS intacto. */
  html.op-motion [data-reveal]{opacity:0;transform:translateY(var(--op-dist));
    transition:opacity var(--op-reveal) var(--op-ease),transform var(--op-reveal) var(--op-ease)}
  html.op-motion [data-reveal="fade"]{transform:none}                 /* fotos a sangre: solo opacidad */
  html.op-motion [data-reveal].op-anim{will-change:opacity,transform} /* solo mientras anima */
  html.op-motion [data-reveal].op-in{opacity:1;transform:none}

  /* HERO: la foto entra de 1,06 a 1. Nace ya a 1,06 (no hay salto) dentro del overflow:hidden
     que .portada y .vf-hero ya tienen. El velo no se escala. */
  html.op-motion img[data-hero]{transform:scale(var(--op-scale));transition:transform var(--op-hero) var(--op-ease)}
  html.op-motion img[data-hero].op-anim{will-change:transform}
  html.op-motion img[data-hero].op-in{transform:none}

  /* MENU. El panel ya se mueve en header.css (.46s). Aqui solo lo que hay dentro, sobre el
     mismo [data-abierto]: 4 secciones + pie, escalonadas. Al cerrar, sin retardo (se van con el panel). */
  html.op-motion .oph-panel-menu .oph-lista>li,
  html.op-motion .oph-panel-menu .oph-pie{opacity:0;transform:translateY(10px);
    transition:opacity var(--op-ui) var(--op-ease),transform var(--op-ui) var(--op-ease)}
  html.op-motion .oph-panel-menu[data-abierto] .oph-lista>li,
  html.op-motion .oph-panel-menu[data-abierto] .oph-pie{opacity:1;transform:none}
  html.op-motion .oph-panel-menu[data-abierto] .oph-lista>li:nth-child(1){transition-delay:120ms}
  html.op-motion .oph-panel-menu[data-abierto] .oph-lista>li:nth-child(2){transition-delay:210ms}
  html.op-motion .oph-panel-menu[data-abierto] .oph-lista>li:nth-child(3){transition-delay:300ms}
  html.op-motion .oph-panel-menu[data-abierto] .oph-lista>li:nth-child(4){transition-delay:390ms}
  html.op-motion .oph-panel-menu[data-abierto] .oph-pie{transition-delay:480ms}
  /* La subcolumna nace de display:none (.oph-sub[data-visible]{display:block}): una transicion no
     arranca desde display:none, asi que va con @keyframes (solo opacity/transform, compositor). */
  @keyframes op-sub{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  html.op-motion .oph-sub[data-visible]>li{animation:op-sub var(--op-ui) var(--op-ease) both}
  html.op-motion .oph-sub[data-visible]>li:nth-child(2){animation-delay:90ms}
  html.op-motion .oph-sub[data-visible]>li:nth-child(3){animation-delay:180ms}
  html.op-motion .oph-sub[data-visible]>li:nth-child(4){animation-delay:270ms}
  html.op-motion .oph-sub[data-visible]>li:nth-child(5){animation-delay:360ms}
  html.op-motion .oph-sub[data-visible]>li:nth-child(n+6){animation-delay:450ms}  /* maximo seis */
}
/* Impresion: nada oculto. */
@media print{[data-reveal],img[data-hero]{opacity:1!important;transform:none!important}}