/* MTB Frame — Motion toolkit: hover effects, animated hover borders,
   continuous motion, moving gradient backgrounds. Emitted as classes by
   includes/common-attrs.php. Loaded on the frontend AND the builder iframe so
   effects preview live. All continuous/large motion respects reduced-motion. */

/* ── Hover motion ──────────────────────────────────────────────── */
.frame-hover-lift { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.frame-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.frame-hover-grow { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.frame-hover-grow:hover { transform: scale(1.04); }
.frame-hover-sink { transition: transform .18s ease; }
.frame-hover-sink:hover { transform: translateY(2px) scale(.99); }
.frame-hover-tilt { transition: transform .3s ease; transform-style: preserve-3d; }
.frame-hover-tilt:hover { transform: perspective(800px) rotateX(4deg) rotateY(-4deg); }
.frame-hover-glow { transition: box-shadow .3s ease; }
.frame-hover-glow:hover { box-shadow: 0 0 0 1px var(--frame-accent,#FF5B04), 0 0 26px color-mix(in srgb, var(--frame-accent,#FF5B04) 50%, transparent); }

/* ── Animated hover borders ────────────────────────────────────── */
.frame-hb-glow, .frame-hb-sweep, .frame-hb-pulse { position: relative; }
.frame-hb-glow::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid transparent; transition: border-color .3s ease, box-shadow .3s ease;
}
.frame-hb-glow:hover::after { border-color: var(--frame-accent,#FF5B04); box-shadow: 0 0 18px color-mix(in srgb, var(--frame-accent,#FF5B04) 60%, transparent); }

/* Spinning gradient ring revealed on hover (the "animated hover border"). */
.frame-hb-sweep::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; opacity: 0;
  background: conic-gradient(from 0deg, var(--frame-accent,#FF5B04), #8b5cf6, #22d3ee, var(--frame-accent,#FF5B04));
  transition: opacity .3s ease;
}
.frame-hb-sweep:hover::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .frame-hb-sweep:hover::before { animation: frame-spin 3s linear infinite; }
}

.frame-hb-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--frame-accent,#FF5B04); opacity: 0; transition: opacity .3s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .frame-hb-pulse:hover::after { opacity: 1; animation: frame-borderpulse 1.4s ease-in-out infinite; }
}
.frame-hb-pulse:hover::after { opacity: 1; }

/* ── Continuous motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .frame-loop-float     { animation: frame-float 4s ease-in-out infinite; }
  .frame-loop-bob       { animation: frame-bob 3.4s ease-in-out infinite; }
  .frame-loop-pulse     { animation: frame-pulse 2.4s ease-in-out infinite; }
  .frame-loop-spin-slow { animation: frame-spin 16s linear infinite; }
  .frame-loop-shimmer   { position: relative; overflow: hidden; }
  .frame-loop-shimmer::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
    animation: frame-shimmer 2.8s ease-in-out infinite;
  }
}

/* ── Moving gradient background ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .frame-bg-grad--anim { animation: frame-grad-move var(--frame-grad-dur, 12s) ease infinite; }
}

@keyframes frame-spin       { to { transform: rotate(360deg); } }
@keyframes frame-float      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes frame-bob        { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(1.4deg); } }
@keyframes frame-pulse      { 0%,100% { opacity: 1; } 50% { opacity: .58; } }
@keyframes frame-shimmer    { to { transform: translateX(120%); } }
@keyframes frame-borderpulse{ 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--frame-accent,#FF5B04) 60%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@keyframes frame-grad-move  { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }