/* C_C motion layer — additive, no recompila el riso original. Prefiere tokens del theme. */
@keyframes cc-fx-in { from { opacity: 0; transform: translateY(28px) rotate(.6deg); filter: blur(6px); }
                     to   { opacity: 1; transform: none; filter: blur(0); } }
@keyframes cc-fx-marq { to { transform: translateX(-50%); } }

.fx-word { display: inline-block; opacity: 0; animation: cc-fx-in .82s cubic-bezier(.16,1,.3,1) forwards; }
.fx-rise { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.fx-rise.in { opacity: 1; transform: none; }

/* tiles de trabajo: spotlight que sigue el cursor + zoom de la miniatura */
.fx-tile { position: relative; isolation: isolate; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.fx-tile::after { content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(214,190,140,.16), transparent 62%);
  opacity: 0; transition: opacity .4s; }
.fx-tile:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.fx-tile:hover::after { opacity: 1; }
.fx-tile img, .fx-tile [class*="aspect"] { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.fx-tile:hover img, .fx-tile:hover [class*="aspect"] { transform: scale(1.04); }

/* marquee con reversa al scroll */
.fx-marq { display: inline-flex; white-space: nowrap; will-change: transform; animation: cc-fx-marq 38s linear infinite; }
.fx-marq > span { padding-right: 3ch; }
.fx-marq:hover { animation-play-state: paused; }

/* botón magnético */
.fx-btn { transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, color .3s; }
.fx-btn:hover { transform: translate(var(--bx,0), var(--by,0)); }
.fx-btn:active { transform: scale(.96); }

/* kicker / eyebrow con subrayado que se dibuja */
.fx-rule { position: relative; }
.fx-rule::before { content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:currentColor; opacity:.5; transition: width .9s cubic-bezier(.16,1,.3,1); }
.fx-rule.in::before { width:100%; }

@media (prefers-reduced-motion: reduce) {
  .fx-word, .fx-rise { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .fx-marq { animation: none !important; }
  .fx-tile:hover { transform: none; }
}