/**
 * FEF Animographic — styles for the "🎯 FEF Animographic" mouse-move stage.
 * Loaded on the front-end and inside the Elementor preview. The JS engine sets
 * transform / transition / opacity inline; this file only supplies GPU hints,
 * a CSS fallback transition, reduced-motion safety and an editor helper.
 */

/* The stage: a positioning context for its animated children. */
.fef-animo {
  position: relative;
}

/* Animated child: GPU-friendly, centred transform origin. */
.fef-animo-item {
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Fallback transition (JS overrides with per-item duration / easing / delay). */
.fef-animo-item.fef-animo-ready {
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* Respect visitors who ask for less motion — hold everything at start. */
@media (prefers-reduced-motion: reduce) {
  .fef-animo-item,
  .fef-animo-item.fef-animo-ready {
    transition: none !important;
  }
}

/* Editor helper: outline the stage so it's easy to spot while designing. */
.elementor-editor-active .fef-animo {
  outline: 1px dashed rgba(124, 58, 237, 0.35);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   OVERFLOW  — clip the part of a moved / looping widget that crosses the
   container edge (the widget stays visible inside the box; only the
   overflowing portion is hidden). !important is required because Elementor
   containers set overflow inline, and an inline style beats a class selector.
   ═══════════════════════════════════════════════════════════════════════ */
.fef-animo.fef-animo-ofx-hidden  { overflow-x: hidden  !important; }
.fef-animo.fef-animo-ofx-clip    { overflow-x: clip    !important; overflow-clip-margin: 0; }
.fef-animo.fef-animo-ofx-visible { overflow-x: visible !important; }
.fef-animo.fef-animo-ofx-auto    { overflow-x: auto    !important; }
.fef-animo.fef-animo-ofx-scroll  { overflow-x: scroll  !important; }
.fef-animo.fef-animo-ofy-hidden  { overflow-y: hidden  !important; }
.fef-animo.fef-animo-ofy-clip    { overflow-y: clip    !important; overflow-clip-margin: 0; }
.fef-animo.fef-animo-ofy-visible { overflow-y: visible !important; }
.fef-animo.fef-animo-ofy-auto    { overflow-y: auto    !important; }
.fef-animo.fef-animo-ofy-scroll  { overflow-y: scroll  !important; }

/* Boxed containers render children inside .e-con-inner; clip there too so the
   overflowing portion is hidden at the visible box edge either way. */
.fef-animo.fef-animo-ofx-hidden > .e-con-inner,
.fef-animo.fef-animo-ofx-clip   > .e-con-inner { overflow-x: inherit; }
.fef-animo.fef-animo-ofy-hidden > .e-con-inner,
.fef-animo.fef-animo-ofy-clip   > .e-con-inner { overflow-y: inherit; }

/* ═══════════════════════════════════════════════════════════════════════
   BACKGROUND EFFECTS  — shine sweep + particle canvas.
   FX layers sit at z-index 0 (under) or 6 (over); stage content is lifted to
   z-index 1 so "under" layers read behind the widgets.
   ═══════════════════════════════════════════════════════════════════════ */
.fef-animo-has-fx > :not(.fef-animo-fx-layer) {
  position: relative;
  z-index: 1;
}
.fef-animo-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.fef-animo-shine-streak {
  position: absolute;
  top: -25%;
  left: -40%;
  height: 150%;
  filter: blur(2px);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOOP ANIMATIONS  — applied by JS to the widget's inner container.
   ═══════════════════════════════════════════════════════════════════════ */
.fef-animo-loop {
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes fef-loop-spin      { to   { transform: rotate(360deg); } }
@keyframes fef-loop-spin-ccw  { to   { transform: rotate(-360deg); } }
@keyframes fef-loop-orbit {
  from { transform: rotate(0deg) translateX(12px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(12px) rotate(-360deg); }
}
@keyframes fef-loop-float     { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-14px); } }
@keyframes fef-loop-bob       { 0%,100% { transform: translateY(0); }   50% { transform: translateY(8px); } }
@keyframes fef-loop-sway      { 0%,100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
@keyframes fef-loop-pulse     { 0%,100% { transform: scale(1); }        50% { transform: scale(1.12); } }
@keyframes fef-loop-heartbeat { 0%,40%,100% { transform: scale(1); } 10% { transform: scale(1.15); } 20% { transform: scale(1); } 30% { transform: scale(1.15); } }
@keyframes fef-loop-wobble    { 0%,100% { transform: rotate(0); } 25% { transform: rotate(6deg); } 75% { transform: rotate(-6deg); } }
@keyframes fef-loop-swing     { 0%,100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 75% { transform: rotate(-8deg); } }
@keyframes fef-loop-shake     { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes fef-loop-rubber    { 0%,100% { transform: scale(1,1); } 30% { transform: scale(1.25,.75); } 40% { transform: scale(.75,1.25); } 60% { transform: scale(1.05,.95); } }
@keyframes fef-loop-tada {
  0%,100% { transform: scale(1) rotate(0); }
  10%,20% { transform: scale(.9) rotate(-3deg); }
  30%,50%,70%,90% { transform: scale(1.1) rotate(3deg); }
  40%,60%,80%      { transform: scale(1.1) rotate(-3deg); }
}
@keyframes fef-loop-jelly     { 0%,100% { transform: scale(1,1); } 25% { transform: scale(.95,1.05); } 50% { transform: scale(1.05,.95); } 75% { transform: scale(.97,1.03); } }

@media (prefers-reduced-motion: reduce) {
  .fef-animo-loop { animation: none !important; }
  .fef-animo-shine, .fef-animo-particles { display: none !important; }
}