/* ============================================================================
   ORDEN Motion — CSS del MOTOR. Nada de diseño acá.

   Sólo lo que el JavaScript necesita para funcionar: el estado inicial de los
   reveals y las tres capas fijas del isotipo y del portal. Ni tipografías, ni
   colores de marca, ni componentes: eso pertenece al sitio, no al plugin.

   Todas las clases están prefijadas om- y son puramente estructurales, así que
   el plugin se puede usar en cualquier web sin arrastrarle una estética.
   ========================================================================== */

/* --- el portal tapa la pantalla entera: nada puede recortarlo --------------- */
/* Divi mete overflow en varios contenedores; sin esto el hexágono se corta. */
#page-container,
#et-main-area,
.et_pb_section { overflow:visible; }

/* --- reveals ---------------------------------------------------------------- */
/* Estado inicial. Se aplica sólo bajo html.om-js, que agrega el propio script:
   si el JS no carga, nada queda invisible y la página se ve entera.
   Con GSAP presente la animación la maneja gsap.fromTo() y esta transición no
   llega a usarse; es el camino de respaldo con IntersectionObserver. */
html.om-js .om-reveal:not([data-om-shown]) {
  opacity:0;
  transform:translateY(24px);
}
.om-reveal {
  transition:opacity 0.85s cubic-bezier(0.22,1,0.36,1),
             transform 0.95s cubic-bezier(0.22,1,0.36,1);
  will-change:opacity, transform;
}
.om-reveal[data-om-shown] { opacity:1; transform:none; }

/* --- hueco del isotipo ------------------------------------------------------ */
/* Anclaje por elemento. El anclaje declarativo (data-cube-w / -top / -side /
   -inset sobre la sección) no necesita ningún estilo: lo resuelve el JS. */
.om-anchor { position:absolute; pointer-events:none; z-index:0; display:block; }

/* --- capas fijas ------------------------------------------------------------ */
@keyframes om3-float { 0%,100% { transform:translateY(-14px); } 50% { transform:translateY(14px); } }

.om-cube-wrap {
  position:fixed; left:0; top:0;
  width:380px; height:412px;
  z-index:11;
  pointer-events:none;
  transform-origin:0 0;
  transform:translate(-9999px,0);   /* aparcado hasta que follow() lo coloque */
  will-change:transform;
  /* el halo cambia de color al pasar de una sección a otra */
  transition:filter 0.6s ease, opacity 0.4s ease;
}
.om-cube-float { width:100%; height:100%; animation:om3-float 8s ease-in-out infinite; }
.om-cube-wrap logo-cube { display:block; width:100%; height:100%; }

.om-edge, .om-portal {
  position:fixed; left:50%; top:50%;
  width:230vmax; height:230vmax;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) rotate(0deg) scale(0);
  clip-path:polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  will-change:transform, opacity;
}
.om-edge   { z-index:90; background:radial-gradient(60% 60% at 50% 50%, #ffd08a, #f0752b 55%, #c2431a 100%); }
.om-portal { z-index:91; background:radial-gradient(58% 58% at 50% 45%, #1E3E82, #101C3A 55%, #0B0E13 100%); }

/* --- responsive ------------------------------------------------------------- */
@media (max-width:980px) {
  /* El isotipo viaja también en mobile: cada anclaje declara su caja de teléfono
     con data-cube-*-mobile y anchorBox() la usa por debajo de este mismo ancho.
     La casilla "Mostrar el isotipo en mobile" queda como interruptor de batería;
     apagada, esta regla lo retira. */
  html:not(.om-mobile-cube) .om-cube-wrap { display:none; }
}

/* Respeta la preferencia del sistema: sin movimiento, sin viaje ni portal.
   Se puede desactivar desde los ajustes, pero no es recomendable. */
@media (prefers-reduced-motion:reduce) {
  .om-reveal { transition:none; opacity:1 !important; transform:none !important; }
  .om-cube-float { animation:none; }
  .om-edge, .om-portal { display:none; }
}